JavaScript Comparisons
JavaScript Comparisons: 비교 연산의 이해와 활용
JavaScript에서 **비교 연산자(Comparison Operators)**는 두 값을 비교하여 참(True) 또는 **거짓(False)**을 반환하는 연산자입니다. 비교 연산자는 조건문, 논리 연산, 데이터 검증 등에서 중요한 역할을 합니다. 이 가이드는 JavaScript의 비교 연산자와 그 활용 방법에 대해 설명합니다.
1. 주요 비교 연산자
1.1. == (동등 연산자)
== 연산자는 두 값이 동등한지 비교합니다. 이때, 자동 형변환(타입 강제 변환)이 발생할 수 있어 값이 같으면
true를 반환합니다.
console.log(5 == "5"); // 출력: true (자동 형변환이 발생하여 동등)
console.log(0 == false); // 출력: true (0은 false로 변환됨)
console.log(null == undefined); // 출력: true (둘 다 빈 값으로 취급)
1.2. === (일치 연산자)
=== 연산자는 두 값이 엄격하게 일치하는지 비교합니다. 형변환 없이 값과 데이터 타입이 모두 같아야
true를 반환합니다.
console.log(5 === "5"); // 출력: false (형이 다름)
console.log(0 === false); // 출력: false (타입이 다름)
console.log(null === undefined); // 출력: false (타입이 다름)
1.3. != (부등 연산자)
!= 연산자는 두 값이 동등하지 않은지 비교합니다. 자동 형변환이 일어나고, 값이 다르면 true를 반환합니다.
console.log(5 != "5"); // 출력: false (형변환 후 동등)
console.log(0 != false); // 출력: false (형변환 후 동등)
1.4. !== (불일치 연산자)
!== 연산자는 두 값이 엄격하게 일치하지 않는지 비교합니다. 값 또는 데이터 타입이 다르면 true를 반환합니다.
console.log(5 !== "5"); // 출력: true (형이 다름)
console.log(0 !== false); // 출력: true (타입이 다름)
1.5. > (크다) / < (작다)
두 값을 비교하여 왼쪽 값이 크면 true(>), 작으면
true(<)를 반환합니다.
console.log(10 > 5); // 출력: true
console.log(3 < 1); // 출력: false
1.6. >= (크거나 같다) / <= (작거나 같다)
두 값을 비교하여 크거나 같으면 true(>=), 작거나 같으면
true(<=)를 반환합니다.
console.log(10 >= 10); // 출력: true
console.log(5 <= 2); // 출력: false
2. 자동 형변환과 비교
JavaScript에서는 비교 연산을 할 때 자동 형변환이 발생할 수 있습니다. 값이 비교될 때, 자바스크립트는 필요에 따라 값의 타입을 강제 변환하여 비교를 수행합니다.
2.1. 문자열과 숫자의 비교
문자열과 숫자를 비교할 때, JavaScript는 문자열을 숫자로 변환합니다.
console.log("5" > 3); // 출력: true ("5"가 숫자 5로 변환됨)
console.log("10" == 10); // 출력: true (문자열 "10"이 숫자 10으로 변환됨)
2.2. 불리언과 숫자의 비교
불리언 값은 숫자로 변환됩니다. true는 1, false는 0으로 간주됩니다.
console.log(true == 1); // 출력: true (true는 1로 변환됨)
console.log(false == 0); // 출력: true (false는 0으로 변환됨)
3. null과 undefined 비교
null과 undefined는 특수한 값으로, 서로 비교할 때 주의해야 합니다.
3.1. null과 undefined의 동등성 비교
null과 undefined는 ==로 비교하면 동등하다고 간주됩니다. 그러나, ===로
비교하면 엄격하게 일치하지 않음으로 간주됩니다.
console.log(null == undefined); // 출력: true (동등)
console.log(null === undefined); // 출력: false (일치하지 않음)
3.2. null과 숫자의 비교
null은 숫자 0으로 변환되어 비교됩니다. 따라서 null은 숫자와 비교할 때 주의가 필요합니다.
console.log(null > 0); // 출력: false
console.log(null == 0); // 출력: false
console.log(null >= 0); // 출력: true (null이 0으로 변환됨)
3.3. undefined와 숫자의 비교
undefined는 숫자로 변환되지 않으므로, 숫자와의 비교는 항상 false입니다.
console.log(undefined > 0); // 출력: false
console.log(undefined < 0); // 출력: false
console.log(undefined == 0); // 출력: false
4. 객체와 비교
객체를 비교할 때는 **객체의 참조(메모리 주소)**를 비교합니다. 객체의 내용이 같더라도 서로 다른 객체는 false를 반환합니다.
const obj1 = { name: "Alice" };
const obj2 = { name: "Alice" };
console.log(obj1 == obj2); // 출력: false (서로 다른 객체)
console.log(obj1 === obj2); // 출력: false (서로 다른 객체)
const obj3 = obj1;
console.log(obj1 == obj3); // 출력: true (같은 참조)
console.log(obj1 === obj3); // 출력: true (같은 참조)
5. 활용 예시
5.1. 조건문에서 비교 연산 사용
비교 연산자는 조건문에서 주로 사용됩니다. 아래는 숫자를 비교하여 조건을 처리하는 예시입니다.
const age = 18;
if (age >= 18) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}
// 출력: "성인입니다."
5.2. 삼항 연산자를 사용한 비교
삼항 연산자를 사용해 비교를 간단히 표현할 수 있습니다.
const isAdult = age >= 18 ? "성인입니다." : "미성년자입니다.";
console.log(isAdult); // 출력: "성인입니다."
6. 비교 연산에서의 주의점
- 자동 형변환을 피하려면
===사용:==는 자동 형변환을 수행하기 때문에, 예상치 못한 결과를 피하려면 항상===를 사용하는 것이 좋습니다. null과undefined:null과undefined는 특별한 값이므로, 비교할 때 주의가 필요합니다. 항상===로 비교하는 것이 안전합니다.- 객체의 비교: 객체는 참조(주소)를 비교하므로, 객체의 내용이 아닌 참조가 동일한지 확인해야 합니다.
요약
- 동등 연산자(
==): 두 값이 자동 형변환을 통해 동등한지 확인합니다. - 일치 연산자(
===): 두 값이 형변환 없이 값과 타입이 모두 일치하는지 확인합니다. - 비교 연산자(
>,<,>=,<=): 두 값을 크기 비교합니다. null,undefined: 서로는 동등(==), 하지만 다른 값과는 형변환 없이 비교해야 합니다.- 객체 비교: 객체는 참조(메모리 주소)를 기준으로 비교합니다.
JavaScript의 비교 연산자를 잘 활용하면, 논리적인 흐름을 제어하고 데이터의 유효성을 검증하는 데 큰 도움이 됩니다. 자동 형변환의 동작 방식을 이해하고 적절한 연산자를 사용하는 것이 중요합니다.