미디엄 블로그를 보다가
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 를 다룬다면 한번은 본 내용이지만 또 예외처리 할 때 매우 중요하지만 빼먹더라고요
그래서 필기겸 다시 기록해 봅니다
'개발 > 개발 필기' 카테고리의 다른 글
마케팅 회사에서 개발자로 일하며 얻은 성장과 경험 (4) | 2024.12.03 |
---|---|
Recoil을 사용한 상태 관리 경험: 왜 우리는 Recoil을 선택했을까? (1) | 2024.12.03 |
효율적인 배열 비교: Set을 사용해 코드 개선하기 처음에는 조금 복잡하게 코드를 작성했지만, 개선을 통해 훨씬 깔끔하고 효율적인 코드로 만들 수 있었어요. 이 과정을 함께 살펴볼까요? (2) | 2024.11.28 |
프론트엔트 지식 GPT질문 (5) | 2024.11.26 |
센트리 사용 (1) | 2024.11.24 |