undefined과 null
여기 두 개의 휴지걸이가 있다. 휴지 자체가 아예 없는 휴지걸이와 휴지심만 있고 휴지는 없는 휴지걸이. 둘 다 '휴지가 없다'고는 말할 만한 상황이긴 하지만 분명 다르다고 할 수 있다.
Javascript에도 '없음'을 나타내는 값이 두 개 있다. undefined과 null. 이 둘은 언뜻 비슷한 것 같지만 사실 의미도 목적도 용도도 엄연히 다르다.
결론부터 말하자면 undefined는 변수에 값이 할당되지 않았다는 의미로 자바스크립트 엔진이 자동으로 할당하는 초깃값이며, null은 변수에 값이 명시적으로나 의도적으로 없음을 나타내는 값이다. undefined는 '할당된 값 자체가 없다'는 뜻으로 null과는 차이가 있다.
cf) undeclared는 변수 선언조차 된 적 없는 상태(not defined)를 뜻함. "Uncaught Reference Error: ...is not defined"
// 변수에 값을 할당하지 않음
let valueA;
console.log(valueA); // undefined
// (개발자가 의도적으로/명시적으로) 변수에 값이 없음을 나타냄
let valueB = null;
console.log(valueB); // null
그러니까 휴지걸이에 휴지가 애초에 존재하지 않는 것(undefined)과 휴지 없이 휴지심만 있는 것(null)과 같은 차이.
이제 본격적으로 둘의 차이점을 비교해 보자.
1. 데이터 타입 측면에서
undefined와 null이 전혀 다른 존재라는 점은 데이터 타입을 보면 알 수 있다. typeof 연산자로 변수의 데이터 타입을 확인하면 undefined는 'undefined'를 반환하고 null은 'object'를 반환한다.
cf) 자바스크립트에서 null이 원시 값(primitive value)임에도 typeof null === 'object' 인 건 초기 버전에서부터 이어져 오는 버그로, 과거 ECMAScript에 typeof null === 'null' 로의 수정 제안이 발의된 적 있었으나 거절당함.
boolean 타입으로 평가하면 undefined과 null 모두 false이다.
// 데이터 타입 확인
let valueA; // undefined
console.log(typeof valueA); // 'undefined'
let valueB = null; // null
console.log(typeof valueB); // 'object'
// boolean 평가
console.log(Boolean(valueA)); // false
console.log(Boolean(valueB)); // false
2. 메모리 측면에서
undefined과 null은 내부 메모리적인 측면에도 차이가 있다.
undefined는 변수가 초기화되지 않았거나 객체의 속성이 존재하지 않는 등의 경우에 자동 할당되는 값으로 이때의 변수는 메모리에 존재하지만 값이 없기 때문에 크기가 매우 작다.
null은 개발자가 의도적으로 값이 없음을 할당한 경우에 사용되는 값으로 이때의 변수는 빈 객체를 가리키는 객체 포인터기 때문에 주소 값을 나중에라도 받기 위해 크기가 있어 메모리를 차지하게 된다.
따라서 undefined 값을 가진 변수의 메모리 용량은 작고 null 값을 가진 변수의 메모리 용량은 크다고 할 수 있다(하지만 상대적인 비교일 뿐 실제로는 거의 차이가 없다고 봐도 무방함).
다만, 자바스크립트에서는 변수가 컴파일 시점이 아닌 런타임 시점에 동적으로 할당되기 때문에 변수의 크기는 런타임 환경에 따라 다를 수 있어 메모리 크기는 정확히 알 수 없다.
3) 의미적 사용 측면에서
앞서도 여러 차례 내용을 언급했지만 undefined와 null값은 의미적 사용 측면에서 가장 큰 차이를 보인다.
변수를 참조할 때 undefined가 반환되면 해당 변수의 값이 할당되지 않았음을 쉽게 파악할 수 있다. undefined는 자바스크립트에서 값이 할당되지 않은 변수를 나타내는 데 사용되어야 한다. 이것이 자바스크립트가 undefined를 도입한 이유.
/* 변수에 값이 할당되었는지 확인 */
let validVal = (v) => {
if (v === undefined) {
return "변수에 값이 할당되지 않음";
}
return v;
}
let val;
console.log(validVal(val)); // "변수에 값이 할당되지 않음"
null은 값이 없음을 명시적으로 또는 의도적으로 나타낼 때 사용되며, 아래와 같이 객체를 반환할 것으로 예상되지만 실제로 관련된 객체가 존재하지 않을 때의 값으로 null을 사용하기도 한다.
<body>
<h1>null 값</h1>
<p>
주로, API에서 객체를 반환할 것으로 예상되지만
실제로 관련된 객체가 존재하지 않을 때
null 값을 반환합니다.
</p>
<script>
const ele = document.querySelector(".temp");
/* HTML에 temp라는 클래스를 가진 요소가 없으므로 null을 반환 */
console.log(ele); // null
</script>
</body>
간혹 변수에 값이 없다는 의미로 undefined를 할당하는 경우가 있다. 하지만 의도적으로 undefined 값을 할당하는 것은 권장하지 않는다. 이는 undefined가 '변수에 값이 할당되어 있지 않다는 의미로 자바스크립트 엔진이 자동 할당하는 값'이라는 취지와 어긋날 뿐 아니라 혼란을 줄 수도 있다. 값이 없다는 걸 명시하고 싶을 땐 null을 쓰자.
참고
https://velog.io/@gonasooc/undefined-null-undeclared%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%97%90-
%EB%8C%80%ED%95%B4-%EC%84%A4%EB%AA%85%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94
https://helloworldjavascript.net/pages/160-null-undefined.html
'Javascript > Javascript' 카테고리의 다른 글
| [Javascript] 이벤트 추가 바로 알기 (0) | 2024.08.04 |
|---|---|
| [Javascript] document 객체 그리고 DOM 바로 알기 (0) | 2024.08.04 |
| [Javascript] Window 객체 바로 알기 (0) | 2024.08.01 |
| [Javascript] nullish 병합 연산자 '??' (0) | 2024.07.31 |
| [Javascript] console.log() 다시 보기 (0) | 2024.07.31 |
