자바스크립트 기본 - nullish coalescing operator ( ?? )

null 병합 연산자 ( ?? )

null 병합 연산자를 사용하면 여러 피연산자 중 값이 할당되어 있는 변수를 찾을 수 있습니다.

let a = null
let b = 1
console.log(a ?? b) //1

null 병합 연산자는 왼쪽 피연산자의 값이 null과 undefined가 아니면(값이 할당되어 있으면) a를 리턴하고
그 외의 경우에는 b를 리턴합니다

let a = null;
let b = 2
let c = null;
console.log(a ?? b ?? c) //2

왼쪽부터 차례대로 
a ?? b의 결과는 a가 null이므로 b가 남고
b ?? c의 결과는 b에 값이 할당되어 있으므로 b가 리턴됩니다.

 

null 병합 연산자( ?? )와 OR 연산자( || )의 차이점

- null 병합 연산자는 첫 번째 정의된 값을 리턴합니다.

- OR 연산자는 첫 번째 truthy를 리턴합니다.

이 차이점이 null과 undefined, 숫자 0을 구분 지어 다루고자 할 때!

중요한 역할을 합니다.

시험 미응시자의 grade는 null or undefined 이라고 가정합니다.
교수님은 이번 시험에 미응시자에게 F학점을 주고 싶습니다.

let grade = 0
console.log(grade = grade || "F")  // F

위 예시처럼 OR 연산자를 사용하면 
응시는 했지만 성적이 0점인 사람이 F학점을 받아 버립니다.

let grade = 0
console.log(grade = grade ?? "F") // 0

이 경우에 null 병합 연산자를 사용하면 
0점인 사람은 F학점을 면할 수 있게 되었습니다!

이런 특징 때문에 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 || 보다 ?? 이 더 적합합니다~

 

?? 연산자 우선순위

?? 연산자의 우선순위는 5로 꽤 낮기 때문에

= 와 ? 보다는 먼저 평가되고 , 대부분의 연산자 보다는 나중에 평가됩니다.

때문에 복잡한 표현식 안에서 ??을 사용해서 값을 선택 하고자 할 때에는 괄호를 추가해 줍시다!

let height = null;
let width = null;

let area = (height ?? 100) * (width ?? 50); 
console.log(area); // 5000
??이 값이 없다면 기본값을 준다는 의미도 되겠네요!

위의 코드에서 괄호가 없다면...
let area = height ?? (100 * width) ?? 50
이런식으로 평가 되어 원하는 결과를 얻지 못합니다.

 

null 병합 연산자( ?? )는 AND연산자( && )나 OR연산자( || )와 함께 사용할 수 없습니다!

 || 을 ??로 바꾸기 시작하면서 발생되는 실수를 방지하고자 명세서에 제약이 추가 되었습니다.

제약을 피해 사용하려면 괄호를 사용하면 됩니다.

let x = 1 && (2 ?? 3); // 제대로 동작합니다.
console.log(x) // 2

let x = 1 && 2 ?? 3; // 괄호 없이 같이 사용할 수 없습니다.
console.log(x)// Uncaught SyntaxError: Unexpected token '??'

 

 

 

기본이 중요하다.