null 과 undefined 의 차이를 아세요?

개발자라면 알아야 할 NULL 과 UNDEFINED 의 차이 입니다.

저는 몰랐습니다.

멘토님이 이 질문을 하셨을 때 차마 대답하지 못하고 머리속에 맴돈 생각

null은 값이 없는 상태, undefined 는 정의 되지 않은 것

뭐가 다른 거지?

그래서 모르겠다 말했는데 좀 부끄러웠습니다.

이번 글 끝에는 어떻게 대답하면 좋을 지 적어볼게요.

null: 변수를 선언하고 빈 값을 할당한 상태 = 빈 객체
undefined: 변수를 선언하고 값을 할당하지 않은 상태 = 자료형이 없다

자바스크립트의 truthy / falsy 값

설명에 들어가기 앞서 자바스크립트의 falsy 값에 대해 알아보겠습니다.

자바스크립트는 boolean 타입이 아닌 값을 truthy (참으로 평가되는 값), falsy (거짓으로 평가되는 값) 으로 구분합니다.

조건문이나 반복문 같은 제어문은 boolean 값으로 평가하는데, 이때 truthy 값은 true 로, falsy 값은 false 로 암묵적 형변환이 일어납니다.

falsy 값 

boolean 값에서 false 로 평가되는 값 입니다. 6가지가 인데요, 알고있긴 한데 달달 외우면 좋겠습니다.

if (false)

if (null)

if (undefined)

if (0)

if (NaN)

if ('')

* if (Infinity) 는 true 를 반환합니다.

* Number 문맥에서 null 은 0을, undefined 는 NaN을 반환합니다.

두루마리로 관찰한 falsy 값

null 의 상태

null 은 어느 reference 변수에 대해 주소값이 없는 것을 표현하기 위한 키워드 값입니다.

객체의 속성 값이 존재하지 않을 때나 함수의 매개변수를 초기화하는 용도로 사용되기도 합니다.

reference 변수란 객체와 같이 힙(heap) 공유 메모리 영역에 저장되는 포인터 입니다.

null은 오로지 reference 변수에만 담을 수 있습니다.

일반적인 값인 정수나 문자를 저장하는 primitive 변수에는 null 을 저장할 수 없습니다.

primitive 변수란 let a=1; 과 같이 값을 할당한 변수 입니다.

자바스크립트에서는 1을 할당한 변수의 타입은 number 이지만, null 을 할당한 변수의 타입은 object 임을 알 수 있습니다.

*primitive 변수
let a = 1;
typeof a;
> 'number'

*reference 변수
let b = null;
typeof b;
> 'object'

null 의 type 이 object 라는 것이 무슨 의미일까요?

휴지 없는 휴지걸이 처럼 값은 없지만 값을 담을 수 있는 그릇이 있는 것 입니다.

어렵게 말하면, 메모리에 올려져 주소값을 받을 준비가 된 것 입니다.

undefined 의 상태

undefined는 변수를 선언하고 값을 할당하지 않았거나, 객체 속성에 해당하는 값을 설정하지 않은 상태 입니다.

함수에서 명시적으로 반환 값을 지정하지 않았을 때 등에 대한 기본적인 값이고, 자바스크립트에서 초기값 입니다.

자바스크립트에서는 심플하게 어떤 타입의 변수 값이 없다는 것을 undefined 로 퉁쳤습니다. (?)

 

이 경우 휴지도, 휴지걸이도 없는 빈 공간 입니다.

타입자체가 undefined 이기 때문입니다.

null vs undefined

*  값이 없는 것을 undefined 로 퉁쳤다면, null 은 undefined 에 포함되는 집합일 수 있을까?

놉.. null 과 undefined 는 다른 개념이며, null 이 undefined 에 포함되는 것 또한 아닙니다.

비슷한 개념이지만 엄밀하게 말하면 서로 다른 값입니다.

우선 타입이 다르고요,

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

let b;
console.log(typeof(b)); //undefined
console.log(a == b) //true
console.log(a === b) //false

// 일치 연산자인 === 는 값과 타입이 모두 동일할 때 true 를 반환

내부 메모리적인 측면에도 차이가 있습니다.

undefined 변수는 메모리에 존재하지만 값이 없기 때문에 크기가 매우 작습니다.

반면, null 은 개발자가 의도적으로 값이 없음을 할당한 경우에 사용되는 값으로, 이때의 변수는 빈 객체를 가리키는 객체 포인터이기 때문에 주소값을 나중에라도 받기위해 크기가 있어 메모리를 차지하게 됩니다.

따라서, undefined 값을 가진 변수의 메모리 용량은 작고, null 값을 가진 변수의 메모리 용량은 좀 더 큽니다. (이는 상대적인 비교로 실제로 큰 차이는 없지만요.)

 

이렇게 null 과 undefined 의 차이를 정리를 해보았는데요,

일전에 contains를 가르킬 영역을 정의하지 않아 저를 괴롭혔던❗Cannot read properties of undefined (reading 'contains') 에러가 생각이 났습니다.

 

다음번에 누군가 null 과 undefined 의 차이에 대해 제게 묻는다면

null과 undefined 모두 값이 없는 상태이지만 아예 다릅니다. null은 object type 으로서 존재하지만 undefined 는 type 이 정의되어 있지 않습니다.
개발자로서 '값이 없음' 을 명시하고자 한다면 null 을 쓰는게 적절합니다.

라고 대답하는게 인지상정 일까요?

맞는지 검증 부탁드립니다.

감사합니다.

 

참고

https://gobae.tistory.com/123

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

https://inpa.tistory.com/entry/%F0%9F%93%9A-null-undefined-NaN

📚 재미있게 확실히 이해하는 null / undefined / NaN 차이