Core Javascript - Null vs Undefined

kyj2471·2021년 4월 2일
0

Core

목록 보기
2/2
post-thumbnail

코어 자바스크립트란 책을 읽으면서 스스로 정리한 내용입니다
혹시 잘못된 내용이 있으면 수정하겠습니다.

null과 undefined

우선 nullrhk undefined 모두 자바스크립트에서 "없음"을 나타내는 값이다. 물론 당연한 말이지만 두개의 차이점이있고 그에 따라 사용하는 목적이 달라진다.

undefined

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

  • 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
  • 객체 내부 존재하지 않는 프로퍼티에 접근하려 할때
  • return문이 없거나 호출되지 않은 함수의 실행 결과
let a;
console.log(a) //undefined

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

let func = function(){}
let func2 = func()
console.log(func2)//undefined

위와 같은 코드로 간단하게 undefined결과물이 나오는걸 확인 할 수 있다.
그리고 비어있는 요소는 순회와 관련 많은 배열 메서드에서 순환 대상에서 제외된다. 이게 무슨 말인지 알기 위해 아래 코드를 보도록 하자.

let arr1 = [undefined,1]
let arr2 = []
arr2[1]

arr1.forEach(function(v,i){console.log(v,i)})//undefined 0 //1 1
arr2.forEach(function(v,i){console.log(v,i)})//1 1

둘의 차이점을보면 arr1에서는 배열의 모든 요소를 순회하여 결과를 출력하였다. 하지만 arr2에서는 forEach()메서드가 어떠한 처리도 하지 않고 건너 뛰었다는걸 알 수 있다.

우선적으로 배열도 객체다 라는걸 생각하면 당연한 결과이다.
배열은 무조건 length프로퍼티의 개수 만큼 빈 공간을 확보하고 각 공간의 인덱스를 이름으로 지정할거라 생각하지만 사실상 객체와 마찬가지로특정 인덱스 값을 지정할 때 빈 공간을 확보하고 인덱스를 이름으로 지정하고 데이터 주솟값을 저장하는 동작을 한다.
결론적으로 값지 정해지지 않은 인덱스는 아직 존재하지 않는 프로퍼티다 라는 말이다.

이제 다시 위의 코드를 이해해 보면 arr1에서는 undefined는 이 자체로 값이된다. 똑같이 비어있습니다 라고 나타내는 값이라도 하나의 값으로 동작을 해서 프로퍼티나 배열의 요소는 고유 키값을 가지게 되고 이러한 이유로 순회를 할 수 있는 대상이됩니다.
arr2에서 자바스크립트 엔진이 어쩔 수 없이 undefined를 할당한 경우에는 해당 프로퍼티나 인덱스 값이 없음을 의미합니다.

null

앞에서 내용을 보고 혼란스러울 수 있다. 그런데 이 혼란을 피하는 방법은 단순하다. 그냥 둘중 하나 사용 하지 않으면 된다.
즉 직접 undefined를 할당 해 주지 않으면 된다.
할당을 해줄때는 undefined가 아닌 null을 써주면된다.
애초에 null은 이러한 용도로 만든 데이터 타입이다.

한가지 주의 할점은

console.log(typeof null) //"Object"
console.log(typeof undefined) //"undefined"

null은 타입이 object라는 점이다. 이것은 javscript의 버그이다. 그럼 변수 값이 null인지 확인 하려면 어떻게 해야할까?
동등 연산자(==) 일치 연산자(===)를 사용하면 된다.

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모두 동등연산자에서는 같다고 판단합니다.
결론적으로 일치연산자를 사용해야 정확히 판별 할 수 있습니다.

profile
[ frontend-developer ]

0개의 댓글