자바스크립트에서 null과 undefined중 무엇을 사용해야 하는가

오늘은 자바스크립트에서 '값이 비어있다'는 데이터를 사용할 때 null을 사용해야 하는 이유에 대해 작성해보겠습니다.

해당내용은 책, 코어자바스크릡트를 공부하고 정리한 내용입니다.

undefined의 종류

자바스크립트에서 undefined는 두가지 경우에 나타납니다.
1. 개발자가 undefined를 할당했을 때
2. 자바스크립트 엔진이 특정 상황에 undefined를 출력할 때.

1번의 경우는 비교적 간단합니다. 그냥 식별자에 undefined를 할당해준 경우 입니다.

var a = undefined
console.log(a) // undefined

2번의 특정 상황은 다음과 같은 경우를 의미합니다.
1. 값이 할당되지 않은 변수에 접근했을 때
2. 객체 내부에 존재하지 않는 프로퍼티에 접근했을 때
3. 함수를 호출하였는데 해당 함수가 return 하는 값이 없거나 호출되지 않는 함수를 실행했을 때

var a;

var obj = {b: "bear"}
var arr = ["ccc", "ddd"]
const func = () => {}

console.log(a) //undefined
console.log(obj.c) //undefined
console.log(arr[2]) //undefined
func() //undefined
console.log(func) //unefined

개발자가 직접 undefined를 할당한 것과, 데이터가 존재하지 않아 undefined를 부여하는 것은 다르게 동작합니다. 데이터가 존재하지 않는 경우에는 undefined가 메모리에 저장된 것이 아닌 JS 엔진이 명시적으로 부여한 것이기 때문에, 실제로 저장된 데이터가 아닙니다. 다음 코드를 보겠습니다.

var arr = []
arr.length //3
var arr2 = [undefined, undefined, undefined]

arr.forEach((ele) => console.log(ele)); //undefined
arr2.forEach((ele) => console.log(ele)); //undefined, undefined undefined undefined

사용자가 직접 undefined를 지정할 경우 메모리상에 데이터가 저장되었기 때문에 정말 값이 저장되지 않아 JS 엔진이 반환하는 undefined와는 다르게 동작할 수 있습니다. 이렇게 두가지 undefined를 섞어 사용하면 예상치 못한 버그가 발생할 수 있기에 값이 개발자가 '값이 없음'을 표현하고 싶을 때는 null을 사용하는 것이 좋습니다.

단 null은 주의할 점이 있는데 typeof null을 할시 object를 반환합니다. 이는 JS의 버그입니다. 따라서 null을 체크하기 위해선 null === null을 사용하는 것이 좋습니다.