단축 평가

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

논리 연산자

논리곱(&&)

좌항에서 우항으로 평가가 진행되며 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 두 번째 피연산자가 논리 연산의 결과를 결정한다.

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

논리합(||)

좌항에서 우항으로 평가가 진행되며 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 첫 번째 피연산자가 논리 연산의 결과를 결정한다.

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

단축평가 규칙

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

단축 평가 사용 예시

• 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

  만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입에러가 발생하는데, 이 때 단축 평가를 사용하면 에러를 방지할 수 있다.

// 단축 평가 미사용
let item = null;
let value = item.value; // TypeError: Cannot read property 'value' of null

// 단축 평가 사용
let item = null;
let value = item && item.value; // null

• 함수 매개변수에 기본값을 설정할 때

  함수를 호출 할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당되는데, 이 때 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인한 에러를 방지할 수 있다.

// 단축 평가 미사용
function getStringLength(str = '') {
  return str.length;
}

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

// 단축 평가 사용
function getStringLength(str) {
  str = str || '';
  return str.length;
}

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

---

옵셔널 체이닝 연산자(?.)

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

let item = null;

let value = item?.value;
console.log(value); // undefined

논리 연산자 &&와 옵셔널 체이닝 연산자 ?.의 차이
논리 연산자 &&는 falsy 값인 0이나 ''을 객체로 평가할 때가 있지만, 옵셔널 체이닝 연산자 ?.는 피연산자가 falsy 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

// 논리 연산자 &&
let str = '';

let length = str && str.length;
console.log(length); // ''

// 옵셔널 체이닝 연산자 ?.
let str = '';

let length = str?.length;
console.log(length); // 0

---

null 병합 연산자(??)

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

let test = null ?? 'default';
console.log(test); // 'default'

논리연산자 ||와 null 병합 연산자 ??의 차이
논리연산자 ||는 피연산자가 falsy 값이면 우항의 피연산자를 반환하기 때문에 0이나 ''이 기본값으로 유효하다면 예기치 않은 동작이 발생할 수 있는 반면, null 병합 연산자 ??는 피연산자가 falsy 값이라도 null Ehsms undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

// 논리 연산자 ||
let test = '' || 'default';
console.log(test); // 'default'

// null 병합 연산자  ??
let test = '' ?? 'default';
console.log(test); // 'default'