이 두 타입은 모두 자바스크립트에서 '값이 없음'을 나타낸다.
undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다.
따라서 typeof()를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.
undefined
undefined는 원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다.
cf) undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다.
그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다.
아래의 경우에 변수가 undefined를 반환한다.
- 값을 할당하지 않은 변수
- 메서드와 선언에서 변수가 할당받지 않은 경우
- 함수가 값을 return 하지 않았을 때
결론적으로 undefined는 데이터 타입이자, 값을 나타냅니다.
var jaesung 과 같이 변수를 선언하면 jaesung 변수에 undefined를 할당하게 됩니다.
여기서 중요한 것이 변수의 초깃값이 undefined라는 점이다. 비록 변수만 선언했지만 값을 가진다.
그렇기 때문에 값이면서 데이터 타입인 것입니다.
null
null은 원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다. undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.
- typeof undefined는 출력하면 undefined이다.
- typeof null은 출력하면 object이다.
하지만 이는 여전히 원시 타입(primitive value)로, JavaScript에서는 버그로 간주한다. - undefined == null은 true이다.
null 타입 변수의 경우는 명시적으로 값이 비어있음을 나타내는데 사용한다.
다시 말해서, 아무것도 참조하고 있지 않다라는 의미가 담겨 있으며 주로 객체를 담을 변수를 초기화할 때 많이 사용합니다.
하지만 null 역시 undefined와 마찬가지로 값이며 데이터 타입이지만
분명한 차이점은 undefined는 변수를 선언만 하더라도 할당되지만 null은 변수를 선언한 후에 null로 값을 바꾼다는 점입니다.
var nullVar = null; // null 타입 변수를 생성
null과 undefined의 차이
null과 undefined가 가진 차이점은 변수에 값이 null이라면 변수가 선언되고 null이라는 값이 주어진 상태이고 undefined라면 변수가 선언되고 아무것도 하지 않은 상태입니다.
즉 null은 직접적으로 값이 없어라고 말한 상태이지만 undefined는 아무것도 하지 않은 상태라고 말할 수 있기 때문에 프로그래머가 의도적으로 값이 주어지지 않은 상태의 동작을 개발하려는 것이 아니라면 undefined의 사용은 부적절하다고 이야기할 수 있습니다.
그렇다면 개발자의 입장에서 '없음'을 저장하기 위해 둘 중 어떤 것을 써야 할까??
undefined를 쓴다고 가정해보면, 아래와 같은 코드는 그 의미가 불분명해집니다.
let foo; // 값을 대입한 적 없음
let bar = undefined; // 값을 대입함
foo; // undefined
bar; // undefined (??)
let obj1 = {}; // 속성을 지정하지 않음
let obj2 = {prop: undefined}; // 속성을 지정함
obj1.prop; // undefined
obj2.prop; // undefined (??)비록 undefined가 '없음'을 나타내는 값일지라도, 대입한 적 없는 변수 혹은 속성과, 명시적으로 '없음'을 나타내는 경우를 구분을 할 수 있어야 코드의 의미가 명확해 질 것. 프로그래머의 입장에서 명시적으로 부재를 나타내고 싶다면 항상 null을 사용하는 것이 좋습니다.
다만, 객체를 사용할 때 어떤 속성의 부재를 null을 통해서 나타내는 쪽보다는, 그냥 그 속성을 정의하지 않는 방식이 간편하므로 더 널리 사용된다.
// 이렇게 하는 경우는 많지 않습니다.
{
name: 'Jaesung',
address: null
}
// 그냥 이렇게 하는 경우가 많습니다.
{
name: 'Jaesung'
}
// 어쨌든 이렇게 하지는 말아주세요.
{
name: 'Jaesung',
address: undefined
}Null Check
null이나 undefined는 어떤 변수에도, 어떤 속성에도 들어있을 수 있기 때문에 우리는 코드를 짤 때 값이 있는 경우와 없는 경우 (즉 null 혹은 undefined인 경우)를 모두 고려해서 코드를 짜야 할 필요가 있다.
어떤 값이 null 혹은 undefined인지 확인하는 작업을 null check라고 한다.. null check는 간단히 등호를 이용해서 할 수 있다.
function printIfNotNull(input) {
if (input !== null && input !== undefined) {
console.log(input);
}
}