[JavaScript] null에 관한 개념 정리

❖ 본 글은 약간의 뇌피셜이 포함되어 있습니다 (믿는 것은 자유이나 스스로 더 공부해보길 바랍니다)

 

자바스크립트를 공부하다보면서 undefined는 굉장히 자주 마주친 것 같다. 그런데 반면에 null은 생각보다 자주 마주친 기억이 없다. 그리고 또 한번 생각해보면 null은 비어있다는 의미이고, undefined는 정의되지 않았다는 의미를 지니는데 둘의 차이가 궁금해진 순간이 많았다. 그래서 한번 null에 관련된 내용을 학습하고 정리해보고자 한다.

 

---

 

null vs undefined

 

'null vs undefined' 라는 키워드로 구글에 검색을 해보면 쉽게 위와 같은 내용의 이미지 짤을 마주칠 수 있다. 어느 정도 모호하게 감은 오는데 조금 애매하긴 하다. 우선 0과 null부터 보면 0에는 롤휴지 곽이라도 남아있지만 null은 롤 휴지가 뽑혀있다.

 

흠... 뭔가 대략 감은 오지만 여전히 애매하다. 그런데 가만히 생각해볼 때 컴퓨터가 인식하는 0은 무엇일까? 생각을 해보았다. 

 

let foo = 0

 

위 코드와 같이 foo라는 변수에 0이라는 값을 담는다면 해당 변수에 대한 저장공간 콜스택에는 정말 아무것도 없을까? 그래서 생각을 해보면 아마 이진법으로 구성된 0이 담겨 있지 않을까? 그렇다면 사실상 저 변수를 비어있는 변수라고 볼 수가 없을 것이다. 모든 숫자는 변수에 할당되면 컴퓨터 인식 상에는 값이니까

(일상 생활 속에서 우리는 아무것도 없는 것을 0이라고 하는데 이 부분은 컴퓨터가 사고하는 배경이 필요하다고 본다)

 

이 부분을 알고나면 null은 이해하기 쉽다. null은 숫자 혹은 문자열 등의 값이 저장공간에 하나도 없는 텅빈 상태를 의미한다. 즉 자리는 있는데 아무것도 없는 것이다.

 

여기서 undefined은 그럼 무엇인가 의문이 들기 시작한다. undefined는 변수를 선언은 하되 그에 대한 값을 할당하지 않으면 확인할 수 있다.

 

let foo;
console.log(foo) // => undefined

 

그렇다면 null과 undefined가 동일하지 않나 생각을 하게된다. 우선 공통적으로 변수가 선언되고 그 변수에 저장된 명확한 값(숫자, 문자열 등)이 없다.

 

그런데 한가지 차이점은 undefined는 위 코드와 같은 상황에서 자연적으로 변수를 확인할 때 undefined가 적용되지만 null은 그렇지 않다. null은 임의적으로 변수에 할당을 해주어야만 한다.

 

즉 null이 있다는 것은 의도성이 있는 비움이다. 실제로 일부 데이터 포맷들을 보면 값이 비어있다고 할 때 undefined가 아니라 null로 데이터가 표기되어 나온다.

 

 

이전에 회사에 다닐 때도 서버에서 받아온 고객 관련 데이터를 받아본 적이 있는데 저렇게 이미지처럼 비어있는 내용물에 대해서는 null로 보통 처리를 하였다. 

 

console.log(null + 1) // => 1

console.log(undefined + 1) // => NaN

 

또 한가지 흥미로운 점은 자바스크립트에서 null과 undefined에 각각 +1을 해볼 때, null은 1이라는 Number 타입을 반환하지만 undefined는 NaN을 반환한다. 이것을 보면서 또 한가지 차이점을 이해할 수 있을 듯 하다.

 

null은 공간은 비어있되 Number와의 연산 시에 0이라는 값을 가지도록 준비가 되어있고, undefined는 그렇지 않다.

 

 

---

typeof null

let foo = typeof null;

console.log(foo)

 

위 코드를 실행시키면 콘솔에서 무엇이 나올까? object가 나온다.

 

이 글을 쓰기 전 null과 관련된 내용을 알아보던 와중에 스택 오버 플로우에서 누군가가 질문을 하는 내용을 본 적이 있었다. 작성자가 말하길 'null은 object라고 typeof를 통하면 확인할 수 있는데 왜 이건 키 값 할당이 안됨?'

(배열 (Array)도 object라고 뜨는 것을 typeof를 사용해보면 알 수 있다.)

 

근본적으로 EcmaScript에서는 원시 값 (primitive) 에 대한 리스트를 정의하고 있다. 그리고 원시 값에 null은 포함된다. 그러니까 실질적으로 null은 원시값이다. 그런데 typeof를 사용하면 왜 object라고 뜨는 것인가?

 

공식입장을 내가 직접 확인해본 것은 아니지만 민심에 따르면 이것은 자바스크립트 최초 버전의 버그라고 한다. 자바스크립트를 쓰다보면 사실 여기저기 버그 같은 것들이 깔려있다. 그리고 수정하지 않는 이유는 이미 typeof에 대한 활용이 많이 이루어졌기 때문이다. 다음에 시간이 된다면 관련된 공식 자료를 확인해볼 수 있으면 좋겠지만 이미 거의 정론처럼 모두 받아들이고 있다.

 

typeof를 현재 시점에서 수정하게 된다면 이미 기존에 typeof null을 활용하였던 코드 대부분을 각자가 알아서 뜯어 고쳐야하는 불상사가 발생될 수 있다. 그렇기에 이 사항에서는 사실 이미 자바스크립트의 특성 중 하나라고 보는게 속이 편하다.