타입스크립트 null undefined 체크 방법

by

TypeScript에서는 값이 존재하지 않음을 나타내는 null과 undefined가 자주 사용됩니다. 그러나 이러한 값들을 적절히 처리하지 않으면 런타임 오류로 이어질 수 있으므로, 사전에 철저한 방어 로직과 문법적 장치를 통해 안정성을 확보하는 것이 중요합니다. 본 문서에서는 이러한 값을 안전하게 다루는 다양한 방법을 전문가 수준에서 체계적으로 정리합니다.

옵셔널 체이닝 (?.)

개요

옵셔널 체이닝은 객체의 프로퍼티에 접근할 때 해당 객체가 null 또는 undefined일 경우에도 런타임 오류 없이 undefined를 반환하도록 하는 문법입니다.

예시

const user = null;
const name = user?.name; // undefined 반환

주의사항

  • 옵셔널 체이닝은 읽기 접근에만 사용 가능하며, 쓰기에는 사용할 수 없습니다.
  • 과도하게 사용하면 코드의 가독성이 저하될 수 있으므로, 상황에 맞는 절제된 사용이 필요합니다.

널 병합 연산자 (??)

개요

널 병합 연산자 ??는 좌측 값이 null 또는 undefined인 경우에만 우측의 기본값을 반환합니다.

예시

const name = null;
const result = name ?? "이름 없음"; // "이름 없음"

주의사항

  • , false, ''와 같은 falsy 값은 그대로 유지되므로 ||와는 다르게 동작합니다.

명시적 비교를 통한 값 확인

개요

if 문 등을 사용해 null 또는 undefined 여부를 직접 비교하여 처리하는 방법입니다.

예시

function sayHi(name?: string) {
  if (name != null) {
    console.log("안녕하세요, " + name);
  } else {
    console.log("이름이 제공되지 않았습니다.");
  }
}

주의사항

  • != null은 null과 undefined 모두를 포함해 비교합니다.
  • 명확한 비교를 위해 === 혹은 !== 사용이 권장됩니다.

타입 내로잉 (Type Narrowing)

개요

조건문을 통해 변수의 타입을 더 구체적인 형태로 좁혀서 TypeScript의 타입 추론 기능을 활용하는 방법입니다.

예시

function showAge(age: number | null) {
  if (age !== null) {
    console.log("나이: " + age);
  }
}

주의사항

  • 조건이 복잡하거나 흐름 제어가 분산될 경우 타입이 올바르게 좁혀지지 않을 수 있습니다. 필요시 사용자 정의 타입 가드를 사용하는 것이 좋습니다.

Non-null 단언 연산자 (!)

개요

해당 값이 절대로 null 또는 undefined가 아님을 개발자가 보장할 수 있을 때 사용하는 연산자입니다.

예시

const title = document.getElementById("main");
console.log(title!.innerHTML);

주의사항

  • 개발자가 직접 책임지는 연산자이므로, 실제로 값이 없을 경우 런타임 오류가 발생할 수 있습니다.
  • 안전을 위해 조건문과 병행 사용하는 것이 바람직합니다.

strictNullChecks 설정

개요

TypeScript의 tsconfig.json에서 strictNullChecks를 활성화하면 null과 undefined를 명시적으로 처리하지 않으면 컴파일 오류를 발생시켜 코드의 안정성을 높입니다.

설정 예시

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

주의사항

  • 기존 코드베이스에 적용할 경우, 많은 수정이 필요할 수 있으므로 점진적인 적용이 권장됩니다.

요약 정리

기능 설명 예시 코드
?. 객체 접근 시 값이 없을 경우 undefined 반환 user?.name
?? null 또는 undefined일 때 기본값 반환 name ?? "없음"
!= null null, undefined 여부를 동시에 확인 if (val != null)
! null이 아님을 확신할 때 단언 title!.innerHTML
타입 내로잉 조건문 등을 활용해 타입을 좁혀 안전하게 처리 if (age !== null)
strictNullChecks 컴파일러 수준에서 null 처리 강제 tsconfig 설정 적용

TypeScript는 정적 타입 언어로서 null과 undefined 처리를 통해 런타임 오류를 예방할 수 있는 다양한 기능을 제공합니다. 위에서 소개한 기능들을 적절히 활용하면 보다 견고하고 신뢰할 수 있는 코드를 작성할 수 있으며, 장기적으로 유지보수가 쉬운 구조를 구축하는 데에도 큰 도움이 됩니다.

Leave a Comment