자바스크립트의 undefined, null에 대해 알아보자.

자바스크립트 데이터의 원시값에는 7가지가 있다.

 

String, Number, Boolean, undefined, null, Symbol, BigInt가 그러하다.

 

undefined, null이 각각 원시 자료형임을 이해하는 것이 우선이다.

 

이 포스팅에서는 undefined, null은 무엇이며 언제 undefined와 null을 볼 수 있는지

그래서 '개발자가 변수에 직접 이 값을 할당해도 되는지?'에 대한 내용에 대해 다뤄볼 예정이다.

---

undefined

undefined가 무엇이고, undefined가 어떤 상황에서 이용되는지 알아보자.

 

undefined는 '정의되지 않은' 이라는 의미이다.

 

자바스크립트에서 정의란, 변수에 값을 할당해서 변수를 명확히 하는 것을 의미한다.

 

변수에 값을 할당하기 위해선 먼저 변수가 선언되어 있어야 한다.

변수 선언이란, 변수를 생성하는 것을 말한다.
변수를 선언하면 값을 저장하기 위해 메모리 공간을 확보하고 개발자가 지정한 변수 이름과 확보된 메모리 주소를 연결해서 값을 저장할 수 있는 상태가 된다.

 

자바스크립트에서 변수 선언을 위한 키워드는 var, let, const이다.

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

자바스크립트 엔진에서는 변수 선언을 위해 2단계 과정을 거친다.

 

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

 

초기화는 변수 선언 이후 '최초로' 값을 할당하는 것을 의미하며, 자바스크립트 엔진이 할당할 값이 없을 때에도 암묵적으로 undefined를 할당하기 때문에 위의 코드 결과에서 hello 변수가 undefined 값을 담고있다는 결과를 보여준다.

 

메모리 공간은 재사용되기 때문에 초기 할당을 하지 않으면 이전의 값이 남아 있을 수 있다.

이를 쓰레기값 이라고 하는데, 자바스크립트 엔진이 변수 선언시 기본적으로 undefined를 할당해주므로
값을 할당하지 않은 변수를 참조했을 때 쓰레기값이 나오는 위험을 방지할 수 있다.

 

그럼 이제 선언한 변수에 값을 할당해볼 차례다.

    // case 1.
    let hello;
    hello = 'hello world;
    console.log(hello); // hello world

    // case 2.
    let hello2 = 'hello world2';
    console.log(hello2); // hello world2

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

 

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

 

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

 

돌아돌아 왔지만, 결국 undefined는 자바스크립트 엔진이 초기화를 위해 사용하는 값이라는 것이다.

 

만약 개발자가 변수를 참조했을 때, undefined를 반환한다면 해당 변수는 초기화되지 않은(=엄밀히 말하면 아직 값이 할당되지 않은) 변수라고 이해할 수 있다.

---

null

이제 null이 무엇이고, null은 어떤 상황에서 이용되는지를 알아보자.

 

null은 '값이 없는'의 의미이다.
undefined와 동일하게 null 타입의 값은 null이 유일하다.

 

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

 

즉 코딩을 하다가 null을 마주친다면 이것은 자바스크립트 엔진(컴퓨터)가 의도적으로 설정한 값이 아니라,
'개발자(사람)가 의도적으로 값이 없다고 설정했구나!' 하고 생각하면 되겠다.

    let name = 'Tom';
    ... //여러 복잡한 로직들

    name = null;

다음의 코드에서 얻을 수 있는 장점을 알아보자.

 

null은 '이전의 값을 더이상 참조하지 않겠다'는 의미로 사용한다고 했는데,
이전의 값 'Tom'은 더이상 사용되지 않을 예정이므로, 개발자가 name 변수에 null을 할당하였다.

 

'Tom'을 참조하는 변수가 name이 유일하다면, 이제 'Tom'이 할당된 메모리 공간에 대한 참조가 없으므로 가비지컬렉터의 대상이 된다.

즉 null 값을 잘 이용하면 메모리를 효율적으로 관리할 수 있다.

 

null 타입을 다룰 때는 타입 체크에 유의해야 한다.

    let value = null;
    console.log(typeof null); // object

typeof를 이용해 null이 담긴 변수의 타입을 보면 object가 반환된다.

(자바스크립트에서 인정한 공식적인 버그이며, 하위 호환성을 위해 수정될 수 없는 버그이므로 유의해야 한다.)
(typeof를 구현할 때, null 타입 체크를 구현하지 않아서 그렇다. = null 타입 체크가 누락되었다.)

 

그래서 다음과 같이 검증해야 한다.

    let value = null;
    console.log(value === null); // true
    
    
    let value2;
    console.log(value == value2) // true
    console.log(value === value2) // false

일치 연산자(===)는 값과 타입이 모두 동일할 때 true를 반환한다.

 

value변수의 값 null과 null의 값 null이 같고
value변수의 타입인 null 타입과 null의 타입 null 타입이 같아서 true가 반환되는 원리이다.

 

이제 우리는 value2를 선언만 하면, undefined 값이 할당됨을 예상할 수 있다.

두 값을 비교해보자.

 

동등 연산자(==)를 사용하면, undefined와 null이 같다는 결과를 반환한다.

일치 연산자(===)를 사용하면, undfeined와 null은 다르다고 알려준다.

---

그래서 언제 undefined를 쓰고 언제 null을 쓰면 되는가?

변수를 다루다보면, 변수를 할당하거나 재사용하는 등의 상황이 가끔씩 있는데
이 때 할당해야 할 값이 undefined인지 null인지 대해 몰랐던 경험이 있었고, 기회를 맞아 정리하게 되었다.

 

지금까지 다룬 undefined, null에 대한 내용을 이해했다면 정답은 이미 나와있다.

 

undefined는 자바스크립트 엔진이 사용하는 자료형이다.
그렇기 때문에, '언제 undefined를 써야 하나요?' 라는 질문에는 '쓰지 마세요.'가 적절할 수 있겠다.

 

그렇지만 변수에 값이 없다는 것을 명시하고 싶다면, null을 쓰는 것이 맞다.

 

null은 개발자가 '값이 없음'을 명시하기 위해 사용하는 자료형이기 때문이다.

---

참고한 출처

모던자바스크립트 딥다이브 도서
https://medium.com/crocusenergy/js-undefined-null-어떨-때-쓸까-8782dc3c35b6