empty, undefined, & null 구분하기

VLV·2022년 10월 1일
0

empty, undefined, 그리고 null 모두 변수가 비어있음을 표시하는 식별자이다. 그러나 이들은 반복문을 통해 몇 가지 특징에 따라 구분될 수 있다.

let arr = [undefined, 0]
arr[3] = 2

arr.forEach((v, i) => console.log(v, i)) // undefined 0 / 0 1 / 2 3
arr.map((v, i) => v + i) // [NaN, 1, <1 empty item>, 5]
arr.filter(v => !v) // [undefined, 0]
arr.reduce((a, c, i) => a+c+i) // NaN

const arr3 = new Array(2)
console.log(arr3) // [emptyx2]

첫째, empty는 반복문을 통하여 객체를 순회할 때 잡히지 않는다. empty는 변수가 선언되기 이전 단계에서 개념적으로 존재하는 것으로 어떤 주소도 가리키지 못한다. 예를 들어 존재하지 않는 arr의 2번 인덱스나, Array만 선언한 상태인 arr3과 같은 경우와 같다. 또한 arr.filter 부분을 보면 알 수 있듯이, empty는 undefined, 0이 false를, 2가 true를 가리키는 것과 달리 그 자체로 false나 true를 가리키지 않는다.

둘째, undefined는, 개발자가 의도적으로 undefined 값을 할당하는 경우 반복문을 통해 객체를 순환할 때 값이 할당된 변수로써 순회 대상이 되지만, 변수를 초기화만 하고 값을 할당하지 않은 상태와 같이 자바스크립트 엔진이 자동적으로 undefined를 할당하는 경우에서는 순회 대상이 되지 않는다. 때문에 의도적으로 undefined를 할당하는 것은 예기치 못한 오류를 발생시킬 수 있다. 따라서 이를 지양해야하고, 대신 null과 같은 표현을 같은 의도로 선택할 수 있을 것이다.

console.log(typeof null) // Object
console.log(null == undefined) // true
console.log(null === undefined) // false

셋째, null의 타입을 받아올 때 아래와 같이 object type을 반환하므로 주의해야 한다. 과거 자바스크립트 버전의 버그이지만, 과거 버전을 기반으로 빌드된 여러 웹페이지가 여전히 잘 사용되고 있어 건드리지 못하고 있는 상태이다.

profile
커피, IT기기, 노래를 좋아해요.

0개의 댓글

관련 채용 정보