단축 평가, 옵셔널 체이닝 연산자, null 병합 연산자의 쓰임

기초적인 부분이지만, 코드를 해석하다 보면 헷갈릴 때가 있다.

 

단축 평가

 

논리곱 연산자는 두 개의 피 연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.

'Cat' && 'Dog' // Dog

 

논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 논리합 연산자도 좌항에서 우항으로 평가가 진행된다.

'Cat' || 'Dog' // Cat

 

다른 기초 예제

'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'

'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false

 

실무에서는 어떻게 쓰일까?

var done = true;
var message = '';

if (done) message = '완료'; // 방법1
message = done && '완료' // 방법2
message = done ? '완료' : '미완료' // 방법3

console.log(message); // 완료

 

위의 코드처럼, 여러가지 방법으로 평가문을 표현할 수 있다. 다른 동료들도 쉽게 이해할 수 있는 방안으로 코드를 작성하는 것이 바람직하지만, 여러 표현 방법들을 알고 있어야 어떤 코드든 이해하고 협업할 수 있다.

 

옵셔널 체이닝 연산자

 

옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;
// elem이 null 또는 undefined이면 undefined 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value) // undefined

 

옵셔널 체이닝 연산자 ?.가 도입되기 이전에는 논리 연산자 &&를 사용한 단축 평가를 통해 null 또는 undefined를 확인했다.

var elem = null;
// elem이 Falsy 값이면 elem으로 평가되고, elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value;
console.log(value) // undefined

 

null 병합 연산자

 

null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다,

var foo = null ?? 'default string';
console.log(foo); // default string

 

null 병합 연산자는 ?? 변수에 기본값을 설정할 때 유용하다. null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. (논리 연산자의 경우, 좌항의 피연산자가 ‘’와 같은 falsy 값이면 우항의 피연산자를 반영한다.)

var foo = '' || 'default string';
console.log(foo); // default string

 

하지만 null 병합 연산자는 좌항의 피연산자가 falsy한 값이라고 null, undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

var foo = '' ?? 'default string';
console.log(foo); // ''