Circuiting

단축평가라고 불리는 이러한 문법은 해당값이 있을 경우 즉, Boolean으로 true 라고 잠재적 평가가 되어버리는 값일 경우 다음 코드로 진행될수 있는 코드를 말한다.

|| 문법

console.log(true || 0); // true
console.log('' || undefined); // undefined
console.log(undefined || false); // false
console.log(false || { name: 'doodream' }); // { name: 'doodream' }
console.log(false || null || '' || 5 || undefined || 'iphone'); // 5 

const num = 5;
const count = num || 10; // num이 있으면 count에 num을 넣고 없으면 10을 넣어라

이렇게 || 코드 앞단의Boolean 잠재적 형변환이 이루어지며 이 값이 true라면 해당값을 출력하고 false라면 || 뒷 값을 반환한다. 이유는 하나의 true값이라도 나오면 전체의 결과값이 true가 되어 그뒤 값을 판별할 이유가 없기때문에 true가 나온 그 순간의 값을 반환하는 것이다.

&& 문법

console.log(true && 0);
console.log('' && undefined);
console.log(undefined && false);
console.log(false && { name: 'doodream' });
console.log(true && 2 && 'and' && 5 && undefined && 'iphone');

const num = 5;
num && console.log("JavaScript!"); // num이 있으면 "JavaScript!" 출력

&& 문법은 ||문법과는 반대로 false인 값이 반환되면 그때 전체의 값은 false가 되므로 false가 나온 그 값을 반환하는 것이다.

?? 문법 : null 병합자 : nullish coalescing

null 병합자는 ES2020에 출시되었다.

console.log(true ?? 0); // true
console.log('' ?? undefined); // ''
console.log(undefined ?? false);// false
console.log(null ?? { name: 'doodream' }); // { name : 'doodream' }
console.log(undefined ?? null ?? '' ?? 5 ?? undefined ?? 'iphone');// ''

작동방식은 || 와 같으나 판별기준은 잠재적 Boolean 형변환이 false가 아니라 null , undefined와 같이 값이 할당이 안되었을 경우이다.
값이 할당이 되었나 안되었나 살펴보고 할당이 안되어있으면 ?? 뒷단을 실행한다.