Undefined과 null

 

🟨 undefined와 null

자바스크립트에서 "값이 없음"을 나타내는 두 가지 대표적인 데이터 타입.

둘의 차이는 “자바스크립트 엔진이 자동으로 비워두었느냐” vs “개발자가 의도적으로 비웠느냐”이다.

 

🟣 undefined (자동으로 비어있는 상태)

변수를 선언만 하고 값이 아직 할당되지 않은 상태”를 의미하며, 자바스크립트 엔진이 자동으로 부여한다.

let name;
console.log(name); 
// undefined

• 값이 아직 할당되지 않은 상태.
• 개발자가 직접 넣기보다 엔진이 자동으로 생성.
• “없음”이라기보다 아직 모름에 가까운 상태.

 

🔹 언제 undefined가 나타날까?

// 1. 선언만 된 변수
let age;
console.log(age); // undefined

// 2. 존재하지 않는 객체 속성 접근
const user = { id: 1 };
console.log(user.name); // undefined

// 3. 반환값이 없는 함수
function sayHi() {
    console.log("안녕!");
}
let result = sayHi();
console.log(result); // undefined

// 4. 인자 누락
function sum(a, b) {
    console.log(a, b);
}
sum(10); // 10, undefined

• 변수 선언 후 값을 넣지 않았을 때: 공간만 만들고 채우지 않은 상태.
• 존재하지 않는 객체 속성에 접근할 때: 없는 서랍을 열려고 하는 상태.
• 함수에서 return 문이 없거나 반환 값이 없을 때: 실행은 되었으나 결과물을 돌려주지 않은 상태.
• 함수 호출 시 파라미터(인자)에 값을 전달하지 않았을 때: 재료를 빼놓고 기계를 돌린 상태.

 

🔹 undefined 처리 팁

undefined는 Falsy 값이기 때문에 조건문에서 데이터 존재 여부를 확인할 때 매우 유용하다.

let data;

// data가 undefined라면 이 조건문은 실행되지 않습니다.
if (data) {
    console.log("데이터가 있습니다.");
} else {
    console.log("데이터가 준비되지 않았습니다."); // 실행됨
}

 

 

 

📍  POINT 📍 

✔️ undefined는 자바스크립트가 자동으로 부여하는 "값이 없는 상태"의 기본값이다. ✔️

✔️ 변수를 선언만 하거나, 객체에 없는 값을 찾을 때 주로 마주친다. ✔️

✔️ 의도적으로 비어있다는 것을 나타내고 싶을 때는 undefined 대신 null을 사용하는 것이 좋은 관례이다. ✔️

 

---

 

⚙️ 실전 예제 코드 ⚙️

// 1. 선언만 된 변수
let name;
console.log(name); // undefined

// 2. 존재하지 않는 속성
const user = { id: 1 };
console.log(user.age); // undefined

// 3. 반환값이 없는 함수
function sayHi() {
    console.log("안녕!");
}
let result = sayHi();
console.log(result); // undefined

// 4. 파라미터 누락
function sum(a, b) {
    console.log(a, b);
}
sum(10); // 10, undefined

 

---

 

🟣 null (의도적으로 비운 상태)

자바스크립트의 원시 자료형 중 하나로, 어떠한 객체도 나타내지 않는 빈 값을 의미합니다.

let userProfile = null; 
console.log(userProfile);
// 출력: null

• 개발자가 직접 할당하는 빈 값.
• 의도적으로 비워둠을 표현.
• 나중에 값이 들어올 자리라는 의미로 사용.

 

🔹 반복문 및 DOM에서의 null (의도적인 비움)

나중에 데이터를 받아와 채워 넣기 전 초기화 상태로 두거나, 특정 요소를 찾지 못했을 때 시스템이 명시적으로 비어있음을 알릴 때 사용한다.

// 1. 변수에 값이 없음을 명시적으로 표현
let userProfile = null; // 초기에는 빈 상태
userProfile = { name: "Gemini", age: 2 }; // 나중에 데이터 할당

// 2. 객체 참조 해제 (메모리 관리)
// 더 이상 이 데이터가 필요 없을 때 null을 대입하여 연결을 끊음
userProfile = null; 

// 3. 존재하지 않는 요소를 찾을 때
// DOM에서 없는 아이디를 찾으면 자바스크립트는 null을 반환합니다.
const element = document.getElementById('non-existent-id');
console.log(element); // null

 

 

🔹 주의해야 할 특징: typeof null

console.log(typeof null); // "object"

 

자바스크립트에는 아주 오래된 유명한 설계상 오류(버그)가 하나 있다.

논리적으로는 "null"이 나와야 할 것 같지만, 자바스크립트 초기 설계 당시의 실수로 인해 "object"라고 출력된다.

이미 너무 많은 웹사이트의 코드들이 이 방식에 의존하여 구동되고 있기 때문에 수정되지 못하고 역사적인 특징으로 남아있다.

즉, "null은 객체가 아니지만 typeof 결과는 object이다"라는 점을 꼭 기억해야 한다.

 

🔹 null과 undefined 비교 연습

// 둘 다 '값이 없음'을 뜻하지만, 비교할 때 결과가 다릅니다.

console.log(null == undefined);  // true (느슨한 비교: 둘 다 비어있다는 맥락은 같음)
console.log(null === undefined); // false (엄격한 비교: 자료형 자체가 다름)

// 조건문에서의 활용 (둘 다 Falsy 값)
if (!null) {
    console.log("null은 거짓으로 취급됩니다."); // 실행됨
}

• ==: 둘 다 값 없음으로 간주.
• ===: 타입이 다르기 때문에 false.

 

 

📍  POINT 📍 

✔️ null은 개발자가 "값이 없음"을 나타내기 위해 직접 넣는 값이다. ✔️

✔️ typeof null이 "object"인 것은 자바스크립트의 유명한 설계상 특징(오류)이다. ✔️

✔️ 초기화되지 않은 상태는 undefined, 명시적으로 비운 상태는 null을 사용하여 구분하는 것이 좋다. ✔️

 

---

 

📋 undefined vs null 비교 📋

구분	undefined	null
의미	아직 값이 할당되지 않음	의도적으로 값이 없음
생성 주체	JS 엔진	개발자
typeof	"undefined"	"object" (유명한 설계상 오류)
성격	자동 상태	명시적 상태