[JS][연산자] 비교 연산자

비교 연산자란?

비교 연산자는 두 값을 비교해서 true(참)인지 false(거짓)인지 판단하는 데 사용이 됩니다.

예를 들어 숫자 두 개가 같은지, 문자열이 동일한지, 어떤 값이 더 큰지 등을 비교할 때 사용합니다.

비교 연산의 결과는 항상 참(true), 거짓(false)의 boolean값이 됩니다.

---

✅ 자주 쓰이는 비교 연산자들

1. == (느슨한 동등)

두 값이 같은지 확인합니다. 자료형은 무시하고 비교합니다.

느슨한 동등 비교 연산자는 다양한 타입간에 비교 연산시 ‘자동 형변환’을 시도하면서 비교합니다.

이로인하여 “예상치 못한 결과”를 낼 수도 있기 때문에, “엄격한 동등 비교 연산자”를 사용하는게 더욱 좋습니다.

console.log(5 == 5); // true 
console.log(5 == "5"); // true (숫자와 문자열이지만 값이 같으니 true)
console.log(false == 0); // true (false가 숫자 0으로 바뀜)
console.log("" == 0); // true (빈 문자열이 숫자 0으로 바뀜)
console.log(null == undefined); // true (이 둘은 느슨하게 같다고 간주)

위 내용 이외에도 다른 경우가 더 있으니, 모두 외우기 보다는 엄격한 동등 비교 연산자를 사용하길 추천드립니다.

2. === (엄격한 동등)

두 값이 정확히 같은지 확인합니다. 값과 자료형 모두 같아야 true입니다.

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

✅ Tip: 웬만하면 ===를 사용하는 게 예상치 못한 결과를 줄일수 있습니다.

---

3. != (느슨한 부등)

==의 반대연산입니다. 두 값이 다르면 true이며 ==과 마찬가지로 자료형은 무시합니다.

모두 다른값으로 판단되어야 할 것 같지만 자동형변환으로 인하여 아래와 같이 다르지 않은 것으로 처리됩니다.

console.log("사과" != "테스트!"); // true (두 값이 다름)
console.log(5 != 5); // false (두 값이 다르지 않음) 
console.log(5 != "5"); // false (자동 형변환) 
console.log(false != 0); // false (자동 형변환) 
console.log("" != 0); // false (자동 형변환) 
console.log(null != undefined); // false (자동 형변환) 

느슨한 동등 연산자와 마찬가지로 엄격한 부등 연산자를 사용하는것이 좋습니다.

4. !== (엄격한 부등)

===(엄격한 동등비교연산)의 반대이며. 값이나 자료형이 다르면 true입니다.

console.log("사과" !== "포도"); // true 
console.log(5 !== 5); // false
console.log(5 !== "5"); // true
console.log(false !== 0); // true
console.log("" !== 0); // true
console.log(null !== undefined); // true

---

5. > (크다), < (작다)

숫자끼리 비교해서 누가 더 큰지, 작은지를 판단합니다.

문자열과 비교시 문자열내에 숫자 형태로 존재한다면 자동 형변환합니다.

console.log(5 < 6); // true
console.log(5 < "6"); // true (자동형변환)
console.log(5 > 6); // false

---

6. >= (크거나 같다), <= (작거나 같다)

숫자끼리 비교해서 크거나 같은지, 작거나 같은지를 판단합니다.

문자열과 비교시 문자열내에 숫자 형태로 존재한다면 자동 형변환합니다.

console.log(5 <= 6); // true
console.log(5 <= "6"); // true
console.log(5 >= 6); // false

---

✅ 비교 연산자 한눈에 보기 (정리표)

연산자	이름	설명	예시	결과
==	느슨한 동등	값만 비교 (자료형은 무시)	5 == '5'	true
===	엄격한 동등	값과 자료형 모두 비교	5 === '5'	false
!=	느슨한 부등	값만 다르면 true (자료형 무시)	5 != '5'	false
!==	엄격한 부등	값 또는 자료형이 다르면 true	5 !== '5'	true
>	크다	왼쪽 값이 더 클 때	10 > 5	true
<	작다	왼쪽 값이 더 작을 때	3 < 7	true
>=	크거나 같다	왼쪽 값이 오른쪽보다 크거나 같을 때	10 >= 10	true
<=	작거나 같다	왼쪽 값이 오른쪽보다 작거나 같을 때	5 <= 2	false

마무리하며

자바스크립트의 비교 연산자는 느슨하게 비교하는지, 엄격하게 비교하는지, 자료형까지 보는지에 따라 결과가 달라질 수 있습니다.

가급적 느슨한 비교보다는 엄격한 비교 연산을 하는 것이 예상치 못한 이슈를 줄이는데 도움이 됩니다. ✅