개발자
류준열

JS 단축평가, 형변환 알고 쓰자

아래는 내가 겪었던 사소한 문법실수들이다.

null 병합 연산자, ??

??(nullish coalescing)는 좌항이 null 또는 undefined일 때만 우항을 선택한다. 빈 문자열 ""은 값이 있는 것으로 취급한다.

"" ?? "build-client"; // ""
undefined ?? "build-client"; // "build-client"

환경변수를 '??' 로 처리했을때 생기는 문제

환경변수를 런타임 환경변수, 빌드타임 환경변수를 쓰고 있었는데 다음과 같이 우선순위를 정해놓고 있었다.

export const config = {
  apiBase: runtime.apiBase ?? import.meta.env.VITE_API_TARGET ?? "",
  ...
}  

이때 런타임 환경변수 runtime.apiBase에서 ''를 내려줄때 유효한 빌드값인 import.meta.env.VITE_API_TARGET 가 선택되지 않는 문제가 있었다.

그래서 이런 경우에는 falsy를 판단하는 || 를 사용해야 한다.

count나 문자열을 '||'로 관리할때 생기는 문제

||는 falsy한 값일때 우항을 선택한다.

  0 || 'hi' // 'hi'
	'' || 'hi2' // 'hi2'

만약 서버에서 숫자를 나타내는 데이터가 0으로 왔다고 가정하자. 이때는 count가 0일때도 유효한 값이 된다. 그럼 이땐 falsy한 값을 기준으로 하는 ||를 사용하는게 아니라 nullish를 기준으로 하는 ??를 사용해야 한다.

// 백엔드에서 내려준 데이터
conut = 0

  count || null // null
	count ?? null // 0

Number()

Number는 숫자로 형변환해주는 연산자이다.

아래 성질을 알아야 한다. 무효한 count를 0으로 변환하지 않도록.

// 서버에서 count를 null로 내려줌
count = null

const parsedCount = Number(count) // 0, null 인데 0으로 형변환된다.