[JavaScript] 단축 평가(short-circuit evaluation) / 옵셔널 체이닝 연산자 / nullish 병합 연산자 '??'

 

---

목차

 

1. 단축평가

2. 옵셔널 체이닝 연산자

3.nullish 병합 연산자 '??'

---

 

1. 단축평가

---

단축 평가란 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다. 단축 평가의 논리곱과 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.

 

 

1. 논리곱(&&)  연산자

• 논리곱(&&) 연산자는 두개의 피연산자가 모두 true 로 평가될 때 true 를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. ( false가 우선 나와버리면 AND 뒤에 나오는 연산은 생략 )

2. 논리합(||) 연산자

• 논리합(||) 연산자는 두개의 피연산자 중 하나만 true 로 평가되어도 true 를 반환한다. 논리합 연산자 또한 좌항에서 우항으로 평가가 진행된다. ( true가 우선 나와버리면 OR 뒤에 나오는 연산은 생략 )

 

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

 

 

 

단축 평가를 사용하면 if문을 대체할 수 있다.

let done = true;
let message = '';

if (done) message = '완료';
// if문을 단축 평가로 대체
message = done && '완료';
console.log(message); // 완료

//-------------------------------------------------------------------------

let done = false;
let message = '';

if (!done) message = '미완료';
// if문을 단축 평가로 대체
message = done || '미완료';
console.log(message); // 미완료

 

 

 

2. 옵셔널 체이닝 연산자

---

Optional Chaning 연산자는 ES11(ECMAScript2020)에 도입되었다.

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

 

• ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

let user = null;

alert( user?.address ); // undefined

 

 

• ?.앞의 변수는 꼭 선언되어 있어야 한다.

// ReferenceError: user is not defined
user?.address;

 

 

 

3. nullish 병합 연산자 '??'

---

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

 

- ?? null 병합 연산자는 왼쪽 피연산자가 null 또는 undefined 일 경우, 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환한다.

 

a ?? b의 평가 결과는 다음과 같다.

• a가 null, undefined이 아니면 a 반환
• 그 외의 경우는 b 반환

null 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다.

// x 는 a가 null이나 undefined가 아니면 a이고 그 외는 b이다. 
x = (a !== null && a !== undefined) ? a : b;

 

코드 길이가 길어지기때문에 null 병합 연산자를 사용하면 위 코드를 간단하게 작성할 수 있다. 

x = a ?? b

 

 

 

'??'와 '||'의 차이

---

nullish 병합 연산자는 OR 연산자 ||와 상당히 유사해 보인다.

하지만 두 연산자 차이에는 중요한 차이점이 있다.

• ||는 첫 번째 truthy 값을 반환합니다.
• ??는 첫 번째 정의된(defined) 값을 반환합니다.

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

 

다음의 예시를 보자.

height = height ?? 100;

 

height에 값이 정의되지 않은경우 height엔 100이 할당된다.

이제 ??와 ||을 비교해보자.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

 

height || 100은 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다. 따라서 height || 100의 평가 결과는 100이다.

( false로 변환할 수 있는 표현식은 평가 결과가 null, 0, NaN, 빈 문자열(""), undefined인 경우이다. )

 

반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 된다. 예시에선 height에 0이라는 값을 할당했기 때문에 alert창엔 0이 출력된다.

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.

 

 

 

 

 

참고: 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90

https://ko.javascript.info/optional-chaining

https://hwani.dev/js-short-circuit-evaluation/