자바스크립트에서 null과 undefined의 차이점 완벽 분석

자바스크립트(JavaScript)에서 null과 undefined는 많은 개발자가 헷갈려하는 개념 중 하나입니다. 둘 다 '값이 없음'을 나타내지만, 그 의미와 사용 방식이 다릅니다. 이번 글에서는 null과 undefined의 차이를 상세히 분석하고, 실무에서 이를 어떻게 다뤄야 하는지 정리해보겠습니다.

1. null과 undefined의 기본 개념

1.1 undefined란?

undefined는 자바스크립트에서 '값이 할당되지 않은 변수'를 의미합니다. 즉, 변수를 선언했지만 값을 할당하지 않았을 때 기본적으로 설정되는 값입니다.

예제 코드

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

위 코드에서 a 변수는 선언되었지만, 아무런 값도 할당되지 않았기 때문에 undefined가 출력됩니다.

1.2 null이란?

null은 프로그래머가 '의도적으로 값이 없음을 표현'하기 위해 사용하는 값입니다. 즉, 변수에 null을 할당하면 해당 변수는 '아무 값도 가지고 있지 않다'는 것을 의미합니다.

예제 코드

let b = null;
console.log(b); // null

위 코드에서 b 변수는 null 값을 가지며, 이는 개발자가 특정 변수가 비어 있음을 명확히 나타내기 위해 의도적으로 할당한 것입니다.

2. null과 undefined의 차이점

2.1 기본적인 차이

구분	null	undefined
타입	object	undefined
의미	값이 없음 (개발자가 명시적으로 지정)	값이 할당되지 않음 (자바스크립트가 자동으로 설정)
사용 예시	변수가 비어 있음을 의도적으로 나타낼 때	변수가 선언되었지만 값이 없을 때

2.2 typeof 연산자 결과

자바스크립트에서 typeof 연산자를 사용하면 null과 undefined의 타입이 다르게 출력됩니다.

예제 코드

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

null은 object 타입으로 출력되는데, 이는 자바스크립트의 초기 설계 오류로 인해 발생한 현상입니다. 반면, undefined는 자신의 이름 그대로 undefined 타입을 반환합니다.

2.3 값 비교

null과 undefined는 == 연산자로 비교하면 동등하다고 평가되지만, === 연산자로 비교하면 다르게 평가됩니다.

예제 코드

console.log(null == undefined);  // true
console.log(null === undefined); // false

== 연산자는 두 값의 타입 변환을 수행한 후 비교하기 때문에 true를 반환하지만, === 연산자는 타입까지 엄격히 비교하므로 false가 됩니다.

3. null과 undefined가 발생하는 경우

3.1 undefined가 발생하는 경우

1. 변수를 선언했지만 값을 할당하지 않았을 때

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

2. 객체의 존재하지 않는 속성에 접근할 때

   let obj = {};
   console.log(obj.name); // undefined

3. 함수에서 값을 반환하지 않았을 때

   function test() {}
   console.log(test()); // undefined

4. 함수의 매개변수를 전달하지 않았을 때

   function greet(name) {
       console.log(name);
   }
   greet(); // undefined

3.2 null이 발생하는 경우

1. 개발자가 의도적으로 변수에 값이 없음을 지정할 때

   let data = null;
   console.log(data); // null

2. DOM 요소를 찾을 수 없을 때

   let element = document.getElementById("nonExistingId");
   console.log(element); // null

4. null과 undefined의 실무 활용법

4.1 null을 사용할 때

• 변수가 '명확하게 값이 없음을' 나타내야 할 때
• 초기화가 필요하지만 아직 데이터가 존재하지 않을 때
• API에서 데이터를 가져오는 중 값이 없음을 나타낼 때

4.2 undefined를 사용할 때

• 변수를 선언했지만 아직 초기화되지 않은 상태를 유지할 때
• 함수의 매개변수를 받지 않았을 때 기본적으로 설정할 때
• 객체 속성이 존재하지 않을 때

5. null과 undefined를 다룰 때 주의할 점

5.1 값이 없는 상태를 명확히 구분하기

• '값이 없음을' 의미하는 경우에는 null을 사용
• '변수 자체가 초기화되지 않은 상태'는 undefined를 유지

5.2 null과 undefined를 방지하는 코드 작성

기본값 설정하기

function getValue(value) {
    return value ?? "Default Value";
}
console.log(getValue(undefined)); // "Default Value"
console.log(getValue(null)); // "Default Value"

위 코드는 null과 undefined 모두에 대해 기본값을 제공할 수 있도록 null 병합 연산자(??)를 활용하는 예제입니다.

6. 결론

자바스크립트에서 null과 undefined는 비슷해 보이지만 중요한 차이점을 가지고 있습니다. undefined는 변수가 초기화되지 않았거나 존재하지 않는 속성에 접근했을 때 자동으로 할당되는 값이며, null은 개발자가 의도적으로 '값이 없음'을 나타낼 때 사용하는 값입니다.

이러한 차이를 이해하고 상황에 맞게 올바르게 사용하면 버그를 줄이고 코드의 가독성을 높일 수 있습니다. 실무에서는 null과 undefined를 명확하게 구분하고, ?? 연산자나 default parameter 등을 활용하여 예상치 못한 오류를 방지하는 것이 중요합니다.