프로그래밍을 하다 보면 자주 마주치는 undefined라는 값. 변수에 값이 없다는 느낌은 알겠지만, 정확히 undefined 뜻이 무엇인지, null이나 NaN과 어떻게 다른지 헷갈리는 분들이 많습니다. 이 글에서는 undefined 뜻을 명확히 정의하고, 실제 코드에서 어떻게 구분해야 하는지 쉽게 설명합니다.
| 구분 | undefined | null |
|---|---|---|
| 기본 의미 | 아직 값이 정해지지 않음 | 비어 있음을 직접 지정 |
| 발생 상황 | 선언만 한 변수, 없는 객체 속성, return 없는 함수 | 개발자가 의도적으로 대입 또는 반환 |
| 타입 | undefined | object (JavaScript 역사적 이유) |
| 비교 연산 | undefined === undefined // true | null === null // true |
목차
undefined 뜻과 null의 핵심 차이
JavaScript에서 undefined는 변수가 존재하지만 아직 값을 할당받지 않은 상태를 말합니다. 예를 들어 let a;라고만 선언하면 a는 자동으로 undefined가 됩니다. 반면 null은 변수에 ‘비어 있음’을 직접 명시적으로 넣은 값입니다. 같은 ‘값이 없음’을 표현하지만, undefined는 자바스크립트 엔진이 만들어내고 null은 개발자가 만든다는 점에서 근본적인 차이가 있습니다.
다음 코드를 보면 더 명확해집니다. let b = null;은 b에 null이라는 값을 직접 저장한 것입니다. 따라서 b는 ‘null이라는 값’을 가지고 있는 상태이고, 그 값은 ‘비어 있음’을 나타냅니다. 반면 let c;는 c에 아무것도 저장하지 않았기 때문에 자바스크립트가 undefined를 넣습니다. 이 두 값은 엄격한 일치 연산자(===)로 비교하면 서로 다릅니다.
여기서 중요한 점은, undefined가 발생하는 상황을 미리 예측할 수 있다는 것입니다. 변수 선언 후 할당을 빠뜨리거나, 객체에 없는 속성을 읽거나, 함수가 값을 반환하지 않을 때 undefined가 나옵니다. 이러한 패턴을 알면 디버깅이 훨씬 수월해집니다.
undefined가 만들어지는 대표적인 세 가지 상황
- 선언만 한 변수:
let x; console.log(x); // undefined - 객체에 없는 속성 읽기:
const obj = { name: 'awe' }; console.log(obj.email); // undefined - 반환문이 없는 함수:
function noReturn() {} console.log(noReturn()); // undefined
이 세 가지 경우는 코드에서 자주 마주치는 undefined의 출처입니다. 처음 JavaScript를 배울 때 “어? 왜 undefined가 나오지?” 하고 당황할 수 있지만, 위 패턴을 기억하면 원인을 바로 찾을 수 있습니다.
null은 언제 사용하는 것이 좋을까?
null은 주로 ‘의도적으로 값이 없음’을 표현할 때 사용합니다. 예를 들어 사용자 목록에서 아무도 선택되지 않은 상태를 나타낼 때 selectedUser = null처럼 초기화합니다. 또 API에서 데이터를 찾지 못했을 때 빈 객체 대신 null을 반환하여 “결과가 없습니다”라고 명시적으로 알릴 수 있습니다. 이렇게 하면 함수를 호출한 쪽에서 null 체크를 통해 예외 처리를 명확하게 할 수 있습니다.
undefined와 혼동하기 쉬운 다른 값들
0, 빈 문자열 “”, NaN도 ‘값이 없는 것처럼’ 보일 수 있지만, 이들은 각각 숫자, 문자열, 숫자가 아님을 나타내는 정상적인 값입니다. undefined와 달리 이들은 실제로 데이터 타입에 속하며 연산이 가능합니다. 특히 NaN은 Not-a-Number라는 뜻으로, 잘못된 수학 연산의 결과로 발생합니다. null과의 차이는 더욱 극명한데, null + 1은 0으로 변환되어 1이 되지만, NaN + 1은 계속 NaN입니다.
제가 처음 JavaScript를 공부할 때, 배열 메서드의 결과로 undefined가 반환되는 경우가 많아 당황한 적이 있습니다. 예를 들어 arr.find()에서 조건에 맞는 요소가 없으면 undefined가 반환됩니다. 그때 저는 이것을 null과 혼동해서 if 문에서 잘못 처리한 경험이 있습니다. 이후로는 항상 === undefined로 직접 비교하거나 typeof 연산자를 사용하는 습관을 들였습니다.
JavaScript에서의 undefined와 null을 더 깊이 이해하고 싶다면, 관련 강의를 참고하시는 것도 좋은 방법입니다. 실제 프로젝트에서 겪는 다양한 사례를 통해 개념을 확실히 잡을 수 있습니다.
실전에서 undefined와 null 다루기
실무에서는 특히 API 응답에서 undefined와 null을 구분해야 합니다. 예를 들어 사용자 정보를 가져오는 API가 email: null을 반환했다면, 이 사용자는 이메일이 없다는 뜻입니다. 반면 email: undefined는 응답 객체에 email 속성 자체가 없음을 의미할 수 있습니다. 이러한 차이를 무시하면 화면 표시나 데이터 저장에서 예기치 않은 오류가 발생합니다.
또한 조건문에서 if (value) { ... }는 undefined, null, 0, “”, NaN 모두 false로 처리합니다. 따라서 값의 유무만 확인할 때는 간편하지만, 어떤 이유로 값이 없는지 추적하려면 === null 또는 === undefined를 사용하는 것이 좋습니다. 저는 개인적으로 ‘빈 값’을 의도적으로 표현할 때는 null을 사용하고, 예상치 못한 누락을 발견할 때는 undefined를 경고 신호로 받아들이는 습관을 들였습니다.
이제 여러분도 undefined 뜻에 대해 명확히 이해하셨을 것입니다. undefined는 단순한 ‘에러’가 아니라 자바스크립트가 상황을 알려주는 신호입니다. 이 신호를 잘 해석하면 더 안정적인 코드를 작성할 수 있습니다.
자주 묻는 질문
Q1. undefined와 null을 개발자가 직접 할당해도 되나요?
네, 가능합니다. 변수에 undefined를 직접 할당할 수도 있지만, 권장하지 않습니다. undefined는 엔진이 자동으로 만드는 값이므로, 개발자가 의도적으로 빈 상태를 표현할 때는 null을 사용하는 것이 관례입니다. null은 ‘의도적으로 비움’이라는 의미가 분명하기 때문입니다.
Q2. 객체 속성이 undefined인지 null인지 어떻게 확인하나요?
=== undefined와 === null로 각각 확인하거나, Object.hasOwn(obj, key)를 사용해 속성 자체가 존재하는지 먼저 확인할 수 있습니다. 속성이 존재하면서 값이 undefined인 경우와 속성이 아예 없는 경우를 구분해야 할 때 유용합니다.
Q3. typeof undefined는 무엇을 반환하나요?
typeof undefined는 문자열 “undefined”를 반환합니다. 반면 typeof null은 “object”를 반환하는데, 이는 JavaScript 초기 버전의 버그로 인해 유지된 특성입니다. 따라서 null 타입을 확인할 때는 === null을 사용하는 것이 안전합니다.
이상으로 undefined 뜻과 관련 개념을 정리해 보았습니다. 실제 코딩에서 헷갈리지 않도록 자주 연습해 보시길 바랍니다.
