일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- vue fullpage
- css 적용방법
- 산술연산자
- html 요소 속성
- form 주요 태그
- html 화면 이동
- javascript
- 느슨한 비교
- node
- fullpage
- bold처리
- html
- Linux
- CSS
- vue3 fullpage
- React
- css 색상변경
- em rem 차이
- nvm
- js 연산자
- html link
- html 엔터 입력
- css 길이단위
- vue
- map함수
- 엄격한 동등비교
- js
- html 이미지 표출
- html 색상적용
- 연산자
- Today
- Total
dev_or_alive
[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 |
마무리하며
자바스크립트의 비교 연산자는 느슨하게 비교하는지, 엄격하게 비교하는지, 자료형까지 보는지에 따라 결과가 달라질 수 있습니다.
가급적 느슨한 비교보다는 엄격한 비교 연산을 하는 것이 예상치 못한 이슈를 줄이는데 도움이 됩니다. ✅
'Web Programming > JS' 카테고리의 다른 글
[JS][연산자] 삼항연산자 (0) | 2025.03.22 |
---|---|
[JS][연산자] 논리 연산자 (0) | 2025.03.22 |
[JS][연산자] 대입 연산자 (0) | 2025.03.20 |
[JS][연산자] 산술 연산자 (0) | 2025.03.17 |
[JS] 연산자(Operators) (0) | 2025.03.17 |