[Javascript] nullish 병합 연산자 '??'

📌 참고 사이트

nullish 병합 연산자 '??' (javascript.info)

nullish 병합 연산자 '??'

 

 

 

📋 nullish 병합 연산자

nullish 병합 연산자(nullish coalescing operator)를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는(null이나 undefined가 아닌) 변수를 찾을 수 있다.

📍 a ?? b 의 평가 결과

➡️ a가 null도 아니고 undefined도 아니면 a이다.

➡️ 위 경우 이외에는 b이다.

 

 

📍 ?? 연산자 없이 x = a ?? b와 동일한 동작을 하는 코드 작성하기

 

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

 

위에서 나온 설명대로 a가 null도 아니면서 동시에 undefined가 아닐 때에만 결과로 a가 반환되고, 그 이외의 경우에는 b가 반환된다.

nullish 병합 연산자는 위 코드를 더 짧게 만들 수 있다는 장점이 있다.

 

 

📍 nullish 병합 연산자 사용 예시

➡️ firstName, lastName, nickName이라는 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스(null의 케이스)도 허용한다고 해보자.

화면에는 세 변수 중 실제 값이 입력된 변수의 값을 출력하는데, 세 변수 모두 값이 없다면 '익명의 사용자'가 출력되도록 하자.

 

위와 같은 경우 nullish 병합 연산자를 사용하면 값이 정해진 변수를 간단하게 찾아낼 수 있다.

 

let fristName = null;     // 정보 입력 X
let lastName = null;     // 정보 입력 X
let nickName = '바이올렛'     // 이름 입력

// ??를 사용하면 null이나 undefined가 아닌 첫 번째 피연산자가 반환된다.
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자");     // 익명의 사용자

 

위 코드에서 ??를 이전 시간에 배운 논리 연산자 &&나 ||와 같은 작성 방식으로 사용하였다.

위와 같이 여러 값들을 피연산자로 하고 ??를 사용하면 왼쪽에서부터 시작하여 null이나 undefined가 아닌 첫 번째 피연산자가 반환된다.

 

➡️ 또한 ?? 는 변수에 기본값을 할당하는 용도로 사용할 수 있다.

 

// height가 null이나 undefined인 경우 100을 할당
height = height ?? 100;

 

 

 

📋 ?? 와 || 의 차이

📍 ?? 와 || 의 차이

위의 예시를 다시 살펴보자.

??는 null이나 undefined가 아닐 때 그 피연산자를 반환한다고 하였다.

||에서 null과 undefined는 false이고, OR 연산에서는 가장 먼저 true가 되는 값을 반환한다고 하였으므로 ?? 연산자를 사용했을 때와 마찬가지로 null과 undefined가 아닌 첫 번째 값으로 '바이올렛'이 반환된다.

 

기능이 같다고 생각할 수 있지만 두 연산자에는 차이가 있다.

➡️ || 는 첫 번째 truthy한 값을 반환한다.

➡️ ?? 는 첫 번째 정의된(defined) 값을 반환한다.

 

 

📍 ?? 와 || 의 차이를 볼 수 있는 예시

 

let height = 0;

alert(height || 100);     // 1. 100
alert(height ?? 100);     // 2. 0

 

1️⃣

height || 100 은 곧 0 || 100이다. 0을 불린형으로 변환하면 false가 된다. 따라서 다음 피연산자를 평가하게 되고, 100은 불린형에서 true이므로 100이 반환되게 된다. 즉, 100이 첫 번째로 참인 값이다.

 

2️⃣

height ?? 100 은 곧 0 ?? 100이다. 0은 정의된 값이다. 즉, undefined이거나 null이 아니다. 따라서 0이 첫 번째로 발견되는 정의된 값이 되고 0이 반환되고 끝나게 된다.

 

위와 같은 특징 때문에 0이 할당될 가능성이 있는 변수를 사용해 기능을 개발할 때는 ||보다는 ??가 적합하다.

 

 

 

📋 ??의 연산자 우선순위

➡️ ??의 연산자 우선순위는 5로 꽤 낮다.

* 연산자 우선순위 표 (순위 숫자가 클수록 우선순위가 높다.)

 

순위	연산자 이름	기호
.....	.....	.....
17	단항 덧셈, 단항 부정	+, -
16	지수	**
15	곱셈, 나눗셈	*, /
13	뺄셈, 덧셈	-, +
.....	.....	.....
3	할당	=
.....	.....	.....

 

➡️ ??는 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가된다.

➡️ 따라서 ??를 사용하는 식에서는 괄호를 추가하는 것이 좋다.

 

<예시>

 

let height = null;
let width = null;

// 괄호를 추가!
// (null ?? 100)에서 100, (null ?? 50)에서 50 반환, area에는 100과 50을 곱한 5000이 값으로 들어감.
let area = (height ?? 100) * (width ?? 50);

alert(area);     // 5000

 

➡️ 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못한다. 

위와 같은 제약을 피하여면 괄호를 사용해야 한다.

 

// 잘못된 경우
let x = 1 && 2 ?? 3     // SyntaxError : Unexpected token '??'

// 제대로 동작하는 경우 (괄호 사용)
let x = (1 && 2) ?? 3    
alert(x);     // 2

 

 

두 번째 예시로 주어진 제대로 동작하는 경우를 살펴보자.

가장 먼저 괄호 안에 있는 1 && 2가 실행된다. AND 연산자를 사용한 경우 가장 먼저 false가 되는 값을 반환하는데, 위의 경우 둘 다 true이므로 마지막 피연산자인 2가 반환된다.

그리고 2 ?? 3이 실행된다. ??는 가장 먼저 발견되는 undefined나 null이 아닌 값을 반환하므로 2가 반환되고 결국 2가 x에 할당되게 된다.