[JS] undefined와 null

  undefined와 null

  'undefined'와 'null'은 같은 의미를 가지면서 또 다르게 다름을 가진 값입니다. 이 둘의 정확한 차이점을 안다면 변수에 잘못 할당된 값들을 빠르게 캐치할 수 있습니다.

 

 

 

 

 

  undefined

undefined가 부여되는 경우

 

  1. 사용자가 명시하는 경우

  2. 자바스크립트 엔진이 자동으로 부여

 

 

  사용자가 변수에 undefined를 부여하는 경우는 사실상 '의미없는 부여'로 특별히 할 얘기는 없습니다. 대신 자바스크립트 엔진이 변수에 자동으로 undefined를 부여하는 경우에 대해 알아 봅시다.

 

 

 

자바스크립트 엔진이 변수에 undefined를 자동으로 부여하는 경우는 3가지

 

  a. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때

  b. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고할 때

  c. retrun 문, 반환값이 없을 때

 

 

 

example a. 값을 대입하지 않은 변수)

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

  값이 대입되지 않은 변수에 접근했습니다.

 

 

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

var obj = {a: 1};
console.log(obj.a);		// 1
console.log(obj.b);		// undefined

   존재하지 않은 프로퍼티에 접근했습니다.

 

 

example c. return문, 반환값이 없을 때)

var func = function() {};
var c = func();
console.log(c);		// undefined

  반환(return)값이 없습니다.

 

 

  위의 예시를 통해서 undefined가 언제 자동으로 부여되는지 알 수 있었습니다. 그렇다면 배열에서의 undefined는 어떤 의미를 가지는지 알아봅시다.

 

 

 

undefined와 배열

 

1. 배열에 빈 요소를 할당했을 때

var arr1 = [];
arr1.length = 3;
console.log(arr1);		// [empty, empty, empty]

  배열(arr1) length를 3으로 지정함으로써 3개의 빈 요소를 확보했지만 각 요소에는 문자 그대로 어떤 값도 할당되지 않았습니다. 이처럼 배열에 빈 공간을 만들어주는 것에는 자바스크립트 엔진이 undefined를 부여하지 않는다는 것을 알 수 있습니다.

 

 

2. 배열 객체를 할당했을 때

var arr2 = new Array(3);
console.log(arr2);		// [empty, empty, empty]

  배열에 빈 요소를 할당한 경우와 마찬가지로 빈 배열 객체를 할당하게 되면 같은 결과를 얻을 수 있습니다.

 

 

3. 배열에 직접 undefined를 명시할 때

var arr3 = [undefined, undefined, undefined];
console.log(arr3);		// [undefined, undefined, undefined]

  undefined를 배열에 직접 할당하는 경우에는 배열 요소에 undefined를 가질 수 있는 것을 보이고 있습니다.

 

  이처럼 '비어있는 요소'와 'undefined를 할당한 요소'는 출력 결과부터 다르다는 것을 알 수 있네요. 

 

 

  배열은 객체(object)입니다. 이를 생각해보면 존재하지 않는 프로퍼티를 순회할 수 없는 것이 당연합니다. 따라서 배열에서는 무조건 length값을 지정한다고 해도 프로퍼티의 개수 만큼의 빈 공간을 확보하고 각 공간에 index를 이름으로 지정하지 않습니다. 실제로는 객체와 마찬가지로 특정 index에 값을 지정할 때 비로소 빈 공간을 확보하고 인덱스를 이름으로 지정하여 데이터의 주솟값을 저장하는 등의 동작을 합니다. 즉, 값이 지정되지 않은 index는 '아직은 존재하지 않는 프로퍼티'에 지나지 않는 것입니다.

 

 

  'undefined'는 그 자체로 값입니다. '비어있음'을 의미하지만 하나의 값으로써 동작하기 때문에 이때의 프로퍼티나 배열의 요소는 고유의 키값(프로퍼티의 이름)이 순회 대상이 될 수 있습니다. 하지만 자바스크립트 엔진이 어쩔 수 없이 반환하는 undefined는 해당 프로퍼티 내지 배열의 키값(index) 자체가 존재하지 않음을 의미합니다.

 

 

var a;		// 자바스크립트 엔진은 메모리에 변수를 할당할 뿐 더이상의 동작은 하지 않음
console.log(a);		// a에 접근할 때 비로소 'undefined'를 반환

  따라서 '비어있음'을 명시적으로 나타내고 싶을 때는 'null'을 사용합니다.

 

 

 

  다시 한번 정리해보자면

  1. 변수에 'undefined'를 직접 부여하지 않는다.

  2. '비어있음'을 명시적으로 나타내고 싶을 때는 'null'을 사용한다.

 

  이와 같은 규칙을 따른다면 undefined는 오직 '값을 대입하지 않는 변수에 접근하고자할 때 자바스크립트 엔진이 반환해주는 값'으로서만 존재할 수 있습니다.

 

 

  추가적으로 주의할 점이 있습니다. typeof null은 object라는 것이며 이는 자바스크립트의 자체적인 버그입니다. 따라서 어떤 변수의 값이 null인지 여부를 판별하기 위해서는 typeof 대신 다른 방식으로 접근해야합니다.

 

 

변수의 값이 null인지 여부를 판별하기 위한 방법

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

console.log(n == undefined);			// true
console.log(n == null);				// true

console.log(n === undefined);			// false
console.log(n === null);			// true

   이 처럼 '일치 연산자(===)'를 통해서 null를 직접 판단하는 것이 좋습니다.