[Javascript] undefined 와 null

Javascript에 없음을 나타내는 값은 "undefined"와 "null" 두가지가 있습니다.

undefined

undefined는 사용자가 명시적으로 지정할 수 있지만 javascript 엔진이 자동으로 부여할때도 있습니다. Javascript 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환합니다. 다음 3가지 경우가 이에 해당합니다.

• 값을 대입하지 않은 변수
• 객체 내부의 존재하지 않는 property에 접근하려고 할 때
• return 문이 없거나 호출되지 않는 함수의 실행 결과

let a;
console.log(a);								//undfined, 1번

const b = {};
console.log(b.key);							//undfined, 2번

const func = () => {}
console.log(func());						//undfined, 3번

그러나 빈값에 대해 undefined를 주는것은 배열에서는 약간 다르게 동작합니다. 하기와 같이 배열을 선언 후 length를 변경하거나 new Array(length)로 선언 후 배열을 print해보면 undefined값이 아니라 그냥 비어있음을 볼수 있습니다.

const arr1 = [];
arr1.length = 3;
console.log(arr1);							//[empty × 3]

const arr2 = new Array(3);
console.log(arr2);							//[empty × 3]

arr1.forEach((d, i) => console.log(d, i));			//아무값도 출력되지 않음.

arr1[2] = 2;
arr1.forEach((d, i) => console.log(d, i));			//2 2

arr2[0] = undefined;
arr2[2] = 22;
arr2.forEach((d, i) => console.log(d, i));			//undefined 0    22 2

console.log(arr2[1]);								//undefined

forEach 결과로 볼수 있듯이 empty 값은 출력되지 않습니다. 명시적으로 undefined를 할당했을 때에는 undefined값이 정상 출력됩니다. 마지막에 존재하지 않는 arr2[1]을 print해보면 undefined가 출력됩니다.

이는 배열도 object라고 생각하면 쉽게 이해할 수 있습니다. arr2에서 1번 index에는 값을 선언하지 않았는데 이는 object에 key가 1인 property를 추가하지 않았다는것입니다. 때문에 forEach로 순환할 때에는 존재하지 않는 property임으로 출력하지 않게 되고 arr2[1]로 print하면 존재하지 않는 property를 접근하려고 하기 때문에 undefined가 출력되는 것입니다.

null

"코어 자바스크립트" 책에서는 명시적으로 빈값을 주고 싶을 때에는 null를 사용하라고 권장합니다 (log 출력에서 undefined와 null 출력만 보고 문제발생원인을 파악하는데 도움이 됨).

그러나 null 사용 때문에 문제가 발생할 수도 있습니다.

1. null 사용시 하기 내용들을 주의해야 합니다.

const v = null;
console.log(typeof v);						//object

console.log(v == undefined)			//true
console.log(v == null)				//true

console.log(v === undfined)			//false
console.log(v === null)				//true

 

2. 특별히 하기와 같은 상황도 발생하는데 참 javascript는 어렵네요. ㅠㅠ

const funcA = (obj = {name: "test"}) => {
	console.log(obj.name);
}

funcA();

const param = null;
funcA(param);

**************************************************
결과:

undefined
Uncaught TypeError: Cannot read property 'name' of null"

const funcA = (obj = {name: "test"}) => {} 에서 funcA를 call할 때 매개변수가 값이 없으면 {name: "test"} 값을 주는것입니다.

funcA()로 call했을 때에는 문제없이 잘 실행됩니다.

그런데 param을 null로 초기화하고 funcA(param) 으로 call 하면 default값인 {name: "test"} 를 부여하지 않습니다.

즉 위의 표현식은 obj === undefined일 때 동작하고 null check는 하지 않는 것입니다.

따라서 null 사용할 때 위의 상황들을 조심해야 합니다.

 

 

 

본 글은 "코어 자바스크립트" 책을 기반으로 작성하였습니다. JS 개발자들에게 꼭 추천해드리고 싶습니다.

wikibook.co.kr/corejs/

코어 자바스크립트: 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍