개발을 진행하면서, 특정 변수에 값이 있는지 여부를 판단해야 될 일이 많았다. 지금까지 variable === undefined 를 사용했으나, undefined와 null의 차이를 제대로 알지 못하고 무작정 사용했던 것 같아 그 차이를 알아보고자 한다.
null
null은 비어있거나, 존재하지 않는 값의 Javascript 리터럴 표현이다.
Javascript의 원시값들 중의 하나로, 반드시 할당되어야 한다.
let a = null;
console.log(a); // nullundefined
undefined가 보여지는 경우는 일반적으로 세 가지가 있다.
1. 변수가 선언 되었지만 할당되지 않은 경우
2. 값 자체가 undefined로 할당된 경우
3. 객체에서 존재하지 않는 속성을 찾는 경우
let b;
console.log(b); // undefined
let c = undefined;
console.log(c); // undefined
var d = {};
console.log(d.name); // undefinednull과 undefined의 유사점
null과 undefined는 둘 다 javascript의 여섯 가지 기본 값에 포함되며, javascript의 여섯 가지 falsy value에 포함된다.
Six primitive values in javascript
(이 여섯 가지 이외의 다른 값들은 다 객체이다. objects, functions..)
- Boolean
- Null
- Undefined
- Number
- String
- Symbol
Six falsy values in javascript
(이 여섯 가지의 값을 제외한 나머지 값은 truthy로 간주된다.)
- false
- 0 (zero)
- "" (empty string)
- null
- undefined
- NaN (Not a Number)
하지만 null !== undefined 이다.
자바스크립트 측의 실수로 인해 null == undefined 에서 true가 반환되기는 하지만..
코드를 통해 보는 null과 undefined의 차이
let logHi = (str = 'hi') => {
console.log(str);
}
logHi(); // hi
logHi('bye'); // bye
logHi(undefined); // hi
logHi(null); // null왜 이런 결과가 나오는 것일까?
기본적으로 가지고 있는(제공되는) 변수 값이 있다면, undefined는 그 값을 사용하고 null은 사용하지 않기 때문이다.
그럼 체크는 어떻게 하나요?
javascript의 null 값을 체크하기 위해서는 NOT연산자를 사용한다.
if (variable === null) 이 조건문은 오직 null인 변수만 통과할 수 있다.
("", undefined, false, 0, NaN을 체크할 수 없다.)
주의할 점은 자바스크립트는 0도 false로 간주하기 때문에 0을 true로 간주하고 싶다면 조건을 추가로 작성해 주는 것이 좋다. variable !== 0
만약 어떤 값이냐에 관계없이 변수가 선언되었는지 확인하고 싶거나, 객체 안에 속성이 존재하는지를 확인하고 싶으면 in 연산자를 쓰는 것이 안전한 방법이다. 속성 in 객체명
References
https://stackoverflow.com/questions/3390396/how-can-i-check-for-undefined-in-javascript
https://codeburst.io/javascript-null-vs-undefined-20f955215a2
