?? (Nullish Coalescing Operator)에 대해서 알아보
KUKJIN LEE • 4주 전 작성
코드를 작성할 때 ||
대신 ??
연산자를 사용하라는 lint 경고는 nullish coalescing operator (??
)의 사용을 권장하는 규칙에 의해 발생합니다. 이 문서는 ||
와 ??
연산자의 차이점과 ??
를 사용해야 하는 이유를 설명드리겠습니다. FrontEnd 카테고리에 작성했지만, FrontEnd에 국한된 내용이 아닙니다.
||
연산자와 ??
연산자의 차이점
-
||
연산자 (Logical OR):-
||
연산자는 Falsy 값(0
,false
,""
,null
,undefined
,NaN
)을 만나면 오른쪽 피연산자 값을 반환합니다. -
예시:
const value = searchParams.q || "default";
여기서
searchParams.q
가 빈 문자열""
일 경우,||
연산자는 이를 Falsy로 간주하여"default"
값을 반환합니다. 하지만 의도한 것은 빈 문자열이 유효한 값일 수도 있다는 경우에 이를 유지해야 할 수도 있습니다.
-
-
??
연산자 (Nullish Coalescing Operator):-
??
연산자는 null 또는 undefined인 경우에만 오른쪽 피연산자 값을 반환합니다.0
,false
,""
,NaN
등의 값은 유효한 값으로 간주하여 무시됩니다. -
예시:
const value = searchParams.q ?? "default";
여기서
searchParams.q
가null
또는undefined
일 때만"default"
값을 반환합니다. 만약searchParams.q
가 빈 문자열""
이면, 이 값이 그대로 유지됩니다.
-
왜 ??
를 사용하라는 경고가 발생하는가?
-
안정성
-
||
를 사용할 경우, 빈 문자열""
, 숫자0
, 불리언false
등의 Falsy 값이 의도치 않게 기본값으로 대체될 수 있습니다. 이로 인해 의도하지 않은 동작이 발생할 가능성이 있습니다. -
??
를 사용하면 오직null
또는undefined
일 경우에만 기본값을 설정할 수 있어 이러한 상황을 방지할 수 있습니다.
-
-
의도한 동작 보장
-
??
는null
또는undefined
가 아닌 값을 보존하기 때문에, Falsy 값을 무시하고 기본값을 반환하지 않는다는 점에서 더 의도한 동작을 보장합니다.
-
코드 예시
-
잘못된 예시 (
||
사용)const query = searchParams.q || "";
여기서
searchParams.q
가 빈 문자열일 경우, 의도치 않게 기본값인 빈 문자열""
이 반환됩니다. -
올바른 예시 (
??
사용)const query = searchParams.q ?? "";
여기서
searchParams.q
가null
또는undefined
인 경우에만 빈 문자열이 반환됩니다. 만약searchParams.q
가 빈 문자열""
이라면 그대로 유지됩니다.
Lint 경고에서 ??
연산자의 사용을 권장하는 이유는, Falsy 값과 null
/undefined
를 구분해 보다 안전하고 의도된 동작을 보장하기 위함입니다. ||
연산자는 모든 Falsy 값을 기본값으로 처리하기 때문에, null
또는 undefined
를 다루는 경우에는 ??
연산자를 사용하는 것이 더 적절합니다.