TIL 77 | JS Falsy 값 (undefined, null, NaN)

mygomi·2021년 5월 22일
0

JavaScript

목록 보기
21/22
post-thumbnail

Falsy값 중 undefined, null, NaN에 대해 알아보고 비교해보려한다.

Falsy

boolean 형식으로 변환했을 때 false가 되는 값이다.
아래 나열된 값들이 Falsy이며 이 외 값은 모두 Truthy이다.

  • undefined
  • null
  • NaN
  • 0, -0
  • "", '', ``
  • false

undefined

"값이 없음, 초기화한 적 없음"
선언은 되었으나 값이 할당 되지 않은 상태
객체에서 존재하지 않는 속성을 접근하는 경우

Number(undefined) // NaN
Boolean(undefined) // false
undefined === undefined // true
typeof undefined // undefined

적용예시

// 초기값이 할당되지 않은 변수
let x;
console.log(x); // undefined

// 초기값이 할당되지 않은 매개변수
function foo (x, y) {
  console.log(x); // 1
  console.log(y); // undefined
}
foo(1);

// 객체에서 존재하지 않는 속성을 접근하는 경우
const obj = {
  name: 'gomi'
};
console.log(obj.age); // undefined

null

"값이 없음"
명시적으로 값이 비어있음을 나타내는데 사용
아무것도 참조하고 있지 않다라는 의미가 담겨 있으며 주로 객체를 담을 변수를 초기화할 때 많이 사용
초기화 해주어야 가질 수 있는 상태 (null이라는 값을 할당)

Number(null) // 0 
Boolean(null) // false
null === null // true
typeof null // object
  • typeof null 결과가 object인 것은 자바스크립트의 초기버전에서부터 이어진 버그 참고자료
    null 검사 시 typeof를 사용하지 않도록 주의해야 한다.

📌 undefined과 null

차이점

둘 다 없음을 나타내는 값이지만
undefined는 대입한 적 없는 변수 혹은 속성에 사용되고
null은 명시적으로 값이 없음을 나타내고자 할 때 의도를 갖고 변수에 null을 할당한다.

주의점

  • 동등 연산자를 이용해 비교하여야 한다.
    undefined과 null은 둘 다 false이므로 undefined과 == null 실행 시 true가 반환된다.
    undefined과 === null 동등 연산자를 사용해야 false가 반환된다.
  • NaN생성의 가능성이 있다면 비교연산을 행해서는 안된다.
    NaN과의 비교연산에서 모두 false를 반환한다.
console.log(NaN==undefined);//false
console.log(NaN==null);//false
console.log(undefined==null);//true

NaN

"Not A Number"
주로 숫자가 아닌 값을 숫자로 치환하거나 나누기 연산 등에서 발생하곤 한다. ex) Number("str")

Number(undefined | string) // NaN 
Boolean(NaN) // false 
NaN === NaN // false
typeof NaN // number
  • NaN === NaN으로 비교할 수 없다. isNaN()이라는 전용함수를 사용해 검사해야 한다.
isNaN(NaN) // true
isNaN(0) // false
isNaN('0') // true

주의점

  • isNaN함수는 문자열이나 객체를 입력해도 true를 반환한다.

참고자료
RyuK 성장 일지
Web Club

profile
안 되는 이유보다 가능한 방법을 찾을래요

0개의 댓글