Nullish coalescing operator '??' (JavaScript)

출처 :  https://javascript.info/nullish-coalescing-operator

Nullish coalescing operator '??'

 

 

 

 

 

최근 추가된 기능 

 

이 연산자는 자바스크립트에 최근 추가된 기능임. 

구형 브라우저에서는 폴리필(polyfill)이 필요할 수 있음.

nullish coalescing operator는 두 개의 물음표 (??)로 작성됨.

 

null과 undefined의 취급

null과 undefined를 동일하게 취급하기 때문에 , 여기서는 간단히 " 정의되었다 (defined)"라고 표현함. 

즉 값이 null도 undefined도 아닐 떈 그 값을 '정의된" 값이라고 함. 

 

a ?? b 의 결과는 다음과 같음 :

 

만약 a가 정의되어 있다면 -> a를 반환함.

만약 a가 정의되어 있지 않다면 ( 즉 , null 또는 undefined 라면 ) -> b를 반환함.

 

즉 ?? 연산자는 첫 번쨰 인자가 null/undefined가 아닐 경우 그 값을 반환하고, 그렇지 않으면 두 번쨰 인자를 반환함.

 

이는 두 값 중 첫 번째 "정의된"값을 선택하는 깔끔한 문법임.

 

기존 연산자로의 변환

result = a ?? b 는 이미 알고 있는 연산자를 사용하여 다음과 같이 바꿀 수 있음. 

 

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

 

이제 ?? 연산자가 무엇을 하는지 명확해짐.

 

기본 값 제공에 활용

??연산자의 일반적인 사용 사례는 기본값을 제공하는 것임. 예를 들어 , 사용자의 값이 null이나 undefined가 아닐 경우 해당 값을 , 그렇지 않으면 "Anonymous" 를 표시할 수 있음.

 

let user;
alert(user ?? "Anonymous"); // user가 undefined이므로 "Anonymous" 출력

 

 

또 다른 예로 , 사용자가 실제로 이름을 가지고 있다면 : 

 

let user = "John";
alert(user ?? "Anonymous"); // user가 정의되어 있으므로 "John" 출력

 

여러 개의 값을 순서대로 검사하여 , null/undefined가 아닌 첫 번쨰 값을 선택할수도 있음.

예를 들어 사용자의 데이터가 firstName , lastname , nickName에 저장되어 있고 , 이 중 하나만 값이 있을 떄 :

 

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 첫 번째 정의된 값을 선택:
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // "Supercoder" 출력

 

|| 연산자와의 비교 

논리 OR(||)연산자도 비슷한 방식으로 사용할 수 있음.

예를 들어 , 위 코드를 ?? 대신 ||를 사용해도 동일한 결과를 얻을 수 있음.

 

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 첫 번째 truthy 값을 선택:
alert(firstName || lastName || nickName || "Anonymous"); // "Supercoder" 출력

 

역사적으로는 || 연산자가 먼저 존재했기 때문에 , 개발자들은 오랫동안 이를 기본값 제공 용도로 사용해왔음.

하지만 || 연산자는 false , 0 ,  빈 문자열 ""과 같이 falsy한 값들은 null/undefined와 구분하지 않음.

 

아마 다 똑같이 처리한다는 이야기인 것 같다.

 

즉 첫번째 인자가 falsy 값이면 두 번째 인자를 반환함.

 

반면 ?? 연산자는 오직 null과 undefined만을 "정의하지 않음"으로 간주함.

 

예를 들어 : 

 

let height = 0;

alert(height || 100); // 0은 falsy하므로 100 출력
alert(height ?? 100); // 0은 null/undefined가 아니므로 0 그대로 출력

 

여기서 0이라는 값은 유효한 값이므로 기본값으로 대체되면 안 됨. 이 경우 ?? 연산자가 올바르게 동작함. 

 

연산자 우선순위 (precedence)

?? 연산자의 우선순위는 || 와 동일하며 , MDN 표에 따르면 두 연산자 모두 3임. 

즉 ??는 = 나 ? 보다 우선하지만 , + , * 같은 대부분의 연산자보다는 낮은 우선순위를 가짐. 

 

따라서 아래와 같이 괄호를 사용해주어야 올바른 결과를 얻을 수 있음.

 

let height = null;
let width = null;

// 중요: 괄호 사용
let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000 출력

 

 

괄호를 생략할 경우 , 곱셈 연산자(*)가 ?? 보다 우선순위가 높아 먼저 계산되어 잘못된 결과가 발생할 수 있음. 

 

// 괄호 없이 사용하면 (원하는 결과가 아님):
let area = height ?? 100 * width ?? 50;
// 또는
let area = height ?? (100 * width) ?? 50;

 

&& 또는 ||와 함께 사용할 떄 

안전상의 이유로 JavaScript에서는 명시적으로 괄호로 우선순위를 지정하지 않으면 ?? 연산자를 &&나 ||와 함께 사용하지 못함.

 

예를 들어 , 아래 코드는 문법 오류를 발생시킴. 

 

let x = 1 && 2 ?? 3; // 문법 오류

 

이 제한은 프로그래밍 실수를 방지하기 위한 것으로 ||에서 ??로 전환할 떄 발생할 수 있는 혼동을 막기 위해 도입되었음.

해결 방법은 명시적으로 괄호를 사용하는 것임.

 

let x = (1 && 2) ?? 3; // 정상 작동
alert(x); // 2 출력