JavaScript Null & Undefined
Null & Undefined
JS 에서는 ‘값이 없음’을 나타내는 값이 두 가지가 있는데, 바로 null과 undefined입니다.
두 값의 의미는 비슷하지만, 각각이 사용되는 목적과 장소가 다릅니다.
JS 는 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환합니다.
const obj = {};
obj.props; // undefined
let foo;
foo; // undefined
typeof null; // 'object'
typeof undefined; // 'undefined'
null 은 객체이며 유형이 null 입니다.
undefined 는 객체가 아니며 유형은 정의되지 않았습니다.
프로그래머의 입장에서 명시적으로 부재를 나타내고 싶으면 항상 null 을 사용하는 것이 좋습니다.
다만 어떤 객체의 속성을 나타낼 때의 부재는 null 을 쓰기 보다 정의하지 않음이 더 간편하고 좋습니다.
// 보통은 이렇게 잘 하지 않습니다.
{
name: "이근환";
car: null;
}
// 이건 더더욱.. 하지 않도록 합니다
{
name: "이근환";
car: undefined;
}
// 이렇게 애초에 객체의 속성의 부재는 기술하지않는 것이 좋습니다.
{
name: "이근환";
}
Null Check
null이나 undefined는 어떤 변수에도, 어떤 속성에도 들어있을 수 있기 때문에 코드를 짤 때
값이 있는 경우와 없는 경우를 모두 고려해서 작성해야합니다.
어떤 값이 null 또는 undefined 인지 확인하는 작업을 null check 이라고 합니다.
null check 은 간단히 등호를 이용해서 할 수 있습니다.
function printIfNotNull(input) {
if (input !== null && input !== undefined) {
console.log(input);
}
}
/* 이렇게 함수를 통하여 input이 null과 undefined가 아닐 경우 콘솔창에 표시되는지
여부를 통해서 확인할 수 있습니다. 다만 매번 그러기엔 비효율적입니다. */
이렇게 길게 확인을 하지않고 간편하게 확인할 수 있습니다.
// 아래의 세 개의 식은 완전히 같은 의미입니다.
input !== null && input !== undefined;
input !== null;
input !== undefined;
// 아래의 새 개의 식은 완전히 같은 의미입니다.
input === null || input == undefined;
input === null;
input === undefined;
JS 에는 === 말고 ==도 있습니다.
공식적인 이름은 3 개짜리 등호는 strict equality comparison operator,
2 개짜리 등호는 abstract equality comparison operator 입니다.
이름에서도 알 수 있듯이 대개 ===는 값이 정확히 같아야지만 true 를 반환하고,
==는 정확하지 않아도 true 를 반환할 때가 가끔 있습나다.
null === undefined; // false
null == undefined; // true
따라서 null check 를 할 때 만큼은 ==를 사용하는 것이 편합니다.
다른 모든 경우에서는 ===를 사용하는 것이 좋습니다.
===은 비교연산시 타입의 유형까지 일치하는지를 확인하고 결과를 반환하는 반면 ==은 비교연산시 타입의 유형이 다를 경우 타입을 같은 타입으로 형변환 하여 결과를 반환합니다.
0 === "0"; // false
0 === []; // false
"0" === []; // false
0 == "0"; // true
0 == []; // true
"0" == []; // false - "0"을 boolean type으로 변환하면 값이 true가 되는 반면 []은 boolean type으로 변환하면 값이 false가 되기 때문입니다.
2. Today I Found Out
null과 undefined에 대해서 공부하면서 둘의 공통점과 차이점을 확실하게 알 수 있었습니다.
콘솔 로그를 통해 null과 undefined을 자주 접했었는데 이제 확실하게 알고 나니
로직을 짤때있어서 콘솔창에 뜨는 null과 undefined가 단순히 값이 없음이 아닌
많은 정보를 주고 있다는 것도 느낄 수 있었습니다.
3. refer
https://helloworldjavascript.net/pages/160-null-undefined.html
https://code.i-harness.com/ko/q/621a29
https://hashcode.co.kr/questions/1386/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-null%EA%B3%BC-undefined%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AD%94%EA%B0%80%EC%9A%94