JavaScript null을 활용한 조건문 최적화 전략

JavaScript null을 활용한 조건문 최적화 전략

JavaScript에서 null은 단순한 "없음" 이상의 의미를 지닙니다. 조건문에서의 null 사용은 코드를 간결하게 만들 수도, 예상치 못한 버그를 유발할 수도 있습니다. 본 글에서는 null의 동작 원리를 바탕으로 조건문을 효과적으로 최적화하는 다양한 전략을 탐구합니다. 특히 실무에서 자주 마주치는 패턴들과 함께 null 기반 로직의 모범 사례를 제시합니다.

 

 

목차

1. null과 undefined의 명확한 구분
2. null의 Truthy/Falsy 평가와 조건문 적용
3. null 확인을 위한 다양한 방법
4. 기본값 제공 패턴: OR 연산자와 Nullish 병합
5. Optional Chaining과 null-safe 접근
6. 실전 예제로 보는 조건문 최적화 전략
7. 주의사항 및 anti-pattern 피하기

 

1. null과 undefined의 명확한 구분

null과 undefined는 둘 다 "값 없음"을 나타내지만 의미는 다릅니다:

구분	null	undefined
의도적 설정	O (개발자 지정)	X (시스템 기본)
typeof 결과	"object"	"undefined"

 

 

 

2. null의 Truthy/Falsy 평가와 조건문 적용

JavaScript 조건문에서는 null은 Falsy 값으로 간주됩니다. 아래는 Falsy 값 목록입니다:

• false
• 0, -0
• "" (빈 문자열)
• null
• undefined
• NaN

따라서 조건문에서 다음과 같이 활용 가능합니다:

const value = null;

if (!value) {
  console.log("값이 null 또는 Falsy입니다.");
}
  

 

 

 

3. null 확인을 위한 다양한 방법

• value === null → 정확히 null인지 비교
• value == null → null 또는 undefined 여부 체크
• typeof value + === "object" → null만 object로 인식되는 점 활용 가능

Tip: ==를 쓸 때는 암묵적 형 변환에 주의하세요.

 

 

 

4. 기본값 제공 패턴: OR 연산자와 Nullish 병합

1) OR 연산자 (||)

const userInput = null;
const name = userInput || "기본값";  // 출력: "기본값"
  

2) Nullish 병합 연산자 (??)

undefined나 null일 때만 대체값을 반환합니다.

const userInput = 0;
const count = userInput ?? 10;  // 출력: 0
  

 

 

 

 

5. Optional Chaining과 null-safe 접근

깊은 객체 접근 시 null이나 undefined가 중간에 있으면 에러가 발생할 수 있습니다. 이를 피하기 위한 최적화 연산자가 Optional Chaining(?.)입니다.

const user = null;
console.log(user?.profile?.email);  // 출력: undefined (에러 아님)
  

 

 

 

6. 실전 예제로 보는 조건문 최적화 전략

예제 1: API 응답에서 값이 없을 때 기본값 설정

const config = response?.settings ?? { darkMode: false };
  

예제 2: 옵셔널 함수 호출

callbacks?.onSuccess?.();
  

예제 3: null에 따른 분기 처리

if (value == null) {
  // null 또는 undefined일 때 처리
}
  

 

 

 

7. 주의사항 및 anti-pattern 피하기

• null을 혼동해서 ""나 0과 함께 평가하는 실수 주의
• 항상 === 비교로 명확한 의도를 전달
• null에 typeof를 쓰면 "object"가 반환되므로 헷갈릴 수 있음
• || 대신 ??를 상황에 맞게 사용하는 것이 최신 패턴