JavaScript의 조건문에서 값이 자동으로 Boolean으로 변환된다.
여기서 특이한 점은, 참 '같은' 값과 거짓 '같은' 값이 있다는 것이다.

특히, 컴퓨터 언어에서 ~같은 이라는 표현은 와닿기 쉽지 않았다.
정리를 해보며 알아보자.

---

Falsy

거짓처럼 동작하는 값, '거짓 같은 값'이다.
단 8가지뿐이기에 알아두자.

// 1. false
if (false) {
    console.log('실행 안 됨');
}

// 2. 0
if (0) {
    console.log('실행 안 됨');
}

// 3. -0
if (-0) {
    console.log('실행 안 됨');
}

// 4. 0n (BigInt 0)
if (0n) {
    console.log('실행 안 됨');
}

// 5. '' (빈 문자열)
if ('') {
    console.log('실행 안 됨');
}

// 6. null
if (null) {
    console.log('실행 안 됨');
}

// 7. undefined
if (undefined) {
    console.log('실행 안 됨');
}

// 8. NaN (Not a Number)
if (NaN) {
    console.log('실행 안 됨');
}

정리:

// 이 8가지만 Falsy
false, 0, -0, 0n, '', null, undefined, NaN

// 나머지는 모두 Truthy!

---

Truthy

참 같은 값, 즉 8개의 Falsy를 제외한 모든 값이다.

주의점으로

if ([]) {
  console.log("빈 배열도 true");
}

if ({}) {
  console.log("빈 객체도 true");
}

if ("0") {
  console.log("문자열 0도 true");
}

• 빈 배열 → Truthy
• 빈 객체 → Truthy
• 문자열 "0" → Truthy

우선 이렇게 가볍게만 정리해보겠다.

---

그렇다면, 다음 주제인 null 병합 연산자(??)에 대해 알아보자.
사실 이 주제에 대한 빌드업으로 Truthy & Falsy에 대해 알아본 격이다.

null 병합 연산자 (??)

ES2020에 추가된 null과 undefined만 체크하는 연산자

정말 많이 사용하는 연산자로 꼭 알아두자

📍 || 연산자의 문제점

|| 연산자는 Falsy 값을 모두 검사한다.
이것은 유효한 값도 기본값으로 바뀌는 문제를 발생시킨다.

// 0도 기본값으로 대체됨
let count = 0;
let displayCount = count || 10;
console.log(displayCount); // 10

// 빈 문자열도 기본값으로 대체됨
let message = '';
let displayMessage = message || '내용 없음';
console.log(displayMessage); // 내용 없음

// false도 기본값으로 대체됨
let isVisible = false;
let display = isVisible || true;
console.log(display); // true

?? 연산자의 등장

?? 연산자는 null과 undefined만 검사한다.

a ?? b

1. a가 null 또는 undefined → b 반환
2. 그 외의 경우 → a 반환

// null, undefined만 기본값 사용
console.log(null ?? 10);      // 10
console.log(undefined ?? 10); // 10

// 0, '', false는 그대로 유지
console.log(0 ?? 10);         // 0
console.log('' ?? 'default'); // ''
console.log(false ?? true);   // false

---

|| vs ??

let count = 0;

// || 사용
console.log(count || 10); // 10

// ?? 사용
console.log(count ?? 10); // 0

// ========

let message = '';

// || 사용
console.log(message || '기본 메시지'); // 기본 메시지

// ?? 사용
console.log(message ?? '기본 메시지'); // ''

비교

값
null	기본값	기본값
undefined	기본값	기본값
0	기본값	0
''	기본값	''
false	기본값	false
NaN	기본값	NaN

---

사용자 입력 처리

function calculateTotal(price, quantity) {
  // 0개도 유효한 입력
  quantity = quantity ?? 1;
  return price * quantity;
}

console.log(calculateTotal(1000, 0)); // 0
console.log(calculateTotal(1000));    // 1000

---

연산자 우선순위 주의

??는 &&, ||와 함께 사용할 때 괄호가 필요하다.

let a = null;
let b = 0;
let c = 1;

// SyntaxError
// console.log(a ?? b && c);

// 괄호 사용
console.log((a ?? b) && c); // 0
console.log(a ?? (b && c)); // 0