자바스크립트와 타입스크립트를 다루다 보면 ‘값이 없음’을 표현하는 undefined와 null을 자주 만나게 돼요. 이 두 가지는 비슷해 보이지만 그 의미와 사용법이 다르기 때문에 제대로 이해하고 사용하는 것이 중요합니다. 특히 예상치 못한 오류를 방지하고 더 견고한 코드를 작성하기 위해서는 undefined 체크와 null 처리를 상황에 맞게 할 수 있어야 해요. 이 글에서는 undefined가 어떤 상태를 의미하는지부터 시작해, 자바스크립트에서 안전하게 체크하는 여러 방법, 그리고 타입스크립트에서 null과 undefined를 명확히 구분하고 효과적으로 다루는 방식을 단계별로 살펴보려고 합니다.
다음은 undefined와 null의 핵심 차이점과 각 언어에서의 주요 처리 방식을 한눈에 비교한 표에요.
| 구분 | undefined | null |
|---|---|---|
| 의미 | 값이 아직 정의되지 않음(시스템이 부여) | 의도적으로 값이 없음을 명시(개발자가 부여) |
| 자바스크립트 체크 | typeof 비교, 옵셔널 체이닝(?.), 널 병합(??) | 일치 연산자(===)로 직접 비교 |
| 타입스크립트 타입 | undefined 타입 (ex: string | undefined) | null 타입 (ex: string | null) |
| 함께 체크 | value == null 또는 value ?? ‘기본값’ | |
목차
자바스크립트에서 undefined 이해하기와 체크 방법
undefined가 나타나는 대표적인 상황
자바스크립트에서 undefined는 ‘정의되지 않은 상태’라는 의미를 가지고 있어요. 이 값은 우리가 직접 할당하기도 하지만, 자바스크립트 엔진이 특정 상황에서 자동으로 만들어내기도 합니다. 가장 흔한 경우는 변수를 선언만 하고 값을 할당하지 않았을 때예요. 예를 들어 let name; 이렇게 선언만 한 변수 name의 값은 undefined가 됩니다. 또한 존재하지 않는 객체의 프로퍼티에 접근하려고 할 때, 함수를 호출할 때 인자를 넘기지 않아서 함수 내부의 매개변수가 받는 값, 그리고 명시적인 return 문이 없는 함수의 실행 결과도 모두 undefined에요. 이런 다양한 경로로 undefined가 등장할 수 있기 때문에, 코드의 흐름 중간중간에 안전하게 체크하는 습관이 필요해요.
typeof 연산자를 이용한 가장 안전한 체크
undefined인지 확인할 때 가장 널리 권장되는 방법은 typeof 연산자를 사용하는 것이에요. if (typeof value === ‘undefined’) {} 이런 형식으로 사용할 수 있습니다. 이 방법의 큰 장점은 변수가 아예 선언되지 않은 경우에도 ReferenceError를 발생시키지 않고 안전하게 체크할 수 있다는 점이에요. 따라서 외부 스크립트나 라이브러리에서 가져온 값, 혹은 사용자 입력값처럼 그 존재 여부가 확실하지 않은 값을 검사할 때 첫 번째로 고려해볼 만한 방법입니다. 기본적으로 가장 오류 가능성이 낮은 패턴이라고 할 수 있어요.
옵셔널 체이닝과 널 병합 연산자의 활용
실제 개발을 하다 보면 객체의 깊은 속성에 접근해야 하는 경우가 많아요. 예를 들어 API 응답으로 받은 user 객체 안에 profile 객체가 있고, 그 안에 name이 있는 구조라고 생각해보세요. user.profile.name에 직접 접근하면 profile이나 name이 undefined일 경우 에러가 발생합니다. 이런 상황을 해결해주는 문법이 바로 옵셔널 체이닝(?.)이에요. const username = user?.profile?.name; 이렇게 작성하면 중간에 어떤 단계가 undefined이더라도 전체 결과가 undefined로 안전하게 평가되며 프로그램이 중단되지 않습니다. 이 값에 안전하게 기본값을 주고 싶다면 널 병합 연산자(??)와 함께 사용하면 돼요. const displayName = user?.profile?.name ?? ‘익명’; 이렇게 작성하면 name이 undefined나 null일 경우에만 ‘익명’이라는 문자열이 할당됩니다. OR 연산자(||)와 달리 0이나 빈 문자열 같은 falsy 값은 유효한 값으로 취급하기 때문에 더 의도한 대로 동작하는 경우가 많아요.
타입스크립트에서 null과 undefined 구분하여 다루기
타입스크립트는 자바스크립트에 타입 계층을 더한 언어로, 값의 부재를 더 엄격하고 명시적으로 관리할 수 있게 도와줍니다. 여기서 중요한 것은 undefined와 null이 서로 다른 타입으로 구분된다는 점이에요. undefined는 아직 값이 지정되지 않은 상태의 타입이고, null은 의도적으로 비어있음을 나타내는 값의 타입입니다. 이 차이를 이해하고 타입 시스템을 활용하면 런타임 오류를 크게 줄일 수 있어요.
유니온 타입을 통한 명시적 선언
타입스크립트에서는 변수나 함수의 반환값이 어떤 형태일 수 있는지를 미리 타입으로 선언합니다. 값이 있을 수도 있고 없을 수도 있는 경우, 유니온 타입을 사용해 이 가능성을 표현해요. 예를 들어, let title: string | null; 이라고 선언하면 title은 문자열이거나 null일 수 있다는 의미가 됩니다. 만약 undefined도 허용해야 한다면 string | null | undefined라고 쓸 수 있죠. 이렇게 선언해두면 타입스크립트 컴파일러가 해당 변수를 사용하는 모든 곳에서 타입 가능성을 체크해줘요. strict 모드에서 특히 강력하게 작동하여, 값이 null이나 undefined일 수 있는데도 불구하고 마치 확실히 있다고 생각하고 속성에 접근하려는 코드를 미리 잡아낼 수 있습니다.
타입 가드와 엄격한 null 검사
타입스크립트의 멋진 기능 중 하나는 조건문을 통해 변수의 타입 범위를 좁힐 수 있다는 점이에요. 이를 타입 가드 또는 타입 좁히기라고 합니다. if (value != null) 이라는 조건문은 value가 null도 아니고 undefined도 아닐 때 참이 됩니다. 타입스크립트 컴파일러는 이 조건문 안에서 value의 타입에서 null과 undefined를 제거해요. 따라서 조건문 블록 안에서는 value를 안전하게 문자열이나 객체처럼 사용할 수 있습니다. 이 기능을 효과적으로 사용하려면 tsconfig.json에서 strictNullChecks 옵션을 true로 설정하는 것이 좋아요. 이 옵션을 켜면 모든 타입이 자동으로 null이나 undefined를 포함하지 않게 되어, 명시적으로 허용하지 않는 한 null 값이 들어오는 것을 방지해줍니다. 처음에는 조금 번거로울 수 있지만, 장기적으로 보면 코드의 신뢰성을 매우 높여주는 설정이에요.
실무에서 자주 마주치는 패턴과 해결책
실제 프로젝트에서는 외부 API 호출, 사용자 설정 처리, 상태 관리 등에서 null과 undefined를 처리할 일이 정말 많아요. 예를 들어 API 응답을 처리하는 함수를 작성한다면 다음과 같은 구조를 생각해볼 수 있습니다. 함수 내부에서는 옵셔널 체이닝으로 안전하게 데이터 경로를 탐색하고, 각 단계에서 typeof나 null 비교를 통해 필수 값의 존재를 확인한 후, 값이 없다면 조기 반환이나 기본값 할당 같은 방식으로 처리하는 흐름이 자연스럽습니다. 프로젝트 팀 내에서 null과 undefined 중 어느 것을 ‘의도적인 부재’로 사용할지 컨벤션을 정해두는 것도 좋은 방법이에요. 대부분의 경우, undefined는 시스템이 할당한 ‘아직 모름’ 상태, null은 개발자가 명시적으로 할당한 ‘값 없음’ 상태로 규정하여 일관되게 사용하면 코드를 읽고 유지보수하기가 훨씬 쉬워집니다.
정리와 앞으로의 코드 작성 방식
지금까지 자바스크립트에서 undefined를 안전하게 체크하는 여러 방법과, 타입스크립트에서 null과 undefined를 타입 시스템 안에서 명확히 구분하고 처리하는 방식을 알아보았습니다. 자바스크립트에서는 typeof 연산자를 통한 기본적인 보호 장치로 시작해, 옵셔널 체이닝과 널 병합 연산자로 현대적이고 간결하게 안전성을 확보할 수 있습니다. 타입스크립트에서는 유니온 타입 선언과 strictNullChecks 옵션, 타입 가드를 활용해 컴파일 단계에서 많은 오류를 사전에 차단할 수 있어요. 이러한 도구와 개념들을 상황에 맞게 조합하여 사용한다면, ‘값이 없음’으로 인해 발생하는 예기치 못한 프로그램 중단을 크게 줄이고, 더욱 견고하고 예측 가능한 코드를 작성하는 데 도움이 될 거예요. 앞으로 코드를 작성할 때는 단순히 에러가 나지 않게 하는 것을 넘어, 값의 부재라는 상태 자체를 코드의 명확한 의도로 표현하는 습관을 들여보는 것이 좋겠습니다.