1. 논리연산자 이용

"논리합"(||)과 "논리곱"(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 따라서 첫번째 피연산자가 true로 평가될 때, 이 시점 까지는 표현식을 평가할 수 없다. (첫번째 피연산자가 false면 당연히 false이다.)
즉, 두번째 피연산자가 논리 연산의 결과를 결정하고 그 피연산자를 그대로 반환한다.

"dog" && "cat"  // -> "cat" 

논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 논리곱 연산자와 마찬가지로 논리 연산의 결과를 결정한 피연산자를 그대로 반환한다. 첫번째 피연산자가 false일 경우, 아직 평가할 수 없고 두번째 피연산자를 통해 결과를 결정하고, 두번째 피연산자를 반환한다.

"dog" || "cat"  // -> "dog" 
false || "cat"  // -> "cat"

이를 이용해 if문을 대체 할 수 있다.

const done = true;
let message = "";

message = done && "완료"
console.log(message) // 완료

const done = false;
let message = "";

message = done || "미완료"
console.log(message) // 미완료

위 두 식을 삼항조건연산자로 한번에 작성할 수 있다.

const done = true;
let message = "";

message = done ? "완료" : "미완료"
console.log(message) // 완료

2. 옵셔널 체이닝 연산자

피연산자가 null 또는 unefined인 경우 객체의 프로퍼티를 참조하면 타입에러가 발생한다. 이를 막기 위해 ES11이전에서는 단축평가를 사용했다.

let elem = null;
console.log(elem.value) // typeError
console.log(elem && elem.value) // null

그러나 falsy값으로 평가되는 경우 좌항 피연산자를 그대로 반환하는 문제가 있었다.

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

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

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

3. null 병합 연산자

null 병합 연산자(??)는 변수에 기본값을 지정할 때 유용하다.
ES11이전에 기본값을 지정할 때 단축평가를 이용했지만 falsy값이 값으로 유효한 경우 문제가 발생할 수 있었다.

let foo = "" || "default"  // ""이 유효한 값인 경우 문제가 발생
console.log(foo.length) // 7

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

let foo = "" ?? "default"  // ""이 유효한 값인 경우 문제가 발생하지 않음
console.log(foo.length) // 0