undefined와 null

undefined vs null

자바스크립트의 원시타입에는 undefined와 null이 있다.

책을 보다가 undefined와 null이 어떻게 다른지 크게 관심이 가져본 적이 없어서 글을 썼다.

undefined와 null은 미세하게 다르고 사용 목적이 다르다.

undefined는 우리가 직접 명시적으로 지정할 수 있지만 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우도 있다.

그럼 어떤 경우에 자바스크립트가 자동으로 부여하는지 예시와 함께 알아보자!

Undefined

자동으로 부여하는 경우 예시

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

var obj = { a: 1 };
console.log(obj.a); // 1
console.log(obj.b); // undefined
console.log(b); // Uncaught ReferenceError: b is not defined

typeof undefined; // undefined

위와 같은 경우에 console.log를 찍었을 때, undefined가 자동적으로 부여하는 것을 알 수 있다. 변수 b는 아예 변수로 선언조차 되지 않았기 참조 오류가 발생한다!

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

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

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

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

Null

null 예시

var arr = [];
console.log(arr); // []

typeof null; // object

위 코드에서 arr을 console.log를 찍어보면 []이라는 빈 값이 나온다. 그런데 typeof null을 해보면 object, 객체라고 나온다

이 부분은 자바스크립트 내의 버그이므로 주의하자!

null은 어떤 값이 의도적으로 비어있음을 표현한다. undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.

알아두면 좋은 것

undefined == null; // true
undefined === null; // false

두 코드를 console.log로 찍어보면 다른 값을 보여준다.

이는 == 연산자는 한 쪽 연산자에 null이나 undefined가 왔을 때 반대편 연산자에 null, undefined가 왔을 때만 true를 반환하고, 다른 모든 경우에는 false를 반환한다!

따라서 null을 체크할 때는 === 연산자를 사용하자!

결론

"없음"을 나타내는 값은 undefined와 null이 있다.
undefined는 값이 존재하지 않을 때를 의미한다.
null 은 사용자가 명시적으로 "없음"을 표현하기 위해 대입한 값이다.
undefined를 명시적으로 우리가 대입하는 것은 지양하고 null을 이용하여 "없음"을 표현하자