?? (Nullish Coalescing Operator)에 대해서 알아보

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