단축평가

논리연산자를 사용한 단축평가

논리곱 &&

좌변 && 우변
두개의 피연산자가 모두 true일 때 true를 반환한다.
모두 true가 아닐 경우 false를 반환한다.

console.log(3 === 3 && 2 === 2); // true
console.log('cat' && 2 !== 2); // false

두개 피연산자 모두 true일 때, 논리연산의 결과를 결정하는 두번째 피연산자, 즉 우변을 반환한다.

console.log('Cat' && 'Dog'); // Dog

논리합 ||

좌변 || 우변
두개의 피연산자 중 하나만 true여도 true를 반환한다.

console.log(3 === 3 || 2 === 1); // true

논리합 연산자는 논리연산의 결과를 결정하는 첫번째 피연산자인 좌변이 true 일 때 좌변을 그대로 반환한다.
좌변이 true가 아니고 우변이 true일 경우 우변을 반환한다.

console.log('Cat' || 'Dog'); // Cat

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

true || 'Cat'; // true
false || anything; // anything

true && anything; // anything
true && 'Dog'; // Dog
true && false; // false
false && anything; // false

옵셔널 체이닝 연산자 .?

좌항의 피연산자가 null 혹은 undefined인 경우, undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

좌항인 변수가 null 혹은 undefined인지 확인하고 프로퍼티를 참조할 때 유용하다.

const test = { name: 'latte' };
const elem = null;

console.log(test.hi.age); // error
console.log(test.hi?.age); // undefined

console.log(elem.hi); // error
console.log(elem?.hi); // undefined

es11 이전에는..

옵셔널 체이닝 연산자가 도입되기 전에는 &&논리곱연산자를 이용해서 파악했다.

const elem = null;
// 좌항인 elem이 falsy라면 좌항으로 평가되고,
//  truthy라면 우항으로 평가된다.
const value = elem && elem.value;
console.log(value); // null

&&은 fasly인지 아닌지를 판단 기준으로 잡고, .?은 null, undefined인지를 판단기준으로 잡는 차이점이 있다.

const str = ''; // falsy값인 ''

const len = str && str.length;
const length = str?.length;

console.log(len); // 공백으로 뜬다

// 좌항이 null 또는 undefined가 아니기에
// 우항의 참조값을 이어간다
console.log(length); // 0

null 병합 연산자 ??

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

const foo = null ?? 'default value';
console.log(foo);

es11 이전에는..

||는 좌항의 피연산자가 falsy값이면 우항의 피연산자를 반환한다.

||는 fasly인지 아닌지를 판단 기준으로 잡고, ??은 null 이나 undefined을 판단기준으로 잡는 차이점이 있다.

const foo = '' ?? 'default value';
console.log(foo); // ''

const doo = '' || 'default value';
console.log(doo); // default value