문제 상황

어떤 변수를 다른 함수에 인자로 전달하여 사용하고자 하는데,
이 변수는 다른 함수에서 조건에 따라 값이 할당된다.
그렇다면 이 변수는 let 변수;, let 변수 = undefined, let 변수 = null 중
어떤 방법을 사용해야할까?

undefined

let test;

console.log(test);  // undefined

위 코드는 변수를 선언만하고 할당은 하지 않은 상태이다.
그렇다면, 이 변수를 콘솔로 출력해보면 어떤 값이 나올까?

바로, undefined(아무 값도 할당받지 않은 상태)가 출력된다.

왜 undefined를 할당한 것도 아닌데, 출력이 된걸까?

JS 엔진의 변수 선언

JS 엔진은 변수 선언을 하기 위해 두 단계를 거친다.

1. 선언 단계 : 변수 이름을 등록하고, 자바스크립트 엔진에 변수 존재를 알리는 단계이다.
2. 초기화 단계 : 메모리 공간을 확보하고, 암묵적으로 공간에 undefined을 할당하여 초기화하는 단계이다.

즉, 암묵적으로 undefined라는 값으로 초기화가 된 것이다.
그래서 아무 값도 넣지않았음에도 undefined가 출력된 것이다.

메모리 공간은 재사용되기 때문에 초기화를 하지 않으면 이전의 값이 남아 있을 수 있다.
이를 쓰레기값 이라고 하는데, JS 엔진이 변수 선언시 기본적으로 undefined를 할당해주므로
값을 할당하지 않은 변수를 참조했을 때 쓰레기값이 나오는 위험을 방지할 수 있다.

이 단계라는 것을 좀 더 정확하게 보기 위하여 아래 예시를 살펴보자.

// 예시 1
let dev;
dev = "hello world";
console.log(dev);  // hello world

// 예시 2
let hi = "bye";
console.log(dev);  // bye

예시 1, 2는 동일하게 동작한다.

예시 2에서는 예시 1을 단축하여 표현해서 선언이 되면서 자동으로 할당되는 것 처럼 보이지만,
JS 엔진에서는 선언과 할당을 2개의 문으로 나누어 실행하기 때문에
두 케이스 모두 먼저 변수를 선언하고, 그리고 할당을 진행하는 과정을 거치게 된다.

즉 선언의 과정(변수 이름을 등록, 메모리 공간을 확보한 후 undefined를 할당하여 초기화하는 것)을 거치고 난 후에
할당의 과정(새로운 메모리 공간을 확보하여 할당값을 저장하고, 메모리 공간과 변수를 연결하는 과정)이 진행된다.

개발자가 초기화할 때 직접 사용해도 될까?

결국, undefined는 JS 엔진이 초기화를 위해 사용하는 값이라는 것이다.

즉, 개발자가 의도적으로 할당하기 위한 값이 아니라 JS 엔진이 변수를 초기화 할 때 사용하는 값이다.

JS 엔진이 변수 초기화에 사용하는 undefined를 개발자가 의도적으로 변수에 할당한다면 undefined의 본래의 취지와 어긋나고 또한 혼란을 야기하므로 권장하지 않는다.

null

null은 "값이 없다", "존재하지 않는 값"이라는 의미이다.

의미에서 알 수 있듯 null은 '값이 없음'을 의도적으로 명시할 때 사용하는 변수이다.
그리고 변수에 null을 할당하면, 이전에 참조하던 값을 더이상 참조하지 않겠다는 의미가 되겠다.

이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, JS 엔진은 누구도 참조하지 않은 메모리 공간에 대해 가비지 콜렉션을 수행할 것이다.

가비지 콜렉션이란 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것으로,
여기서는 이정도만 알고 넘어가도록 하겠다.

typeof null

여담이지만 null은 typeof로 타입을 알아보면

console.log(typeof null)  // object

object 타입을 가지고 있다.

결론

undefined는 JS 엔진이 변수에 아무것도 할당되지 않았을 경우 자동적으로 할당하는 값으로,
개발자가 직접 입력해 넣어버리면 본래의 취지와 맞지 않는다.

null은 값이 없음을 나타내는 의도적인 변수로,
개발자가 특정 변수에 값이 없다는 것을 명시할 때 사용한다.

참고 자료

본 게시글은 아래 세 분의 게시글에서 대부분을 가져와 작성되었습니다.
더 깔끔한 글을 보고싶으시면 세 분의 블로그를 방문해주시면 감사하겠습니다.
gobae님 블로그
JeungJoo Lee님 블로그
hanamon님 블로그