코드를 작성할 때 || 대신 ?? 연산자를 사용하라는 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를 다루는 경우에는 ?? 연산자를 사용하는 것이 더 적절합니다.