[JavaScript] undefined 와 null의 차이점

 

JavaScript에서 undefined 와 null 은 모두 "없다" 라는 것을 의미하지만 둘은 다른 값 입니다

 

undefined 와 null의 차이점에 대해서 알아보자

---

undefined

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화됩니다. 다시 말해, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(대부분 비어 있지 않고 쓰레기 값이 들어 있다)로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화 합니다. 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환됩니다.

 

var foo;
console.log(foo); // undefined

 

이처럼 undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값입니다. 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화 되지 않은 변수라는 것을 알 수 있습니다.

 

그렇다면은 변수에 값이 없다는 것을 명시하고 싶을 때는 어떻게 하면 좋을까? 그런 경우에는 undefned를 할당하는 것이 아닌 null 을 할당합니다.

 

---

null

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용합니다. 변수에 null값을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미입니다. 이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행할 것입니다.

 

var foo = 'KangSinGyu'

foo = null

 

함수가 유효한 값을 반환할 수 없는 경우 명시저으로 null을 반환하기도 합니다. 예를 들어, HTML 요소를 검색해 반환하는 document.querySelector 메서드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환합니다.

 

// ... html코드중 garbageKey 가 없을때
var element = document.querySelector('garbageKey');
console.log(element) // null

 

---

정리

 

undefined

1. 변수는 선언이 되었지만 '할당된 값 자체가 없다'라는 의미

2. 변수를 참조할 때 undefined가 반환되면 해당 변수의 값이 초깃값으로 할당되지 않았음을 파악 가능

3. let x = undefined; 처럼 undefined를 변수에 할당하는 것은 권장 x

4. 자바스크립트에서 값이 할당되지 않은 변수를 나타내는데 사용

 

null

1. 변수가 선언될 당시 '값이 없음'을 명시적, 혹은 의도적으로 가리킨다는 의미

2. 변수를 참조할 때 null이 반환되면 변수에 값이 명시적으로나 의도적으로 없음을 파악 가능

3. let x = null; 처럼 개발자가 변수에 값이 없다라는 것을 명시하고자 할 때느느 null 사용을 권장

4. 주로 API에서 활용되며, 객체를 반환할 것으로 예상되지만 실제로 관련된 객체가 존재하지 않을 때의 값으로 null을 사용