때는 이번주 월요일. 행동대장 프로젝트에서 버그를 발견했다.
버그는 카카오 프로필 이미지를 연동하지 않았을 경우 회원 프로필 이미지가 alt로 출력되는 버그였다. 이 버그의 원인은 null 병합 연산자 ??의 사용이었다. 나도 이전까지는 모르고 사용했던 연산자였다. 최근에 자바스크립트 딥 다이브를 읽고 정확한 개념을 알게 되었다.

나와 같이 null 병합 연산자가 삼항 연산자와 유사하게 동작할 것이라고 혼동했던 사람들이 존재할 것이라고 생각 된다. 그래서 이번에 null 병합 연산자가 무엇인지 정확히 알아보겠다!

null 병합 연산자

null 병합 연산자 (nullish coalescing) ??는 좌항의 피연산자가 nullish 값일 경우 우항의 피연산자를 반환한다. nullish 값이 아닐 경우에는 좌항의 피연산자를 반환한다.

let soha = null;

const foo = () => soha ?? '없음';
console.log(foo()); // '없음'

soha = 'soha'; // soha로 재할당
console.log(foo()); // 'soha'

null 병합 연산자의 경우에는 논리 연산자 ||를 사용하여 단축 평가를 했을 때 보다 예기치 않은 동작을 방지할 수 있어서 좋다. 논리 연산자 ||의 경우에는 좌항의 피연산자가 falsy 값일 경우에 우항의 피연산자를 반환하기 때문이다.

let soha = '';

const foo = () => soha ?? '없음';
console.log(foo()); // ''

const boo = () => soha || '없음';
console.log(boo()); // '없음'

자, 위 설명에서 nullish와 falsy라는 용어가 나왔다. nullish와 falsy는 무엇일까?

nullish

nullish는 값이 null 또는 undefined인 경우를 말한다.

nullish 값

• null: 값이 “비어 있음”을 명시적으로 나타내는 값
  • 프로그래머가 의도적으로 값이 없음을 지정할 때 사용.
  • 객체의 기본 값이나 초기화되지 않은 상태를 나타낼 수 있음.
• undefined: 값이 “정의되지 않음”을 나타내는 값
  • 선언된 변수에 값이 할당되지 않았을 때 기본적으로 설정되는 값.
  • 함수가 명시적으로 반환값을 설정하지 않을 때도 반환되는 값.

falsy

falsy는 조건문에서 “거짓처럼 평가되는 값”을 말한다.

falsy 값

• false: 불리언 타입의 거짓 값
• 0: 숫자형 타입의 0
• -0: 숫자형 타입의 음수 0
• 0n: BigInt 타입의 0
• "": 문자열 타입의 빈 값
• null
• undefined
• NaN: 숫자 연산이 실패했음을 나타내는 특수 숫자 값
  • “Not a Number”(숫자가 아님)의 약자.
  • 숫자형 타입이지만 계산 불가능한 값이나 잘못된 숫자 연산의 결과를 나타냄. ex) 0 / 0 , parseInt("abc").

다시 보기

nullish와 falsy가 무엇인지 알았으니 위에서 설명했던 코드를 다시 보자.

let soha = '';

const foo = () => soha ?? '없음';
console.log(foo()); // ''

const boo = () => soha || '없음';
console.log(boo()); // '없음'

null 병합 연산자는 soha의 값이 빈 문자열(falsy)이기 때문에 soha 값(’’)을 출력했다. 논리 연산자 ||는 soha의 값이 falsy이기 때문에 ‘없음’을 출력했다.

참고

• [도서] 모던 자바스크립트 Deep Dive