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

단축 평가를 사용한 함수 매개변수에 기본값을 설정할 때

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}

// 단축 평가를 사용한 매개변수의 기본값 설정 
function getStringLength(str) { 
  str = str || ''; return str.length; 
} 
getStringLength(); // 0 
getStringLength('hi'); // 2 

// ES6의 매개변수의 기본값 설정 
function getStringLength(str = '') { 
  return str.length; 
} 

getStringLength(); // 0 
getStringLength('hi'); // 2

 

 

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

let str = ''; // 문자열 길이(length)를 참조한다. 
let length = str && str.length; // 문자열 길이(length)를 참조하지 못한다. 
console.log(length); // '' 

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

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

console.log(length); // 0

 

 

null 병합 연산자: ES11(ECMAScript2020)에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다. 
let foo = '' || 'default string'; 
console.log(foo); // 'default string' 

// 하지만 null 병합 연산자 ??는 좌항의 피연산자가 false로 평가되는 Falsy(false, undefined, null, 0, -0, NaN, '')이라도 
// null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다. 
// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환환다. 
let foo = '' ?? 'default string'; 
console.log(foo); // ''

 

 

 

옵셔널체이닝 + null 병합 연산자

const data = obj?.prop ?? "fallback string";

const data = obj?.prop?.func() ?? fallbackFunc();