[JS] undefined vs null 차이점 완벽 정리

undefined와 null은 둘 다 값이 없음을 나타내는 JavaScript의 원시 타입(Primitive Type) 이지만, 의미와 사용 방식에 차이가 있다.

 

 

 

---

1. undefined란?

✅ “변수가 선언되었지만 값이 할당되지 않은 상태”

 

📌 특징

1. 변수를 선언했지만 값을 할당하지 않으면 기본적으로 undefined가 된다.

2. 함수가 값을 반환하지 않으면 기본적으로 undefined가 반환된다.

3. 객체의 속성을 참조할 때 해당 속성이 존재하지 않으면 undefined가 반환된다.

4. 배열의 인덱스에 값이 없으면 undefined가 된다.

 

📌 예제

let a; 
console.log(a); // undefined (변수 선언만 하고 값 할당 안 함)

function test() {}
console.log(test()); // undefined (반환값 없음)

let obj = {};
console.log(obj.name); // undefined (name 속성이 없음)

let arr = [1, 2, 3];
console.log(arr[5]); // undefined (배열 범위를 벗어남)

 

 

 

---

2. null이란?

✅ ”null은 개발자가 명시적으로 ‘값이 없음’을 나타내기 위해 사용하는 값”

 

📌 특징

1. 변수가 비어있다는 것을 의도적으로 명확히 나타낼 때 사용한다.

2. typeof null의 결과는 “object” 이지만, 이것은 JavaScript의 오래된 버그이다. (null은 객체가 아님!)

 

typeof보다 toString.call()을 사용하는 이유

[JS] toString.call() 완전 정리

 

3. 데이터베이스나 API에서 null은 보통 “데이터 없음”을 의미한다.

 

📌 예제

let b = null; 
console.log(b); // null (값이 없음)

let user = {
    name: "Alex",
    age: null // "나이 정보를 아직 모름"을 나타냄
};
console.log(user.age); // null

 

 

 

---

3. undefined vs null 차이점

구분	undefined	null
기본 의미	값이 할당되지 않음	값이 없음을 의미
기본 할당	JavaScript 엔진이 자동으로 설정	개발자가 직접 설정
typeof 결과	"undefined"	"object" (오래된 버그)
객체 속성에서	존재하지 않는 속성 접근 시 undefined 반환	명시적으로 설정된 경우에만 null
함수 반환값	반환값이 없는 함수는 undefined 반환	return null을 하면 null 반환
배열 요소	없는 요소 접근 시 undefined 반환	null을 직접 넣을 수도 있음

 

 

 

---

4. undefined와 null의 비교 (== vs ===)

console.log(undefined == null);  // true  (타입을 강제 변환하여 비교)
console.log(undefined === null); // false (타입까지 비교)

 

• == 는 타입을 변환한 후 비교 → undefined와 null을 동일한 것으로 간주

• === 는 타입까지 비교 → undefined와 null은 서로 다른 타입이므로 false

 

 

 

---

5. undefined와 null 언제 사용해야 할까?

✅ undefined는 “값이 설정되지 않음”을 의미할 때 자동으로 부여되므로 직접 설정할 필요가 없다.

✅ null은 “값이 없음을 명확하게 표현”할 때 직접 할당하여 사용한다.

 

📌 올바른 사용 예시

let userName;  // 아직 값이 없음 (undefined)
let userAge = null; // 나이를 모르므로 명확하게 null 할당

function getUser() {
    return null; // 사용자가 없음을 명확히 나타냄
}

let user = getUser();
console.log(user); // null

 

 

 

---

🚀 결론

• undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 의미한다.

• null은 개발자가 명시적으로 “값이 없음”을 나타내기 위해 설정하는 값이다.

• undefined == null → true, 하지만 undefined === null → false (타입 다름)

• undefined는 JavaScript가 자동으로 설정하는 값이고, null은 개발자가 직접 설정해야 한다.