[Day39] Javascript - undefined & null

null과 undefined의 차이

(해외 커뮤니티에서 많은 공감을 얻은 예시이다!)

null과 undefined를 보이는 그대로 해석하면 ‘빈 값’과 ‘없는 값’을 의미하는 것처럼 보이지만 사실 큰 차이점이 있다.

undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다.
(Execution Context가 만들어질 때 Memory Creation 단계에서 함수 및 변수를 싹 읽고 해당 변수에다가 undefined를 먼저 넣어놓는 것을 생각해보자)
따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.

typeof null // 'object'
typeof undefined // 'undefined'
null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

undefined

undefined는 원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다.

cf) undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다. 그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다. (즉 변수 이름으로 undefined를 사용하는 일은 피하자는 것!)

아래의 경우에 변수가 undefined를 반환한다.

값을 할당하지 않은 변수
메서드와 선언에서 변수가 할당받지 않은 경우
함수가 값을 return 하지 않았을 때

null

null은 원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다. undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다. (즉 의도적으로 비어있다는 것을 표현하기 위함 개념이다. undefined와는 이 점에서 다르다)

cf) null은 undefined처럼 전역 객체의 속성 중 하나가 아니라 리터럴 값이다.

undefined와 null의 공통점

둘다 각각의 타입명(undefined, null)의 값이 유일하다.
undefined 타입의 값은 undefined가 유일한다.
null 타입의 값은 null이 유일하다.

undefined 타입

undefined는 원시 자료형 undefined로 분류된다.

undefined는 ‘아무 값도 할당받지 않은 상태’를 의미한다.

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.

변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다.

따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.

변수를 참조했을 때 undefined가 반환된다면 선언 이후 값이 할당되지 않은 즉, 초기화되지 않은 변수라는 것을 알 수 있다.

var a;
console.log(a); // undefined
console.log(typeof a); // undefined

이처럼 undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다.

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

그렇다면 변수에 값이 없다는 것을 명시하고 싶을 때는 어떻게하면 좋을까? 바로 undefined를 할당하는 것이 아니라 null을 할당한다.

선언과 정의

undefined를 직역하면 ‘정의되지 않은’이란 의미이다.

자바스크립트 undefined에서 말하는 정의란 ‘변수의 값을 할당하여 변수의 실체를 명확히 하는 것’를 의미한다.

ECMAScript 사양에서 변수는 ‘선언한다.’라고 표현하고, 함수는 ‘정의한다.’라고 표현한다.

null 타입

null은 원시 자료형 null로 분류된다.

자바스크립트는 대소문자를 구분하므로 null은 Null, NULL 등과는 다르다.

null은 ‘비어있는, 존재하지 않는 값'(값의 부재)을 의미한다.

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재) 할 때 사용한다.

변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.

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

typeof 에서 null

단, typeof로 자료형을 확인할 때 object(객체)를 반환하는데, null이 빈 참조를 나타내는 데 자주 사용되기 때문이다.

그래서 원시 자료형으로 생각해도 되지만 엄밀히 말해서는 null은 객체이고 참조 자료형이다.

var nullType = null;
console.log(typeof nullType); // object

함수가 반환하는 null

함수가 유효한 값을 반환할 수 없는 경우에 명시적으로 null을 반환하기도 한다.
예를 들어 HTML 요소를 검색하는 document.qureySelecter 메서드는 조건부에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환한다.

var element = document.querySelector('.myClass');
// HTML 문서에 myClass 클래스를 가진 요소가 없다면 null을 반환한다.
console.log(element); // null