JavaScript의 조건부 연산자 및 사용 예시

조건부 실행을 위한 논리 연산자, JavaScript 문법인 Optional Chaining과 Nullish Coalescing

논리 연산자를 활용한 조건부 실행 (Conditional Rendering)

JavaScript에서는 논리 연산자(||, &&)를 사용하여 조건부로 코드를 실행할 수 있다.
OR 연산자 (||)
OR 연산자는 왼쪽 피연산자가 거짓(falsy)일 때 오른쪽 피연산자를 반환한다.

// data가 거짓이면 뒤에가 실행됨
const result = data || data.fetchProfile;

const userName = userInput || "Guest"; // userInput이 없으면 "Guest"가 됨

AND 연산자 (&&)
AND 연산자는 왼쪽 피연산자가 참(truthy)일 때만 오른쪽 피연산자를 평가하고 반환한다.

// data가 참이면
const result = data && data.fetchProfile;

// user가 있을 때만 userName을 표시
{user && <div>{user.name}</div>}

JavaScript에서 거짓(Falsy)으로 평가되는 값들

1. false: 불리언 false
2. 0: 숫자 0
3. '' 또는 "": 빈 문자열
4. null: 값이 의도적으로 비어있음을 나타냄
5. undefined: 값이 할당되지 않았음을 나타냄
6. NaN: 잘못된 수학 연산의 결과 (Not a Number)

이 중에서 특히 null과 undefined의 차이점은 다음과 같다:

undefined: 비어있음
null: 인위적으로 비워놓음

Optional Chaining (?.)

Optional Chaining 연산자(?.)는 객체 체인에서 중간에 null이나 undefined가 있는 경우를 안전하게 처리할 수 있게 해준다.

// data && data를 간편하게 data?로 한번에 처리 가능
const streetName = user?.address?.street?.name;
만약 체인 중 어느 부분이든 null이나 undefined라면, 전체 표현식은 오류를 발생시키지 않고 undefined를 반환한다.

Nullish Coalescing (??)

Nullish Coalescing 연산자(??)는 왼쪽 피연산자가 null 또는 undefined인 경우에만 오른쪽 피연산자를 반환한다.
함정카드 : ??는 오직 null과 undefined만 검사한다는 것이다. 빈 문자열(''), 숫자 0, false 등은 유효한 값으로 취급된다.

요약

OR 연산자(||): 왼쪽 값이 falsy일 때 오른쪽 값 반환
AND 연산자(&&): 왼쪽 값이 truthy일 때만 오른쪽 값 평가 및 반환
Optional Chaining(?.): 객체 체인에서 null/undefined 안전하게 처리
Nullish Coalescing(??): null/undefined일 때만 대체값 사용