[JavaScript] 옵셔널 체이닝 연산자(Optional Chaining Operator), null 병합 연산자(Nullish Coalescing Operator) (ES11(ECMAScript2020))

옵셔널 체이닝 연산자(Optional Chaining Operator), null 병합 연산자(Nullish Coalescing Operator) (ES11(ECMAScript2020))

들어가며

• ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자와 null 병합 연산자에 대해 정리해본다.
• 옵셔널 체이닝 연산자와 null 병합 연산자는 모두 단축 평가(Shortcut Evaluation)을 위해 사용되는 연산자이다.

 

옵셔널 체이닝 연산자(Optional Chaining Operator, @?.@)

• 좌항의 피연산자가 @null@ 또는 @undefined@인 경우 @undefined@를 반환하고, 그렇지 않을 경우 우항의 프로퍼티 참조를 이어간다.
  • 프로퍼티 참조 : 변수를 통해 변수값을 참조하듯이, 객체의 프로퍼티에 접근해 프로퍼티 값을 참조하는 것
• 옵셔널 체이닝 연산자 @?.@가 도입되기 이전에는 논리 연산자 @&&@를 사용한 단축 평가를 통해 변수가 @null@인지 @undefined@인지 확인했다.

var elem = null;

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

 

 

논리 연산자 &&는 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, '')이면 좌항 피연산자를 그대로 반환한다. 하지만, 0이나 ''은 객체로 평가될 때도 있다.

 

• 하지만 옵셔널 체이닝 연산자 @?.@는 좌항 피연산자가 @false@로 평가되는 Falsy 값(@false@, @undefined@, @null@, @0@, @-0@, @NaN@, @''@)이라도 @null@ 또는 @undefined@가 아니면 우항의 프로퍼티 참조를 이어간다.

var str = "";

// 좌항 피연산자가 false로 평가되는 Falsy 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length);    // 0

 

@null@ 병합 연산자(Nullish Coalescing Operator, @??@)

• 좌항의 피연산자가 @null@ 또는 @undefined@인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
• 변수에 기본값을 설정할 때 유용하다.
• Coalesce : (더 큰 덩어리로) 합치다.

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고,
// 그렇지 않으면 좌항의 피연산자를 반환
var foo = null ?? 'default string';

console.log(foo);    // "default string"

 

• null 병합 연산자 @??@가 도입되기 이전에는 논리 연산자 @||@를 사용한 단축 평가를 통해 변수에 기본값을 설정했다.

 

논리 연산자 ||는 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, '')이면 우항의 피연산자를 반환한다. 만약 Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.

 

// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작 발생 가능
var foo = '' || 'default string';

console.log(foo);    // "default string"

 

• 하지만, null 병합 연산자는 좌항의 피연산자가 @false@로 평가되는 Falsy 값(@false@, @undefined@, @null@, @0@, @-0@, @NaN@, @''@)이라도 @null@ 또는 @undefined@가 아니면 좌항의 피연산자를 그대로 반환한다.

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자 반환
var fooo = '' ?? 'default string';

console.log(foo);    // ""