프로그래밍을 배우다 보면 undefined 뜻을 정확히 이해해야 하는 순간이 찾아옵니다. JavaScript를 처음 접하는 분들이라면 null, NaN, undeclared와 혼동하기 쉬운데요. 이 글에서는 undefined가 무엇인지, 다른 개념들과 어떻게 다른지를 표와 예제로 명확하게 정리해 드리겠습니다. 특히 자바스크립트에서 undefined는 변수는 존재하지만 값이 할당되지 않은 상태를 의미합니다. 반면 null은 개발자가 의도적으로 비어 있음을 표현한 값입니다. 이 차이만 알아도 코드를 읽는 속도가 확연히 달라집니다.
목차
undefined와 null의 핵심 차이
undefined와 null은 모두 ‘값이 없다’는 느낌을 주지만, 그 의미와 생성되는 방식이 완전히 다릅니다. 아래 표를 보면 한눈에 이해됩니다.
| 구분 | undefined | null |
|---|---|---|
| 의미 | 값이 아직 정해지지 않음 | 의도적으로 비어 있음을 지정 |
| 어디서 생기나 | 변수 선언 후 할당 안 함, 객체 속성 없음, 함수 반환 없음 | 개발자가 직접 코드에 null을 대입하거나 반환 |
| 타입 | undefined | object (JavaScript 역사적 오류) |
| 비교 예시 | let a; console.log(a); // undefined | let b = null; console.log(b); // null |
이 표를 보면 undefined는 ‘아직’ 값이 없는 상태, null은 ‘일부러’ 비워둔 상태로 기억하면 됩니다. 실제로 코드를 작성하다 보면 이 차이가 매우 중요해집니다.
undefined가 발생하는 대표적인 상황
- 변수를 선언만 하고 값을 넣지 않은 경우
- 객체에 존재하지 않는 속성에 접근한 경우
- 함수가 값을 반환하지 않은 경우
- 배열의 빈 공간에 접근한 경우
- 함수 인자가 전달되지 않은 경우
지난해 개인 프로젝트를 진행하면서 겪었던 경험을 하나 들려드리겠습니다. 당시 사용자 목록을 불러오는 API를 처리하던 중, 특정 사용자가 삭제된 경우 응답에 null을 반환하도록 설계했었는데요. 그런데 프론트엔드에서 해당 값을 undefined인지 검사하는 조건문을 잘못 작성해서 화면이 깨지는 버그가 발생했습니다. 원인을 추적해 보니 API에서 null을 반환한 것을 프론트엔드에서 if (!user)로 처리했는데, undefined도 거짓 같은 값이라 함께 걸러졌지만 정확히 어떤 상태인지 로그에 남지 않아 디버깅이 오래 걸렸습니다. 이 경험을 통해 undefined 뜻을 제대로 이해하지 못하면 예상치 못한 오류를 만날 수 있다는 것을 배웠습니다.
null과 NaN, undeclared까지 비교
undefined 외에도 개발자들이 자주 혼동하는 개념이 null, NaN, undeclared입니다. 각각을 쉽게 요약하면 다음과 같습니다.
- null : 값이 없다고 명시적으로 표시한 것
- NaN : 숫자 연산이 실패했을 때 나타나는 값 (예:
0/0) - undeclared : 변수가 아예 선언되지 않은 상태 (ReferenceError 발생)
여기서 재미있는 점은 null과 undefined는 == 연산자로 비교하면 true가 나오지만 (null == undefined // true), ===로 비교하면 false라는 점입니다. 이는 엄격한 비교에서는 타입까지 고려하기 때문입니다. 따라서 실제 코드에서는 항상 ===를 사용하는 습관이 중요합니다.
또한 undefined는 JavaScript가 자동으로 만들어내는 값이기 때문에, 실수로 의도하지 않게 발생하는 경우가 많습니다. 반면 null은 개발자가 직접 대입해야 하므로 좀 더 통제된 상황에서 사용할 수 있습니다. 예를 들어 사용자 선택 상태를 관리할 때 selectedUser = null로 초기화하면 ‘아무도 선택되지 않음’을 명확히 표현할 수 있습니다.
undefined 체크와 방어 코드 작성법
실무에서 undefined를 안전하게 다루려면 다음과 같은 방어 패턴을 익혀두는 것이 좋습니다.
- typeof 사용 :
typeof variable === 'undefined'는 변수가 선언되지 않은 경우에도 오류 없이 체크 가능 - 옵셔널 체이닝 :
user?.address?.city로 중첩 객체 안전 접근 - 널 병합 연산자 :
const name = user.name ?? '기본 이름'(undefined나 null일 때 기본값) - 기본 매개변수 : 함수 인자에 기본값 설정 (
function greet(name = 'Guest'))
이번 주에 진행하는 사내 스터디에서도 이 내용을 다룰 예정입니다. 특히 신규 입사자 분들이 자주 물어보는 질문이 바로 ‘undefined 뜻이 뭐예요?’ 이거더라고요. 그래서 위와 같은 방어 패턴을 함께 공유하면서 실전 예제를 풀어보려고 합니다.
아래 이미지는 undefined와 null의 차이를 시각적으로 표현한 그림입니다. 휴지 거치대 비유로 유명한데, 사람들이 개념을 직관적으로 이해하는 데 큰 도움이 됩니다.
FAQ 자주 묻는 질문
Q1. undefined와 null의 차이를 한 문장으로 설명해 주세요.
A1. undefined는 ‘변수는 있는데 아직 값이 없음’을 나타내고, null은 ‘일부러 비워둔 상태’를 나타냅니다. 둘 다 값이 없다는 점은 같지만 생성 주체가 다릅니다.
Q2. 변수가 undefined인지 확인하는 가장 좋은 방법은 무엇인가요?
A2. typeof variable === 'undefined'를 사용하거나, 변수가 선언되었다면 variable === undefined로 확인할 수 있습니다. 옵셔널 체이닝과 널 병합 연산자를 함께 사용하면 더 안전하게 코드를 작성할 수 있습니다.
Q3. NaN도 undefined처럼 값이 없는 건가요?
A3. 아닙니다. NaN은 ‘Not-a-Number’의 약자로, 숫자 연산이 실패했을 때 반환되는 특별한 숫자 타입 값입니다. typeof NaN은 'number'를 반환하며, 연산에 사용되면 계속 NaN이 유지됩니다. 값이 없는 것이 아니라 ‘숫자가 아님’을 나타낸다고 이해하시면 됩니다.
이상으로 undefined 뜻과 관련된 모든 내용을 정리해 보았습니다. 이 글이 여러분의 코드를 더 깔끔하고 안전하게 만드는 데 도움이 되길 바랍니다.
