Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트(JavaScript) 비교 연산자 완벽 정리 – 종류, 의미, 예제까지 한눈에

자바스크립트 비교 연산자란?

자바스크립트에서 비교 연산자(comparison operator)는 두 값을 서로 비교한 결과를 참(true) 또는 거짓(false)으로 반환하는 연산자입니다. 주로 조건문(if 문)이나 반복문에서 특정 조건을 판단할 때 필수적으로 사용됩니다.

이해를 돕기 위해 변수 A에는 10, 변수 B에는 20이 저장되어 있다고 가정하고, 자바스크립트에서 지원하는 대표적인 비교 연산자들을 하나씩 살펴보겠습니다.

주요 비교 연산자의 종류와 설명

번호연산자 및 설명
1== (동등 연산자)
두 피연산자의 값이 같은지 검사합니다. 값이 같으면 조건식은 참(true)이 됩니다.
예: (A == B) → 거짓(false)
2!= (부등 연산자)
두 피연산자의 값이 서로 다른지 검사합니다. 값이 다르면 조건식은 참(true)이 됩니다.
예: (A != B) → 참(true)
3> (초과 / 크다)
왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 큰지 검사합니다.
예: (A > B) → 거짓(false)
4< (미만 / 작다)
왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작은지 검사합니다.
예: (A < B) → 참(true)
5>= (이상 / 크거나 같다)
왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같은지 검사합니다.
예: (A >= B) → 거짓(false)
6<= (이하 / 작거나 같다)
왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같은지 검사합니다.
예: (A <= B) → 참(true)

비교 연산자 사용 예제

아래 코드는 자바스크립트에서 비교 연산자를 실제로 사용하는 방법을 보여줍니다. 변수 a와 b에 값을 저장한 뒤, 여섯 가지 비교 연산의 결과를 화면에 출력합니다.

<html>
   <body>
      <script>
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
            document.write("(a == b) => ");
            result = (a == b);
            document.write(result);
            document.write(linebreak);
            document.write("(a < b) => ");
            result = (a < b);
            document.write(result);
            document.write(linebreak);
            document.write("(a > b) => ");
            result = (a > b);
            document.write(result);
            document.write(linebreak);
            document.write("(a != b) => ");
            result = (a != b);
            document.write(result);
            document.write(linebreak);
            document.write("(a >= b) => ");
            result = (a >= b);
            document.write(result);
            document.write(linebreak);
            document.write("(a <= b) => ");
            result = (a <= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>
      변수에 다양한 값을 넣고, 여러 연산자를 바꿔가며 직접 실행해 보세요!
   </body>
</html>

알아두면 좋은 점: ==(동등)과 ===(일치)의 차이

위 표의 == 연산자는 비교하기 전에 양쪽 값의 자료형을 자동으로 변환할 수 있습니다. 예를 들어 5 == "5"는 자료형이 달라도 값이 같다고 판단하여 true를 반환합니다.

반면 자료형까지 엄격하게 비교하는 === (일치 연산자)!== (불일치 연산자)도 존재합니다. 이 연산자들은 값과 자료형이 모두 같아야만 참을 반환하므로, 실무에서는 예상치 못한 버그를 줄이기 위해 ===!==를 사용하는 것이 권장됩니다.

마무리

비교 연산자는 자바스크립트 프로그래밍의 기본 중의 기본입니다. 위 예제 코드를 직접 실행해 보면서 변수 값과 연산자를 바꿔가며 결과를 확인하면, 각 연산자의 동작 방식을 더욱 확실하게 익힐 수 있습니다.