JavaScript - nullish coalescing(널 병합)/ Optional Chaining

ES2020에서 추가된 ?? (널 병합(nullish coalescing)) 연산자와 ?. (옵셔널 체이닝(optional chaining)연산자 이다.

 

 

널 병합 연산자 

&&(and)연산자
ture 값 일때 뒤로 넘어간다.

const a1 = 'a'
const b1 = a1 && 3;
console.log(b1);//3

const a2 = 0
const b2 = a1 && 3;
console.log(b1); //0​

널 병합 연사자는 주로 ' || ' 연산자 대용으로 사용되며, falsy 값 (0, ' ' , false, NaN, null, undefined) 중 null과 undefined만 따로 구분한다.

const a = 0;
const b = a || 3; // ||연산자는 falsy값이면 뒤로 넘어간다.
console.log(b); // 3

보통 ||(or)연산자를 쓸때 보통 null 과 undefined를 구분하기 위해서 많이 사용한다. 0, false와 같은 값은 상대적으로 구분해야 하는 빈도가 떨어지는 편이다.

 

0,' ' (빈문자열)이 문제를 이르키는 경우

let count = 0;
count || <div>123</div>;

위의 경우는 null 이나 undefind만을 구분해 주고 싶은 경우이다. 하시만  || 연산자를 사용하면 0도 falsy 값이니까 뒤로 넘어가 버려서 count가 0이 아니라 123이된다.(0일 경우에는 0이 나오기를 원하는 것.)

 

?? 연산자 사용 /nullish

const c =  0
const d = c ?? 3; // ?? 연산자는 null과 undefined일 때만 뒤로 넘어간다.
console.log(d); //0

const e = null;
const f = e ?? 3;
console.log(f); //3

const g = undefined;
const h = g ?? 3;
console.log(h); //3

---

Optional Chaining

옵셔널 체이닝 연산자는 null이나 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막는다.

const a = {};
a.b; //a가 객체 이므로 괜찮다.

 

Cannot read : Error

const c = null;

try{
  c.d;
}catch(e){
  console.error(e); //TypeError: Cannot read properties of null (reading 'd')
}

많은 경우 위와 같은 Error가 발생할 때 d가 null인 줄아는 경우가 많은데, d가 아니라 c가 null이다.

 

?.연산자 사용

c?.d;

//c의 속성중 함수를 읽을 때
try{
  c.f();
}catch(e){
  console.error(e) // //TypeError: Cannot read properties of null (reading 'f')
}

c?.f() //c가 null 혹은 undefined여도 문제가 발생하지 않는다.

try{
  c[0];
}catch(e){
  console.error(e) // //TypeError: Cannot read properties of null (reading '0')
}

c?.[0]; //문제가 발생하지 않는다.

위 코드와 같이 ' ?. ' 연산자를 사용하면 c가 null이나 undefined 인 경우 c 변수가 빈 대로 놔두고 c가 있으면 c의 속성 d를 읽는다.

 

' ?. ' 연산자를 사용하면 일반적인 속성 뿐만 아니라 함수 호출이나 배열 요소 접근에 대해서도 에러가 발생하는 것을 방지할 수 있다.

 

💡' c?.d '와 ' c?.f() ' , '  c?.[0] '의 값은 undefined가 된다는 것도 알아 둔다.

옵셔널 체이닝 연산자는 자바스크립트 프로그래밍을 할 때 발생하는 TypeError: Cannot read properties of undefined 또는 null 에러의 발생 빈도를 획기적으로 낮출 수 있기 때문에 자주 사용한다.

---

정리

const c = null;
const d = c?.[0] ?? '123';
console.log(d); //'123'

const e = [1,2,3];
const f = e?.[0] ?? '123'
console.log(f); //1

널 병합 연산자와 Optionall chaining 혼합해서 사용하기 

 

 

 

 

 

 

출처 - https://www.inflearn.com/course/%EB%85%B8%EB%93%9C-js-%EA%B5%90%EA%B3%BC%EC%84%9C#curriculum

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지 - 인프런 | 강의