TS/JS Nullish Coalescing 설명하기

정의/용법

 

nullish 병합 연산자는 JS에 있는 문법으로 타입을 중시하는 TS에서 많이 사용되는 문법 중 하나이다. 

a ?? b

• a가 null도 아니고 undefined도 아니면 a 
• 그 외에는 b 

??을 사용하지 않고 위와 동일한 코드를 작성하면 아래와 같다

x = (a !== null && a !== undefined) ? a : b;

추가 예시

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

위 코드에서 ?? 병합 연산자를 통해 간편하게 실제로 값이 들어있는 변수를 기준으로 alert를 호출할 수 있다. 

 

?? 와 || 의 차이점

• ||은 truthy 값을 반환한다
• ??는 첫 번째 정의된 값을 반환한다.

사실 위 설명을 보면 무슨 소리인가 싶다(일단 나는 그렇다) 간단하게 말해서 null/undefined/0 을 구분 지을 때 위의 설명이 중요하게 작용한다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

• ||은 truthy한 값을 반환하기 때문에 0 대신 100을 반환한다(0은 falsy로 간주되기 때문에)
• ??은 정확히 null이나 undefined일 때만 100이 되기 때문에 0을 반환하게 된다. 
  • 따라서 0을 할당할 수 있는/할당 해야 하는 경우 ??을 사용하는 것이 더 적합하다.

 

TS 환경에서 사용법/주의점

// 옳지 못한 방식?(블로그 저자 관점) 
function getState(id: number) {
	
    const stateId = id ?? '123' // number | "123" (리터럴 타입으로 간주되기 때문에 타입이 다르다)
    
    return this.database.find(stateId) 
    // compilation error if this.database.find requires number
}

//바람직한 방식(블로그 저자 관점)

function getState(id: number) {
	
    const defaultStateId = 1;    
    const stateId = id ?? defaultStateId; //동일한 number 타입
    
    return this.database.find(stateId)    // no compilation error thrown
}

 

위 코드에선 this.database.find이 number일 경우 error 컴파일 에러가 발생한다고 한다. 본 글의 저자는 서로 다른 두 타입에 ?? 연산자를 사용하는 것은 바람직하지 않다고 한다. 따라서, 동일한 두 타입에서 ?? 사용하는 것이 오히려 코드 예측 가능성을 높여줄 것이라고 말한다( 해당 글은 아래 내용을 참고해서 작성한 것이기 때문에 참고만 하시면 될 것 같습니다!)

---

참고 자료

 

https://indepth.dev/posts/1300/double-question-marks-typescript-3-7-nullish-coalescing

Double Question Marks TypeScript 3.7 - Nullish Coalescing - inDepthDev

https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'