자바스크립트 논리 연산자(Logical Operators)란?
논리 연산자는 변수나 표현식 사이의 논리적 관계를 판단할 때 사용됩니다. 자바스크립트에는 세 가지 논리 연산자가 있으며, 각각 || (OR), && (AND), ! (NOT)입니다.
1. AND 연산자 (&&)
AND 연산자(&&)는 두 표현식이 모두 참(true)일 경우에만 true를 반환하고, 하나라도 거짓이면 false를 반환합니다.
예제
<html>
<body>
<p id="and"></p>
<script>
var a = 200;
var b = 300;
document.getElementById("and").innerHTML =
(a > 100 && b < 500) + "<br>" +
(a < 100 && b < 50);
</script>
</body>
</html>
첫 번째 조건식은 a가 100보다 크고(참) b가 500보다 작으므로(참) 두 조건이 모두 참이어서 true가 출력됩니다. 반면 두 번째 조건식은 a가 100보다 작지 않아(거짓) 전체 결과가 false가 됩니다.
실행 결과
true
false
2. OR 연산자 (||)
OR 연산자(||)는 두 표현식 중 하나 이상이 참이면 true를 반환하고, 둘 다 거짓일 때만 false를 반환합니다.
예제
<html>
<body>
<p id="or"></p>
<script>
var x = 200;
var y = 300;
document.getElementById("or").innerHTML =
(x == 200 || y == 300) + "<br>" +
(x == 200 || y == 0) + "<br>" +
(x == 0 || y == 0)
</script>
</body>
</html>
첫 번째와 두 번째 조건식은 각각 하나 이상의 조건이 참이므로 true를 반환하고, 세 번째 조건식은 두 조건이 모두 거짓이므로 false를 반환합니다.
실행 결과
true
true
false
3. NOT 연산자 (!)
NOT 연산자(!)는 피연산자의 논리 값을 반전시킵니다. 즉, 참인 값은 false로, 거짓인 값은 true로 바꿔줍니다.
예제
<html>
<body>
<p id="not"></p>
<script>
var x = 200;
var y = 300;
document.getElementById("not").innerHTML =
!(x < y) + "<br>" + !(x > y);
</script>
</body>
</html>
x(200)는 y(300)보다 작으므로 x < y는 참이지만, NOT 연산자에 의해 false로 출력됩니다. 반대로 x > y는 거짓이므로 NOT 연산 후 true가 됩니다.
실행 결과
false
true
논리 연산자 한눈에 정리
| 연산자 | 이름 | 동작 방식 |
|---|---|---|
| && | AND | 두 표현식이 모두 참일 때만 true 반환 |
| || | OR | 하나 이상의 표현식이 참이면 true 반환 |
| ! | NOT | 논리 값을 반전 (참 → 거짓, 거짓 → 참) |