[JavaScript] 헷갈리는 개념

📌'==' 연산자와 '===' 연산자

== 연산자 : 자료형 변환 뒤의 값이 같으면 true 반환 (abstract comparison operator)
=== 연산자 : 값과 자료형이 모두 같아야 true 반환 (strict comparison operator)

'0' == 0; // true
'0' === 0; // false

null == undefined; // true
null === undefined; // false

NaN == NaN; // false;
NaN === NaN; // false;
// NaN : Not a Number (숫자가 아니다)
// 부동소수점 형식으로 인코딩된 기호화 항목
// NaN은 NaN을 포함한 어떠한 수와도 같지 않다

'===' 연산자가 더욱 엄격한 비교를 하기 때문에 혼란이 덜하고 안전하며, '==' 연산자의 형변환 과정이 별도로 필요 없기 때문에 처리 속도가 더 빠르다는 특징이 있다. 이 때문에 자바스크립트에서 변수, 값 등 무언가 비교를 할 때는 '==='의 사용이 권장된다.

📌null과 undefined

null : 명시적으로 값이 없음을 표현하는 자료형
undefined : 값이 할당되지 않은 상태의 자료형

let obj = null;  // null
let foo;         // undefined

undefined == null;    // true
undefined === null;   // false
!undefined === !null; // true

참고로 알아보는 null의 희귀한 특성,,,,,,

null === false; // false
!null;          // true
!null === true; // true

// null은 수학적으로 0이어서 연산이 가능
null + 123;      // 123
undefined + 123; // NaN

다시 null과 undefined로 돌아오면!!! 둘다 값이 없음을 나타내지만 콘솔을 찍어보면 자료형이 다름을 알 수 있다. (null의 타입이 객체임에 주의! 이는 자바스크립트가 인정한 내부 오류이다.)

console.log(typeof null); // object
console.log(typeof undefined); // undefined

어떠한 속성이나 값의 부재를 명시적으로 나타내고자 할 때는 null을 사용하는 것이 권장된다. null은 값이 없음을 직접적으로 나타내고 있지만 undefined는 아직 할당을 안한건지, 원래 의도한 값이 없는건지 식별하기 애매할 수 있기 때문이다.

📌truthy 값과 falsy 값

(알다가도 모를 js.........)

true와 false로 이루어진 boolean 타입으로 형변환을 했을 때 true로 반환되는 값을 truthy, false로 반환되는 값을 falsy한 값이라고 한다. falsy한 값만 기억해두면 truthy는 그 외 나머지라고 생각하면 된다.

falsy한 값 : 0, " ", false, null, undefined, NaN

console.log(typeof NaN); // number
console.log(Boolean(Nan)); //false

...NaN의 형태는 number지만 falsy하다.....
빈 배열과 빈 객체 또한 truthy하다는 점에 주의하자!!

console.log(Boolean([])); // true;
console.log(Boolean({})); // false;

참고한 자료

• Udemy-클린코드 자바스크립트