undefined & null

1. 개요

자바스크립트에서 없음을 나타내기 위해 사용되는 데이터 타입은 undefined와 null이다. 이 두개의 차이를 구분하여 사용하는 것이 문득 중요하다고 생각되어 정리한다.

---

2. undefined

자바스크립트 엔진은 변수 선언을 다음과 같이 2단계에 거쳐 수행한다.

1. 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.

2. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

즉, undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다. 이후 개발자에 의해 변수에 특정 값이 할당이 된다. 아래의 예제를 살펴보자.

let foo;
foo; // undefined

let obj = {};
obj.prop; // undefined

foo 변수는 선언과 초기화 단계만 거쳤을 뿐 특정 값이 할당되지 않았고 obj 객체의 속성 중 prop또한 특정 값이 할당되지 않아 undefined로 초기화된다. 이처럼 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다. 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.

---

3. null

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. 즉, 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 것이다.

let name = 'hd';

name = null;

여기서 알 수 있는 것은 null 타입은 개발자가 집적 값이 없다는 것을 명시한다는 것이다.

---

4. 개발자들이 값이 없다라는 것을 표현하기 위해선...? undefined vs null

그렇다면 값이 없다라는 것을 표현하기 위해 개발자들은 어떤 데이터 타입을 사용해야 할까? undefined일까? null일까?

정답은 null이다.

자바스크립트 엔진이 변수를 초기화하는 데 사용하는 undefined를 개발자가 의도적으로 변수에 할당한다면 undefined의 본래 취지와 어긋날뿐더러 혼란을 줄 수 있다. 즉, 값이 없다라는 것을 명시적으로 부재를 나타내고 싶을 땐 null를 사용하는 것이 좋다.

다만, 객체를 사용할 때 어떤 속성의 부재를 null을 통해서 나타내는 쪽보다는, 그냥 그 속성을 정의하지 않는 방식이 간편하므로 더 널리 사용된다.

// good, 흔치 않다.
{
  name: 'HD';
  address: null;
}

// very Good
{
  name: 'HD';
}

// bad
{
  name: 'HD';
  address: undefined;
}

---

5. Conclusion

지금까지의 프로젝트를 돌아보면 난 undefined를 자주 선언하여 사용했었다. null도 사용했지만 그 둘의 차이를 모른채 둘 다 값이 없다라는 것만 인지하고 사용했었다. 부끄러운 기분이 든다. 내가 사용하는 코드의 이유를 모른다는 것은 아직 많이 부족하다는 것이다. 오늘의 공부로 인해 undefined와 null의 차이를 알게 되었으므로 앞으로 상황에 맞게 잘 구분하여 사용하도록 하자. 또한 잘못 사용하고 있는 분들에게도 친절하게 설명하자:)

---

참고

도서 - 모던 자바스크립트 Deep Dive null과 undefined

---

📅 2023-01-03