CoreJS - undefined / null

SANGKU OH·2020년 11월 24일
2

CoreJavascript

목록 보기
3/10
post-thumbnail

자바스크립트에는 '없음'을 나타내는 값이 두 가지가 있다.
바로 undefined와 null이다.
두 값의 의미는 같은 것 같지만 미세하게 다르고, 사용하는 목적 또한 다르다!

undefined

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

사용자가 명시적으로 undefined를 지정하는 경우는 달리 덧붙일 내용이 없으니 그 외의 경우를 알아보자

자바스크립트 엔진이 자동으로 부여하는 경우

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

  1. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
  2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려 할 때
  3. return 문이 없거나 호출되지 않는 함수의 실행 결과

자동으로 undefined를 부여하는 경우

let a;
console.log(a); //(1) undefined, 값을 대입하지 않은 변수에 접근

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

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

그런데 1의 값을 대입하지 않는 경우에 대해 배열의 경우에는 조금 특이한 동작을 확인할 수 있다.

undefined와 배열

let arr1 = [];
arr1.length = 3;
console.log(arr1); // [empty x 3]

let arr2 = new Array(3);
console.log(arr2); // [empty x 3]

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

1번째 줄에서 빈 배열을 만들고, 2번째 줄에서 배열의 크기를 3으로 하자, [empty x 3]이 출력되었다.
이는 배열에 3개의 빈 요소를 확보했지만 확보된 각 요소에는 문자 그대로 어떤 값도, 심지어 undefined조차 할당돼 있지 않음을 의미한다.

한편 arr3는 리터럴 방식으로 배열을 생성하면서 각 요소에 undefined를 부여했다.
따라서 출력 결과는 그 위와 다른 것을 확인할 수 있다.

이처럼 '비어있는 요소'와 'undefined를 할당한 요소'는 출력 결과값이 다르다.

배열은 무조건 length 프로퍼티의 개수만큼 빈 공간을 확보하고 각 공간에 인덱스 이름으로 지정할 것이라고 생각하기 쉽지만, 실제로는 객체와 마찬가지로 특정 인덱스에 값을 지정할 때 비로소 빈 공간을 확보하고 인덱스를 이름으로 지정하고 데이터의 주소값을 저장하는 등의 동작을 한다.

즉, 값이 지정되지않은 인덱스는 '아직은 존재하지 않는 프로퍼티'에 지나지 않는다는 것!

다시한번 사용자가 명시적으로 부여한 경우와 비어있는 요소에 접근하려 할 때 반환되는 두 경우의 undefined의 의미를 구별해보자

사용자가 명시적으로 부여한 undefined는 그 자체로 값이다.
undefined가 '비어있음'을 의미하긴 하지만 하나의 값으로 동작하기 때문에 이 때의 프로퍼티나 배열의 요소는 고유의 키값(프로퍼티 이름)이 실존하게 되고, 따라서 순회의 대상이 될 수 있다!

자바스크립트 엔진이 하는 수 없이 반환해주는 undefined는 해당 프로퍼티 내지 배열의 키값(인덱스) 자체가 존재하지 않음을 의미한다.
값으로써 어딘가에 할당된 undefined는 실존하는 데이터인 반면, 자바스크립트 엔진이 반환해주는 undefined는 문자 그대로 값이 없음을 나타내는 것입니다.

null

'비어있음'을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null을 쓰자
null은 애초에 이런 용도로 만들어진 데이터 타입이다.

이런 규칙을 따르는 한 undefined는 오직 '값을 대입하지 않는 변수에 접근하고자 할 때 자바스크립트 엔진이 반환해주는 값'으로 존재할 수 있다.

typeof null은 object 이다.

자바스크립트 버그로 인해 object로 나타난다.
따라서 어떤 변수의 값이 null인지 여부를 판별하기 위해서는 typeof 대신 다른 방식으로 접근해야 한다.

let 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과 undefined가 서로 같다고 판단한다.
따라서 어떤 변수가 실제로 null인지 아니면 undefined인지 동등 연산자로 비교해서는 알수가 없다.
일치 연산자(===)를 써야만 정확히 판별할 수 있다!

profile
Prof.Google을 통해 필요한 정보를 이 곳에 insert 🐸

0개의 댓글