타입스크립트 Nullish Coalescing Operator

nullish coalescing operato

nullish coalescing operator은 null병합 연산자라고 불린다.

es2020에서 추가된 문법이며  A ?? B 와같이 표기한다. 좌항이 null, undefined인 경우에만 B를 리턴한다. 

 

null이나 undefined가 아니면 A를 리턴한다. 기존에 nullish coalescing operator을 사용하지 않았던 경우에는 A || B 의 or 논리연산자를 사용했다. A가 falsy(0, '', -0, NaN 등)한 값인 경우 B를 반환하고 아니면 A를 반환하는 연산자이다.

nullish coalescing operator 등장한 이유는 null, undefined를 제외한 falsy값을 그대로 리턴하고 싶은 경우 사용하기위함이다.

 

Default 값을 정의할 떄: || 를 쓰는 경우와 ??를 쓰는 경우

or연산자와 null병합 연산자를 쓰는 경우의 차이를 알아보자.

 

||

getPrice 함수는 product객체를 받아서 객체안에 있는 price가 존재하면 product.price를 반환한다. 이때 falsy한 값을 체크하기 때문에 이러한 값이 price이 왔을 때 or(||)는 -1을 반환하게 된다.

예를 들어서 price가 0원 일때, 0을 반환하고 싶은 경우에도 -1을 반환한다. 이때 의도했던 함수와 내용이 달라진다.

이런경우에는 null과 undefined만 체크하도록 null병합(??) 연산자를 사용한다.

 

??

price는 null과 undefined가 아니기 때문에 좌항이 리턴된다. 즉 0이 반환된다.

예를 들어 price가 undefined 또는 null 일 경우 -1을 반환한다.

 

Q. <1>, <2>에서 출력될 문자열?

setName() 을 호출하면 전달된 매개변수가 없어 name이 nullish한 값이 되고 ??에 의해 'elice'가 삽입된다. 따라서 <1>에서는 hi,elice가 출력된다.

 

initName()을 호출하면 name이 empty string('')으로 설정된다. empty string은 falsy한 값이므로 <2>에서 hi가 출력된다.

 

만약 falsy한 값(false로 평가되는 값) 0과 empty string이 올 수 있는 변수 ||를 쓰면 0과 ''를 false로 인식하기 때문에 의도치 못한 결과를 초래할수 있다. 실무에서 흔하게 저지르는 실수 이기도하다. default 값을 지정해 줄때는 ||이 아니라 ??을 쓰는것을 권장한다.