JavaScript에서 undefined와 null은 언제 다르게 써야 할까
빠른 답
undefined는 값이 아직 할당되지 않았거나 찾을 수 없을 때 JavaScript 실행 과정에서 자주 관찰되는 값이다.null은 개발자가 “값이 없음”을 데이터로 명시하고 싶을 때 넣는 값이다.null==undefined는true지만null===undefined는false이므로, 조건문에서는 두 상태를 함께 볼지 분리할지 의도가 드러나야 한다.- 객체 참조를
null로 바꾸면 참조 하나를 끊을 수 있지만, 메모리가 즉시 해제된다는 뜻은 아니다.
목차
한눈에 비교
시간 흐름으로 이해하기
undefined와 null은 둘 다 비어 있는 값처럼 보이지만, 글을 읽을 때는 “언제 생겼는가”와 “누가 의도했는가”를 함께 보면 차이가 선명해진다. undefined는 실행 과정에서 값이 아직 도착하지 않았거나 찾을 수 없을 때 나타나는 경우가 많고, null은 개발자가 데이터의 상태를 표현하기 위해 선택하는 값에 가깝다.
왜 둘 다 비어 있음처럼 보일까
JavaScript에는 값이 없는 듯 보이는 상황이 여러 가지 있다. 변수를 선언만 하고 값을 넣지 않을 수도 있고, 객체에 없는 키를 읽을 수도 있으며, 서버에서 “해당 값이 없음”을 응답으로 받을 수도 있다. 이런 상황이 모두 화면에서는 빈 값처럼 보이기 때문에 undefined와 null이 자주 섞여 보인다.
let nickname;
const user = {
id: 1,
name: "Mina",
deletedAt: null,
};
console.log(nickname); // undefined
console.log(user.email); // undefined
console.log(user.deletedAt); // null
위 코드에서 nickname은 선언됐지만 아직 값이 들어가지 않았다. user.email은 객체에 해당 프로퍼티가 없어서 읽은 결과가 undefined다. 반면 user.deletedAt은 필드가 존재하고, 그 값이 의도적으로 null이다. 출력만 보면 세 값 모두 “비어 있음”처럼 느껴질 수 있지만, 데이터의 의미는 서로 다르다.
undefined가 나타나는 대표 상황
undefined는 “변수나 접근 경로는 있지만 값이 아직 없다”는 흐름에서 자주 보인다. 대표적인 예는 변수를 선언만 한 경우다.
let title;
console.log(title); // undefined
console.log(typeof title); // "undefined"
함수 인자를 전달하지 않았을 때도 해당 매개변수 값은 undefined가 된다. JavaScript 함수 호출은 인자 개수가 맞지 않아도 호출 자체를 막지 않기 때문이다.
function createMessage(name, greeting) {
return `${greeting}, ${name}`;
}
console.log(createMessage("Mina"));
// "undefined, Mina"
객체에 없는 프로퍼티를 읽을 때도 undefined가 반환된다. 이때 주의할 점은 “프로퍼티가 없음”과 “프로퍼티는 있는데 값이 undefined임”이 출력만으로는 구분되지 않는다는 점이다.
const a = {};
const b = { email: undefined };
console.log(a.email); // undefined
console.log(b.email); // undefined
console.log("email" in a); // false
console.log("email" in b); // true
값만 검사하면 둘은 같아 보이지만, 객체 구조를 함께 보면 다르다. 데이터 모델에서 필드 존재 여부가 중요하다면 in 연산자나 Object.hasOwn() 같은 방식을 함께 고려해야 한다.
한편 선언되지 않은 식별자를 읽는 것은 undefined가 아니라 오류다. 이 차이는 디버깅할 때 자주 헷갈린다.
console.log(notDeclared);
// ReferenceError: notDeclared is not defined
“값이 undefined다”와 “식별자를 찾을 수 없다”는 다른 문제다. 전자는 값의 상태이고, 후자는 코드가 참조하는 이름을 실행 환경에서 찾지 못한 오류다.
null을 쓰는 대표 상황
null은 값이 없다는 사실을 데이터에 남기고 싶을 때 쓰기 좋다. 예를 들어 UI에서 아직 선택된 사용자가 없는 상태를 표현할 때 null은 읽기 쉬운 신호가 된다.
let selectedUser = null;
function selectUser(user) {
selectedUser = user;
}
function clearSelection() {
selectedUser = null;
}
API 응답에서도 null은 필드의 의미를 유지하면서 값이 없음을 표현할 수 있다.
const article = {
id: 10,
title: "JavaScript 값 다루기",
publishedAt: null,
};
이 구조는 publishedAt이라는 필드가 있다는 점을 분명히 한다. 다만 아직 발행되지 않았기 때문에 값이 null이다. 필드가 아예 빠져 있다면 클라이언트는 “서버가 이 필드를 모르는지”, “응답에서 생략된 것인지”, “값이 없는 것인지”를 추가로 해석해야 한다.
메모리와 관련해서도 null은 자주 언급된다. 객체를 참조하던 변수에 null을 넣으면 그 변수는 더 이상 기존 객체를 가리키지 않는다. 하지만 다른 참조가 남아 있으면 객체는 여전히 접근 가능하다.
let cache = {
items: new Array(100_000).fill("data"),
};
const anotherReference = cache;
cache = null;
console.log(anotherReference.items.length); // 100000
따라서 null을 넣는 행위는 “참조 하나를 끊는다”에 가깝다. 가비지 컬렉터가 실제로 언제 메모리를 회수하는지는 엔진이 판단하며, 남아 있는 참조가 있다면 회수 대상이 되지 않는다.
비교와 타입 확인에서 생기는 차이
typeof 결과는 둘의 차이를 보여 주지만, null에서는 오래된 JavaScript 설계의 흔적이 남아 있다.
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
typeof null이 "object"라고 해서 null이 일반 객체인 것은 아니다. 객체 여부를 검사할 때는 null을 별도로 제외해야 한다.
function isObject(value) {
return typeof value === "object" && value !== null;
}
console.log(isObject({})); // true
console.log(isObject(null)); // false
비교 연산에서는 ==와 ===의 차이가 중요하다. 느슨한 동등 비교인 ==는 null과 undefined를 서로 같다고 본다. 반면 엄격한 동등 비교인 ===는 타입과 값이 모두 같아야 하므로 둘을 구분한다.
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log(null === null); // true
이 특성 때문에 value==null은 null 또는 undefined를 함께 검사하는 짧은 표현으로 쓰이기도 한다. 다만 코드베이스에서 이 의미가 공유되어 있지 않다면 명시적으로 풀어 쓰는 편이 더 읽기 쉽다.
function isNil(value) {
return value === null || value === undefined;
}
console.log(isNil(null)); // true
console.log(isNil(undefined)); // true
console.log(isNil(0)); // false
JSON과 API에서 달라지는 의미
객체를 JSON 문자열로 바꿀 때 undefined와 null은 다르게 처리된다. 객체 프로퍼티 값이 undefined이면 결과에서 생략될 수 있고, null은 값으로 남는다.
const payload = {
name: "Mina",
email: undefined,
phone: null,
};
console.log(JSON.stringify(payload));
// {"name":"Mina","phone":null}
이 차이는 API 요청에서 의미가 커진다. email:undefined는 JSON 결과에 포함되지 않으므로 “그 필드를 보내지 않음”에 가까워질 수 있다. phone:null은 “이 필드를 비어 있는 값으로 보냄”이라는 신호가 된다.
서버가 부분 업데이트를 처리하는 API라면 이 차이를 별도로 정의해야 한다. 예를 들어 필드를 생략하면 기존 값을 유지하고, null을 보내면 값을 비우는 방식으로 해석할 수 있다. 반대로 서버가 두 상태를 구분하지 않는다면 클라이언트에서도 굳이 복잡하게 나눌 필요가 줄어든다.
팀 규칙으로 맞춰 둘 부분
프로젝트가 커지면 undefined와 null의 사용 기준은 코드 리뷰에서 반복해서 등장한다. 규칙이 없으면 어떤 곳은 필드를 생략하고, 어떤 곳은 null을 보내고, 또 다른 곳은 undefined를 직접 대입하는 식으로 데이터 의미가 흔들릴 수 있다.
다음처럼 간단한 기준을 둘 수 있다.
- 함수 인자가 생략된 상태는 JavaScript 기본 흐름에 맞춰
undefined로 다룬다. - API 응답에서 “필드는 있지만 값이 없음”은
null로 표현한다. - 요청 payload에서 보내지 않을 값은 프로퍼티를 생략한다.
- UI 상태에서 “선택된 항목 없음”, “조회 결과 없음”처럼 명시적인 빈 상태는
null을 사용한다. value==null을 허용할지 여부는 팀 규칙으로 정하고, 허용한다면 “null과undefined를 함께 검사한다”는 의미로만 쓴다.
ESLint로 비교 규칙을 일부 강제할 수도 있다. 아래 설정은 대부분의 느슨한 비교를 막되, null 비교만 예외로 둘 때 사용할 수 있는 예시다.
{
"rules": {
"eqeqeq": ["error", "always", { "null": "ignore" }]
}
}
이 설정을 쓴다면 value==null은 허용될 수 있다. 다만 이 표현은 null과 undefined를 모두 빈 값으로 보겠다는 의미이므로, 빈 문자열이나 숫자 0까지 포함하는 검사는 아니다.
흔한 오해
null과 undefined는 둘 다 falsy 값이다. 하지만 falsy 전체를 값 없음으로 취급하면 버그가 생길 수 있다. JavaScript에서는 0, "", false, NaN도 조건문에서 falsy로 평가된다.
function printAge(age) {
if (!age) {
console.log("나이가 없습니다.");
return;
}
console.log(`${age}살입니다.`);
}
printAge(0); // "나이가 없습니다."
나이 0이 유효한 값인 상황이라면 위 조건문은 원하는 동작이 아니다. 값 없음만 검사하려면 조건을 더 좁혀야 한다.
function printAge(age) {
if (age === null || age === undefined) {
console.log("나이가 없습니다.");
return;
}
console.log(`${age}살입니다.`);
}
printAge(0); // "0살입니다."
또 다른 오해는 선택적 체이닝의 결과를 원래 상태와 혼동하는 것이다. 선택적 체이닝은 중간 값이 null 또는 undefined이면 접근을 멈추고 undefined를 반환한다.
const user = {
profile: null,
};
console.log(user.profile?.name); // undefined
이 결과가 undefined라고 해서 profile이 원래 undefined였다는 뜻은 아니다. 원래 값은 null이었고, 선택적 체이닝의 평가 결과가 undefined로 나온 것이다. 출력값과 원래 데이터 상태를 구분해서 읽어야 조건문과 오류 처리가 덜 흔들린다.
선택 기준
함수 호출에서 인자가 생략되는 흐름은 undefined와 잘 맞는다. 기본 매개변수도 인자가 undefined일 때 동작한다.
function createUser(name, role = "reader") {
return {
name,
role,
};
}
console.log(createUser("Mina"));
// { name: "Mina", role: "reader" }
반대로 데이터 모델에서 “값이 없다는 사실”을 저장하거나 전달해야 한다면 null이 의미를 더 잘 드러내는 경우가 많다. API 응답, 데이터베이스에서 온 값, UI 상태처럼 여러 코드가 같은 값을 해석하는 위치에서는 이 차이가 특히 중요하다.
정리하면 undefined는 값이 아직 할당되지 않았거나 접근 결과로 찾을 수 없을 때 자주 등장하는 실행상의 신호이고, null은 값이 없음을 데이터로 명시하려는 선택이다. 둘 중 무엇을 쓰느냐보다 더 중요한 부분은 코드 안에서 “아직 모름”, “없다고 확인됨”, “필드 자체가 없음”, “접근 오류”를 서로 섞지 않는 것이다.
원문 참고
https://www.maeil-mail.kr/question/63
댓글
댓글 쓰기