JS에서의 비교연산자

비교연산자

비교연산자는 두 값의 동등 여부나 대소 관계를 비교하여 결과를 반환하는 연산자를 말합니다.

연산자는 불리언(Boolean) 값 (true 또는 false)을 반환하며, 조건문(if, while 등)이나 삼항 연산자 등의 논리 흐름을 제어하는 데 쓰입니다.

예를 들어 5 < 10은 true를 반환하고, 5 == 10은 false를 반환합니다.

비교 연산자	설명 (의미)	예시	결과
==	동등(느슨한 동등)	5 == "5"	true
===	동등(엄격한 동등)	5 === "5"	false
!=	부등(느슨한 부등)	5 != "5"	false
!==	부등(엄격한 부등)	5 !== "5"	true
>	보다 큼	7 > 3	true
<	보다 작음	7 < 3	false
>=	크거나 같음	5 >= 5	true
<=	작거나 같음	4 <= 2	false

위 표에서 보듯이, ==와 ===는 모두 같은지 비교하지만 동작이 다릅니다.

마찬가지로 !=와 !==는 같지 않은지 비교(부등 비교)를 수행하지만 동작 방식에 차이가 있습니다.

<, > 등의 연산자는 숫자의 대소를 비교하며 문자열에도 사용할 수 있습니다.

== (느슨한 동등): 두 값의 값 자체만 비교합니다.

=== (엄격한 동등): 두 값의 값과 타입 모두를 비교합니다.

!= (느슨한 부등): ==의 반대 개념으로, 두 값이 느슨한 동등으로 같지 않다면 true를 반환합니다.

!== (엄격한 부등): ===의 반대입니다. 두 값이 엄격하게 일치하지 않으면 true를 반환합니다.

> , < (크다/작다): 좌측 값이 우측 값보다 큰지(>), 혹은 작은지(<) 비교합니다. 주로 숫자 비교에 사용되며, 문자열을 비교할 때는 사전식(lexicographical) 순서로 비교합니다.

>= , <= (크거나 같다/작거나 같다): 이상(greater or equal) 혹은 이하(less or equal) 비교를 합니다. a >= b는 a가 b보다 크거나 같으면 true, a <= b는 a가 b보다 작거나 같으면 true입니다. 숫자 비교에 주로 쓰이며, 역시 문자열 비교 시 사전식 순서를 따릅니다.

보통 느슨한 비교는 잘 사용하지 않습니다. 대부분의 경우에서 느슨한 비교는 결과 예측이 어려워서 권장하지 않습니다. 따라서 엄격한 비교를 통해 타입까지 체크 하는 것이 좋습니다.

• 자바스크립트의 암묵적 형 변환이는 비교 연산을 수행할 때 필요에 따라 자바스크립트 엔진이 자동으로 피연산자의 타입을 변환하는 것입니다.또한 >나 < 같은 대소 비교 연산자도 문자열과 숫자를 비교할 때 자동으로 형 변환을 일으킬 수 있습니다.
• 특히 느슨한 동등(== 및 !=) 연산자는 다양한 타입의 값을 비교할 때 이러한 변환을 수행합니다.
• 자바스크립트의 독특한 부분 중 하나는 암묵적 형 변환(타입 강제 변환)입니다.

사용 예시

console.log(5 == "5");   // true  (문자열 "5"가 숫자 5로 암묵적 변환되어 비교)
console.log(5 === "5");  // false (타입이 다르므로 엄격 비교 결과 다름)

console.log(false == 0);   // true  (false -> 0 변환, 0 == 0)
console.log(false === 0);  // false (boolean vs number 타입 다름)

console.log(null == undefined);  // true  (둘 다 "없음" 취급되는 예외 상황)
console.log(null === undefined); // false (타입 다르므로 엄격 비교)

console.log(" \t\n" == 0);  // true  (공백 문자열 -> 0 변환, 0 == 0)
console.log(" \t\n" === 0); // false (타입 다름)

console.log(NaN == NaN);    // false (NaN은 자신과도 같지 않음)
console.log(NaN === NaN);   // false (엄격 비교에서도 NaN은 특별 case)

console.log(10 > 2);      // true  (숫자 비교)
console.log("10" > 2);    // true  ("10" -> 10 숫자 변환, 10 > 2)
console.log("2" < "12");  // false (문자열 비교: "2" vs "12", 사전순으로 "2"가 더 큼)
console.log("2" < 12);    // true  ("2" -> 2, 숫자 2 < 12)
console.log("apple" < "banana"); // true  ("apple"이 "banana"보다 사전순 앞)

const obj1 = { value: 1 };
const obj2 = { value: 1 };
console.log(obj1 == obj2);   // false (서로 다른 객체 참조)
console.log(obj1 === obj2);  // false (엄격 비교 역시 참조 다름)

const obj3 = obj1;
console.log(obj1 === obj3);  // true  (동일한 객체를 참조)

console.log([] == []);       // false (서로 다른 빈 배열 객체)
console.log([1] == [1]);     // false (내용이 같아도 다른 배열 객체)
console.log([1] === [1]);    // false (참조 다르므로 엄격 비교 false)

console.log([] == false);    // true  ([] -> "" -> 0, false -> 0, 0 == 0)
console.log([] === false);   // false (타입 다름, 객체 vs 불리언)

• 비교연산자 더 깊게 알고 싶으면 확인해주세요.타입이 달라도 값이 같다면 true를 반환하며, 타입까지 따지지 않기 때문에 예상치 못한 동등 판정이 나올 수 있습니다즉, 같은 타입의 같은 값인 경우에만 true를 반환합니다. ("5" === 5는 타입이 달라 false)!== (엄격한 부등): ===의 반대입니다. 두 값이 엄격하게 일치하지 않으면 true를 반환합니다. 값이나 타입 중 하나라도 다르면 true입니다. 예를 들어, "5" !== 5는 타입이 다르므로 true입니다 (엄격 동등이 false이므로).예를 들어, "b" > "a"는 true이고, "2" < "12"는 문자 '2'와 '1'를 비교하므로 false입니다.(사전식으로 생각할 수 있지만 완전한 사전식은 아닙니다!. 유니코드 순서로 비교하는게 더 맞는 말 입니다!)
  (ex. Apple과 apple은 같은 알파벳이고 대소문자만 다르지만 유니코드가 각각 65, 97임)
• >= , <= (크거나 같다/작거나 같다): 이상(greater or equal) 혹은 이하(less or equal) 비교를 합니다. a >= b는 a가 b보다 크거나 같으면 true, a <= b는 a가 b보다 작거나 같으면 true입니다. 숫자 비교에 주로 쓰이며, 역시 문자열 비교 시 사전식 순서를 따릅니다.
• (두 피연산자가 모두 문자열이면 각 문자의 유니코드 순서로 비교하고, 타입이 다르면 적절히 숫자 변환을 시도합니다.)
• > , < (크다/작다): 좌측 값이 우측 값보다 큰지(>), 혹은 작은지(<) 비교합니다. 주로 숫자 비교에 사용되며, 문자열을 비교할 때는 사전식(lexicographical) 순서로 비교합니다.
• != (느슨한 부등): ==의 반대 개념으로, 두 값이 느슨한 동등으로 같지 않다면 true를 반환합니다. ==로 판단했을 때 false인 경우 !=는 true가 됩니다. 예를 들어, "5" != 5는 "5" == 5가 true이므로 결과는 false입니다.
• === (엄격한 동등): 두 값의 값과 타입 모두를 비교합니다. 어느 한쪽도 암묵적 변환을 하지 않고, 타입이 다르면 바로 false를 반환합니다.
• == (느슨한 동등): 두 값의 값 자체만 비교합니다. 비교 전에 필요하면 한쪽 또는 양쪽 값을 암묵적으로 동일한 형(type)으로 변환하여("5"를 5로 변환) 비교합니다.

삼항연산자

자바스크립트에서 세 개의 피연산자를 받는 유일한 연산자입니다.

condition ? exprIfTrue : exprIfFalse;

condition이 truthy면 exprIfTrue , falsy 면 exprIfFalse 로 값을 가지게 됩니다.

let age = 26;
let beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"

사실 이건 if 문으로도 처리가 가능합니다.

하지만 알아두면 나중에 편리하기 때문에 알아두는 것이 좋습니다.