210812 개발기록: Nullish Coalescing Operator(Null 병합 연산자) 착각할 수 있는 점

 

🌀 If 문을 간결하게 만들려다, Null 병합 연산자 까지 왔다!

if 문을 간결하게 표현하기 위해 삼항 연산자를 사용했다. 

ES2020 에서 추가된 Null 병합 연산자를 통해 삼항 연산자의 길이마저 줄일 수 있었다.

이 과정에서 내가 잘못 생각한 부분을 기록해본다.

const header = {
     ...,
     'id': request.headers['id'] ? request.headers['id'] : null
}

header 객체 내부 id 프로퍼티를 할당하는 과정을 보자.

request.headers['id'] 가 존재한다면, 그 자체를 할당하고, 그렇지 않으면 null 값을 할당한다.

이는 null 병합 연산자를 활용하면 코드를 더욱 간단하게 만들 수 있다.

const header = {
    ...,
    'id': request.headers['id'] ?? null
}

request.headers['id'] 의 값이 존재하므로 (defined), 해당 값을 할당하고, 그렇지 않은 경우엔(null, undefined) 일 땐 ?? 뒤의 null을 할당합니다. 이때 내가 잘못 생각한 부분은 바로 false 의 경우다.

만약 request.headers['id']의 값이 false 여도, 나는 당연히 ?? 뒤의 null 이 할당될 것이라 생각했다.
하지만 ?? 연산자는 닉 값대로 null 병합 연산자다. null 과 false 는 엄격히 구분한다.

// 두번째 피연산자 출력
let a; //undefined
console.log(a ?? 100) //100

a = undefined;
console.log(a ?? 200) //200

a = null;
console.log(a ?? 300) //300



// 첫번째 피연산자 출력
a = false;
console.log(a ?? 400) // false

null 병합 연산자의 첫번째 피연산자가 'null, undefined' 일 경우에만 두번째 피연산자가 선택 됨을 기억하자!

 

✅  OR 연산자 ( || ) 와 Null 병합 연산자( ?? ) 차이

Null 병합 연산자와 OR 연산자(||)는 헷갈릴 여지가 다분하다.

| | 는 첫 번째 truthy 값을 반환하고,  ??는 첫 번째 정의된(defined) 값을 반환한다.

// OR (||) 연산자
let a = 0;
console.log(a || 1)  // 1


// null (??) 연산자
let a = 0
console.log(a ?? 1) // 0

식별자 a 는 0으로 정의돼 있지만, boolean 값 기준에선 false 에 해당된다.

하지만 엄연히 defined 된 상태이기 때문에, null 병합 연산자 기준으론 0 값이 출력된다.