자바스크립트에서 '없음'을 나타내는 두 가지 방법, undefined와 null

자바스크립트에서 '없음'을 나타내는 두 가지 방법, undefined와 null

undefined를 반환하는 상황 3가지

자바스크립트 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환합니다.

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

    var a;
    console.log(a); // undefiend. 값을 대입하지 않는 변수에 접근

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

    var obj = { a: 1};
    console.log(obj.b); // ReferenceError: b is not defined 존재하지 않는 프로퍼티에 접근

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

    var func = function() { };
    var c = func(); // 반환 값이 없으면 undefined를 반환한 것으로 간주
    console.log(c); // undefined

배열에서 undefined 특이 케이스

빈 요소와 undefined를 할당한 요소는 출력 결과부터 다릅니다.

var sampleArray = []; // 빈 배열 선언
sampleArray.length = 3; // 빈 배열의 크기 설정
console.log(sampleArray); // [empty × 3]

var sampleArray2 = new Array(5);
console.log(sampleArray); // [empty × 5]

아래와 같이 빈 배열을 선언하고 크기를 설정하면 그 크기만큼 빈 요소가 확보되지만 각 요소에는 아무것도 할당되어 있지 않습니다.

하지만 리터럴 방식으로 배열을 생성하면서 각 요소가 undefined를 부여했습니다. 이 배열을 출력하면, 위와 다르게 undefined가 값으로 할당된 배열이 출력됩니다.

var samepleArray3 = [undefined, undefined];
console.log(sampleArray3); // [undefiend, undefined]

빈 요소는 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외됩니다.

var sampleArray = [undefined, 1];
var emptyArray = [];
emptyArray[1] = 1;
console.log(emptyArray); // [empty, 1]

sampleArray.forEach(function (v, i) {
  console.log(v, i);
});
/*출력 결과
undefined 0
1 1
*/
emptyArray.forEach(function (v, i) {
  console.log(v, i);
});
/* 출력 결과
1 1
*/

sampleArray는 명시적으로 undefined와 1을 할당한 배열입니다. emptyArray는 빈 배열에 두 번째 값으로 1을 할당한 빈 요소를 포함한 배열입니다.

emptyArray의 forEach 연산 결과를 보면, 빈 요소에 대하여 연산을 하지 않고 건너 뜁니다.

혼란을 피하는 방법, undefined를 직접 할당하지 않기!

'비어 있음'을 명시적으로 나타내고 싶을 때는 undefined 말고 null을 쓰면 됩니다. null은 애초부터 이런 용도로 만든 데이터 타입입니다.

하지만 null을 사용할 때도 주의할 점이 있습니다. null의 타입 연산에는 자바스크립트의 버그가 있습니다.

typeof null // "object"

따라서 어떤 변수의 값이 null인지 여부를 판별하기 위해서는 typeof를 사용하지 않아야 합니다. 동등 연산자(==)도 안 됩니다. 대신 일치 연산자(===)를 사용해야 합니다.

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

결론: undefined와 관측 문제

책 <코어 자바스크립트>에서 작가는 값을 대입하지 않은 변수(var a;)에 대하여 아래와 같이 언급합니다.

... 그런데 자바스크립트가 실제로 그렇게 동작하는 것은 아닙니다. 정확히는 아무것도 할당하지 않고 끝나며, 이후 변수 a에 접근하고자 할 때 비로소 undefined를 반환하는 것이 맞습니다. ... - 책 32p

값을 할당하지 않고 선언된 변수 a가 자동으로 undefined가 할당되는 것이 아닙니다. 값을 알고자 접근하려고 할 때 자바스크립트는 사용자에게 undefined 반환합니다. 즉, 빈 배열, 빈 변수는 진짜로 비어 있는 것입니다.

참고 문헌 및 출처

• 책 <코어 자바스크립트>