데이터 타입 | null과 undefined : 코어 자바스크립트 씹뜯맛즐 하기

지난 데이터 타입 포스팅에서 모든 것을 끝내려고 했지만 분량 조절 실패로

두 번에 나눠서 데이터 타입을 맛보고 있다.

과식하지 않고 적당히 나눠서 배부르게 맛보자.

 

---

 

null과 undefined

지난 포스팅에서 null과 undefined도 기본형 데이터에 포함되는 것을 봤다.

그렇다면 변하지 않는 값을 가지고 있다는 건 알겠는데,

null과 undefined는 자바스크립트에서 '없다'라는 의미를 갖는다.

둘 다 없는데 뭐가 차이가 있다는 걸까? 그걸 한번 알아보자.

 

아기들은 숨바꼭질 할 때 자신의 눈만 가리면 숨었다고 생각한다.

부모의 입장에서 바라보면 분명 있는데 없다고 여긴다.

부모가 우리 개발자라고 하면 아기가 변수라고 하면

없다고 여기는 건 null, 정말 없는 건 undefined라고 할 수 있겠다.

 

조금 더 정확한 예시로는 음식을 담는 그릇에 비유할 수 있겠는데,

변수를 선언하고 null을 할당하는 것은 그릇은 있지만 내용물이 비어있을 때,

undefined는 그릇조차 없는 상황일 때로 비유할 수 있겠다.

 

 

null과 undefined는 '없다'라는 의미를 갖고 있다고 했는데,

null은 개발자의 입장에서 '없다'라고 명시적으로 보여주는 값이고

undefined는 정말 없다는 것을 나타내는 값이다.

 

null이 개발자가 의도한 값이라고 한다면 undefined는 언제 볼 수 있는 값일까?

책에서는 자바스크립트 엔진이 undefined를 반환하는 상황을 3가지로 얘기한다.

 

값을 대입하지 않은 변수에 접근할 때

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

 

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

const obj = { name:"um" };
console.log(obj.age)               // undefined

 

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

function check  () {
  console.log("check");
}

console.log(check())              // undefined

 

이 3가지 상황을 통해 undefined는 확실히 없을 때 확인할 수 있다는 것을 볼 수 있다.

그러나 아예 선언조차 안된 변수에 접근할 때는 error를 내뱉는 것을 볼 수 있다.

 

let a = undefined;
let b;

console.log(a)            // undefined
console.log(b)            // undefined

물론 undefined도 하나의 값이기 때문에 특정 변수에 할당할 수 있다.

근데 위 코드를 보면 내가 undefined를 할당을 하나 안 하나 undefined라는 값이 출력되는 것을 볼 수 있는데

개발자 입장에서는 이게 개발자가 할당한 건지 아니면 자바스크립트 엔진이 그렇게 부여한 것인지

코드를 다시 보지 않는 이상 알기 어렵다.

 

그래서 개발자가 이 데이터는 비어있는 값이라는 것을 명시적으로 표시할 때는

주로 null을 사용해 해당 데이터가 없음을 나타내곤 한다.

 

728x90

 

알아둬야 할 점

null과 undefined와 관련해 알아둬야 할 부분이 몇 가지 있다.

 

데이터 타입

let a = null;
let b = undefined;

console.log(typeof a)             // "object"
console.log(typeof b)             // "undefined"

typeof로 변수의 데이터 타입을 확인해 보면 null을 할당한 변수의 경우 object를 반환하는 것을 볼 수 있다.

아 그럼 null은 기본형이 아니라 참조형이 아닌가?라고 생각할 수 있는데

이는 자바스크립트에서 구현 버그로 간주한다고 한다.

 

그래서 그냥 null은 null로 undefined는 undefined라고 생각하자.

 

falsy

if (undefined) {
  console.log("true")
} else {
  console.log("false")
}

데이터 타입 중 boolean 타입은 참, 거짓을 나타내는 데이터다.

true 아니면 false의 값을 갖는데, null과 undefined는 falsy 한 값으로 평가받는다.

즉, 거짓 같은 값으로 평가가 된다는 것이다. 그래서 위의 코드를 실행하면 false가 출력이 된다.

falsy 한 값은 boolean 문맥에서 false로 평가받기 때문에 위와 같은 결과가 나오는 것이다.

 

---

 

포스팅 작성에 참고한 감사한 글들

MDN 문서 : 거짓 같은 값

2ssue's dev note : undefined와 null의 차이점을 설명하세요