undefined와 null

둘다 '없음'을 나타낼때 사용하고는 합니다.

의미는 같을 수 있으나 사용하는 목적을 정확히해야 혼란을 줄일 수 있습니다.

 

 

undefined

undefined는 사용자가 명시적으로 지정할 수도 있지만, 

값이 존재하지 않을때 자바스크립트 엔진이 자동으로 부여하는 경우도 있습니다.

 

1) 값을 대입하지 않은 변수(데이터 영역의 주솟값이  없는 식별자)에 접근할때나

2) 객체 내부에 존재하지 않는 프로퍼티에 접근하려고할때,

3) return 문이 없거나 호출되지 않는 함수의 실행결과에서 자바스크립트 엔진은 undefine를 반환합니다.

 

 

1) 값을 대입하지 않았을 경우

var name;

console.log(name); // undefined

개략적이미지 - 값을 대입하지 않았을 경우

 

2) 객체 내부에 존재하지 않는 프로퍼티에 접근

var person = {
	name : '홍길동'
};

console.log(person.name); // 홍길동
console.log(person.age); // undefined

 

3) return 문이 없거나 호출되지 않는 함수의 실행결과

var getName = function(){};
var hoon = getName('hoon');

console.log(hoon); // undefined

 

* 만약 return 값이 있다면....

var getName = function(name){
	return name;
};
var hoon = getName('hoon');

console.log(hoon); // hoon

 

자바스크립트 엔진에서 비어있는 경우 undefined를 반환해준다고했는데, 배열일 경우에는 empty를 출력합니다.

이때 사용자가 undefined를 넣었을때와 empty를 반환할때를 구분할 수 있어야합니다.

var arr = new Array(3);

console.log(arr); // [empty x 3]

 

식별자 arr는 배열의 크기를 확보했지만 undefined 조차 할당되지 않은 상태여서 [empty x 3] 이 출력됩니다. 

empty는 순회와 관련해서 배열 메서드에서 제외되는 경우가 있습니다.

var arr = new Array(3);
arr.filter(function(o) { return !o }); // []

var arr2 = [undefined, undefined, undefined];
arr2.filter(function(o) { return !o }); // [undefined, undefined, undefined]

 

즉

사용자가 추가한 undefined는 하나의 데이터이며 '비어있음'을 의미하고 하나의 값으로 동작합니다.

그래서 프로퍼티나 배열의 요소에서 고유의 키값(프로퍼티 이름)이 실존하게 되며 순회의 대상이 될 수 있습니다.

 

하지만

사용자가 추가한 undefined가 아닌 자바스크립트 엔진이 반환한 undefined는 해당 프로퍼티나 배열의 키(index)가 존재하지 않기 때문에 문자 그대로 값이 없음을 나타내는 것입니다.

 

 

null

개발자가 undefined를 직접할당하는 것은 디버깅 시 자바스크립트 엔진이 반환하는 값과 혼란스러울 수 있으므로 명시적으로 '비어있음'을 나타내고 싶을때에는 null을 사용하면됩니다.

* typeof null은 object이므로 주의해야합니다.

*식별자에 undefined가 자동으로 할당된다고 말하는 것은 실제 동작에 비교해서 정확하지 않은것입니다.

식별자에 할당된 값은 없고, 추후 식별자에 접근하려고했을때 undefined가 반환된다고하는것이 정확합니다.

 

---

출처

코어 자바스크립트:핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍,(저자 정재남)