본문 바로가기
개발/개발 필기

JavaScript에 재미있는 현상

by nicksoon 2024. 12. 2.
반응형

미디엄 블로그를 보다가

Why 1==1 is true but 128==128 is false in Java 

이라는 제목의 블로그 글을 보았어요 

이유는 간단해요 java  자료형 integer는 -128 부터 127 까지라 안된다고 하네요 그래서 .equals()를 사용하라고 하네요

 

그럼 JavaScript에는 이런 재미있는 증상이 없을까 해서 기록해 봅니다.

우선 ! JavaScript에서도 흥미로운 동작이 발생하지만, Java처럼 명시적인 캐싱 메커니즘은 없습니다.(아쉽)

그러나 타입 변환, 객체 동작, 그리고 프리미티브와 객체 간의 비교에서 재미있는 현상이 있습니다. 몇 가지 예시를 살펴보죠.

 

1. 숫자 비교 (== vs ===)

JavaScript는 == 연산자와 === 연산자가 다르게 동작합니다:

  • ==는 느슨한 동등 비교로, 타입 변환을 시도합니다.
  • ===는 엄격한 동등 비교로, 타입 변환 없이 값과 타입을 모두 비교합니다.
console.log(128 == "128");  // true (타입 변환 발생)
console.log(128 === "128"); // false (타입과 값이 다름)

2. NaN과 NaN 비교

JavaScript에서 NaN은 "숫자가 아님(Not a Number)"을 나타내는 특수 값입니다. 놀랍게도 NaN은 자기 자신과도 같지 않다고 평가됩니다.

console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true (ECMAScript 6+에서 도입된 안전한 비교)

 


3. 객체와 프리미티브 간 비교

객체와 프리미티브를 비교할 때, 객체는 내부적으로 프리미티브 값으로 변환됩니다. 이로 인해 예상치 못한 결과가 나올 수 있습니다.

console.log([] == 0); // true (빈 배열이 숫자 0으로 변환)
console.log([] == ""); // true (빈 배열이 빈 문자열로 변환)
console.log([1, 2] == "1,2"); // true (배열이 문자열로 변환)

4. null과 undefined

null과 undefined는 느슨한 동등 비교 시 같은 값으로 평가되지만, 엄격한 동등 비교에서는 다릅니다.

console.log(null == undefined); // true
console.log(null === undefined); // false

5. 객체 참조 비교

JavaScript에서 객체를 비교할 때는 **참조(reference)**를 비교합니다. 두 객체가 같은 내용이라도 참조가 다르면 false가 나옵니다.

const obj1 = { value: 128 };
const obj2 = { value: 128 };
console.log(obj1 == obj2);  // false (다른 참조)
console.log(obj1 === obj2); // false (다른 참조)

const obj3 = obj1;
console.log(obj1 === obj3); // true (같은 참조)

6. Object.is와의 비교

ECMAScript 6에서는 **Object.is**를 통해 엄격한 동등 비교(===)보다 더 직관적인 비교를 할 수 있습니다. 예를 들어, 0과 -0은 ===로 같지만, Object.is로는 다르게 평가됩니다.

console.log(0 === -0);       // true
console.log(Object.is(0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

 

JavaScript 를 다룬다면 한번은 본 내용이지만 또 예외처리 할 때 매우 중요하지만 빼먹더라고요 

그래서 필기겸 다시 기록해 봅니다

반응형