자바스크립트에는 값이 없음(nothing)을 나타내는 두 가지 타입이 있는데, 바로 null과 undefined의 두 가지 타입이다.

null과 undefined란?

MDN에 따르면 null과 undefined의 정의는 다음과 같다.

null

• null은 JavaScript의 원시 값 중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다.

undefined

• 전역 undefined 속성은 undefined 원시 값을 나타내며, JavaScript의 원시 자료형 중 하나입니다.

MDN의 정의만 보면 둘의 차이를 쉽게 알기 힘들다.

자바스크립트로 개발을 하다보면 두 타입을 자주 마주칠 수 있지만, null과 undefined는 같은 값을 가지기 때문에 차이를 신경쓰지 않고 넘어가기도 한다.

Copycopy code to clipboard
1const a = null;
2const b = undefined;
3
4console.log(a == b); // true

실제로 위처럼 타입 비교 없이 값만 비교하는 == 키워드로 둘을 비교해보면 true 결과를 반환한다.

하지만 null과 undefined는 서로 다른 타입을 가진다는 차이점이 있다.

연산자의 타입을 알 수 있는 typeof 키워드를 사용해보면 null의 경우 object로 나오지만 undefined의 경우 undefined로 나온다.

Copycopy code to clipboard
1console.log(typeof null); // object
2console.log(typeof undefined); // undefined

따라서 당연하게도 값과 함께 타입까지 비교하는 === 키워드로 둘을 비교하면 false를 반환하게 된다.

Copycopy code to clipboard
1const a = null;
2const b = undefined;
3
4console.log(a === b); // false

또한 null과 undefined는 선언 단계에서 차이가 있다.

Copycopy code to clipboard
1let a;
2console.log(a); // undefined
3
4let obj = {};
5console.log(obj.props); // undefined
6
7function f() {
8    // return 값이 없는 함수
9}
10console.log(f()); // undefined

undefined는 문자 그대로 정의되지 않은 상태이다. 따라서

• 선언만 하고 값을 할당하지 않은 변수
• 선언되지 않은 객체의 속성에 접근할 때
• return 값이 없는 함수

의 경우에 undefined가 반환된다.

Copycopy code to clipboard
1const a = null;
2console.log(a); // null

하지만 null은 의도적으로 값이 비었음을 나타내는 타입으로, 직접 null이라는 값을 할당해야 할당된다.

둘을 어떻게 나눠서 사용해야 할까?

null과 undefined를 어떻게 사용해야 하는지는 딱히 정해져있지 않다.

많은 개발자들이 null과 undefined를 빈값 (empty)과 값 아닌 값 (Nonvalue)을 나타내는데 사용하지만,

• null은 빈 값이다
• undefined는 실종된 값이다

혹은

• null은 예전에 값이 있었지만 지금은 없는 상태다
• undefined는 값을 아직 가지지 않은 상태다

등으로 나누어서 사용 할 수도 있다.

값이 없음을 확인하는 법 (Null Check)

값이 없음을 나타내는 타입이 null과 undefined 두 개 존재하기 때문에, Null Check시 두 타입에 대한 조건을 다 정의해서 검사해야 하나? 라는 의문이 들 수 있다.

if (value !== null && value !== undefined)

하지만 앞서 살펴봤던 == 키워드를 사용한다면 위처럼 두 가지 조건을 사용하지 않고도 null과 undefined를 검사 할 수 있다.

if (value != null) 혹은 if (value != undefined)

위의 방법보다 간단하게 ! 키워드를 통해 검사 할 수는 있으나, 이 경우에는 0이나 ""까지 포함되므로 주의한다.

if (!value)

참고

• MDN - null
• MDN - undefined
• 카일 심슨, 『YOU DON'T KNOW JS - 타입과 문법, 스코프와 클로저』, 한빛미디어