undefined, null, NaN의 차이 알아보기
JavaScript를 다루면서 undefined, null, NaN 이라는 값을 자주 보게 된다. 이 값들은 JavaScript를 다루면서 가장 중요한 값들이고 각각 중요한 의미를 담고 있다. 이번 글에서는 이들의 차이에 대해 다루어 보고자 한다.
undefined 이란 무엇인가?
초기화가 되지 않을 시 자동으로 할당되는 값 undefined
undefined는 변수에 값을 설정하지 않은 경우 자동으로 할당되는 값이다. const는 값을 만들면서 초기화를 같이 해야 하므로 undefined가 될 수 없지만 let이나 var로 선언된 변수는 변수 설정과 동시에 값을 할당하지 않아도 되므로 undefined가 될 수 있다.
예를 들어 아래와 같이 변수를 선언하는 경우 이를 실행해보면 undefined가 출력되는 것을 볼 수 있다.
let variable
console.log(variable)
undefined는 원시 타입으로 그 자체로 타입이다.
아래와 같이 typeof를 사용해 undefined를 출력해보자.
let variable
console.log(typeof variable)
그러면 아래와 같이 다시 undefined가 나오는 것을 볼 수 있다. undefined는 JavaScript에서 제공하는 원시 타입 중 하나이기 때문이다.
함수에서도 만들어지는 undefined
함수에 return이 없어서 반환 값이 없는 경우에도 undefined가 자동으로 할당된다. 아래와 같이 return 값이 없는 코드를 만들어 실행해보자
console.log(typeof returnUndefined())
function returnUndefined() {
}
그러면 undefined가 반환되는 것을 볼 수 있다.
undefined 정리하기
undefined는 변수에 값이 할당되지 않거나, 함수에 반환값이 없는 경우 반환되는 데이터 타입이다. JavaScript의 원시 타입이므로 어떤 때 undefined가 설정되는지 잘 알고 있도록 하자.
null 이란 무엇인가?
의도적으로 객체에 값이 없음을 나타내는 null
null은 의도적으로 객체에 값이 없을을 나타내는 값이다. null은 프로그래머가 직접 할당해야 한다. 예를 들어 아래와 같이 null이 할당될 수 있다.
let nullVariable = null
console.log(nullVariable)
값을 할당할 때 쓸 수 있으므로 null은 const에도 할당할 수 있다. const는 초기화 시 값을 할당하고 변하지 않는 값이므로 const에도 아래와 같이 null이 할당될 수 있다.
const constNullVariable = null
console.log(constNullVariable)
null의 타입은 object이다
undefined의 타입은 undefined였던 것과는 다르게 null의 타입은 object이다. 아래 코드와 같이 typeof를 사용해 null의 타입을 출력해보도록 하자.
const nullVariable = null
console.log(typeof nullVariable)
그러면 출력값은 아래 그림과 같이 object로 나온다.
나는 도대체 왜 null이 object일까 이해가 가지 않았다. Kotlin, Java 등 다른 언어들에서는 null을 변수에 값이 할당되지 않은 것을 표현하는 특별한 값을 의미하는데, 왜 JavaScript에서는 객체로 다루는 걸지 이해가 가지 않았다. 그래서 알아보니 초기 JavaScript 설계에서 null의 값이 객체로 구현되었고, 이 오류는 하위 호환성을 위해 수정되지 않았다고 한다.
null 정리하기
- null은 의도적으로 객체에 값이 할당되지 않음을 나타내는 값이다.
- JavaScript에서 null의 데이터 타입은 object이다.
NaN 이란 무엇인가?
수학 연산에서 유효하지 않은 값을 반환할 때 쓰는 NaN
NaN은 수학 연산에서 유효하지 않은 값을 반환할 때 반환된다. Java나 Kotlin 같은 언어들은 잘못된 연산이 들어갔을 때 Number와 관련된 Exception을 Throw 한다. 하지만 JavaScript는 반환 값을 유효하지 않은 값으로 준다.
예를 들어 아래와 같이 "a"*2 연산을 하는 코드를 만들어보자.
let NaNVariable = "a" * 2;
console.log(NaNVariable);
JavaScript는 유효하지 않은 연산이기 때문에 NaN을 반환하고 NaNVairable을 출력해보면 NaN이 나오는 것을 볼 수 있다.
JavaScript에서 유효한 연산은 매우 광범위하다.
다만 JavaScript는 다른 언어들과 다르게 연산을 매우 광범위하게 유효하다고 판단한다. 예를 들어 아래와 같이 String 타입의 "5"와 2를 곱하는 연산을 한다고 해보자.
let notNaNVariable = "5" * 2;
console.log(notNaNVariable);그러면 notNaNVariable은 10을 반환 받는다. 이유는 곱셈 연산이 들어가면 내부적으로 String이 number로 타입 변환이 일어나기 때문이다.
NaN의 타입은 무엇인가?
그러면 NaN의 타입을 무엇인가? 이를 테스트 하기 위해 typeof 연산자를 사용해보자.
let NaNVariable = "a" * 2;
console.log(typeof NaNVariable);
바로 신기하게도 Number 타입이다. 유효하지 않은 연산인데도 Number 타입으로 반환이 된다.
NaN 정리하기
- NaN은 유효하지 않은 연산일 때 반환되는 값이다.
- NaN의 타입은 Number이다.
