왕진 블로그
JavaScript 비교 · 논리 연산자
완전 정리
이번 글은 두 개의 원본 코드를 함께 본다. 하나는 비교 연산자(==, !=, >=, >, <=, <)로 두 값을 비교해 true/false를 얻는 코드고, 다른 하나는 그렇게 얻은 true/false를 논리 연산자(&&, ||, !)로 묶는 코드다. 두 개가 한 세트인 이유는, 논리 연산자가 다루는 재료 자체가 비교 연산자가 만들어낸 boolean이기 때문이다.
let x=true; y=false;에서 y에는 let이 빠져 있다 — 이러면 y는 지역 변수가 아니라 전역 변수로 새어나간다(strict mode에서는 아예 에러). ② 마지막 줄의 화면 출력 문자열은 "(3==-2) || ..."라고 써놨지만 실제 계산은 (3==2)다 — 사람이 읽는 글자와 실제 실행되는 코드가 다르게 짜여 있는 흔한 실수다.x == y : false
x != y : true
x >= y : true
x > y : true
x <= y : false
x < y : false
x=true, y=false
x && y : false
x || y : true
!x : false
(3>2) && (3<4) : true
(3==2) || (-1<0) : true
컴퓨터는 사람처럼 "대충 비슷하다"를 모른다. 코드가 갈림길에서 어느 쪽으로 갈지 정하려면, 모든 판단은 결국 true 아니면 false 딱 두 개로 좁혀져야 한다. 비교 연산자는 x와 y 같은 값을 넣으면 그 관계를 boolean 하나로 압축해주는 도구다. x > y는 숫자가 아니라 "참이다" 또는 "거짓이다"라는 대답 그 자체다.
x > y 는 계산 결과가 아니라 질문에 대한 대답이다. "x가 y보다 크니?" → true 또는 false.==는 두 값의 겉모습(값)만 보고 같은지 비교한다. 타입이 달라도 자바스크립트가 알아서 타입을 맞춰본 뒤(형변환) 비교하기 때문에, "7" == 7도 true가 나온다. 반면 ===는 값은 물론 타입까지 같아야 true다.
"7" == 7 → true"7" === 7 → falsex == y(13 vs 7)는 둘 다 숫자라 형변환이 끼어들 여지가 없어서 ==든 ===든 결과가 같다. 하지만 습관적으로는 실무에서 === 을 기본으로 쓰는 것이 안전하다.!=는 ==의 결과를 그대로 뒤집는다고 생각하면 쉽다. x == y가 false면 x != y는 true다. 느낌표(!)가 "아니다, 부정"의 의미를 갖는다는 걸 기억해두면, 뒤에 나올 논리 연산자 !(NOT)도 자연스럽게 이해된다.
이 네 연산자는 숫자의 크고 작음을 비교한다. 헷갈리기 쉬운 부분은 등호가 붙어있으면 "같은 경우도 포함"이라는 점이다. x >= y는 "x가 y보다 크거나, 최소한 같다"까지 true로 인정한다.
| 연산자 | 의미 | x=13, y=7일 때 |
|---|---|---|
x >= y |
x가 y보다 크거나 같다 | true |
x > y |
x가 y보다 크다 | true |
x <= y |
x가 y보다 작거나 같다 | false |
x < y |
x가 y보다 작다 | false |
>=, <=는 "이상", "이하" / 등호가 없는 >, <는 "초과", "미만"에 대응한다."성인이면서 회원인가?", "할인쿠폰이 있거나 VIP인가?" 같은 조건은 비교 하나로는 표현이 안 된다. 여러 개의 true/false를 동시에 만족해야 하는지(AND), 하나만 만족해도 되는지(OR)를 결정해주는 것이 논리 연산자다. 재료가 비교 연산자가 만든 boolean이라는 점이 핵심이다.
&&는 양쪽 조건이 모두 true일 때만 true를 준다. 하나라도 false면 결과는 무조건 false다. 원본 코드의 x=true, y=false에서 x && y가 false인 이유는 y 하나가 false이기 때문이다.
| x | y | x && y |
|---|---|---|
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
||는 양쪽 중 하나라도 true면 true다. 둘 다 false일 때만 false가 된다. x=true, y=false에서 x || y가 true인 이유는 x 하나만 true여도 충분하기 때문이다.
| x | y | x || y |
|---|---|---|
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
!는 지금까지와 달리 값 하나만 받아서 그 boolean을 반대로 뒤집는다(단항 연산자). x=true일 때 !x는 false다. "if 조건이 아닐 때" 같은 표현을 만들 때 자주 쓰인다.
괄호로 감싼 비교식은 먼저 각각 true/false로 계산된 다음, 바깥의 논리 연산자가 그 결과들을 다시 묶는다. 이게 비교 연산과 논리 연산이 짝을 이루는 이유다.
&&는 왼쪽이 false면 오른쪽을 아예 계산하지 않는다 — 이미 결과가 false로 확정됐으므로||는 왼쪽이 true면 오른쪽을 아예 계산하지 않는다 — 이미 결과가 true로 확정됐으므로- 실무에서는
user && user.name처럼 "앞이 없으면 뒤를 보지 않는" 안전장치로도 활용한다
결국 if문이 실행할지 말지를 정하는 조건 자리에는 항상 이런 boolean 하나가 들어간다. 비교 연산자로 재료(true/false)를 만들고, 논리 연산자로 그 재료들을 원하는 규칙에 맞게 조립하는 것 — 이것이 조건문의 뼈대다.
| 실수 | 증상 | 해결 |
|---|---|---|
= 와 == 혼동 |
비교하려던 자리에서 값이 대입되어 버림 | 대입은 =, 비교는 ==/===로 구분 |
== 와 === 혼동 |
타입이 달라도 몰래 형변환되어 의도치 않게 true | 타입까지 정확히 비교하려면 ===·!== 사용 |
&(비트연산)와 &&(논리연산) 혼동 |
boolean이 아닌 이상한 숫자 결과가 나옴 | 조건 결합은 반드시 &&·|| 두 글자로 |
| 여러 조건 결합 시 괄호 생략 | 연산자 우선순위 때문에 의도와 다른 결과 | (3>2) && (3<4)처럼 조건마다 괄호로 묶기 |
변수 선언에서 let 누락(let x=true; y=false;) |
두 번째 변수가 전역으로 새어나감 | let x=true, y=false;처럼 콤마로 한 번에 선언 |
| 출력 문자열과 실제 코드가 다르게 작성됨 | 화면 라벨과 실제 계산값이 어긋나 디버깅 혼란 | document.write 문자열도 실제 식과 항상 맞춰서 작성 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| JavaScript 문자열 연산 — 타입 혼합과 비교 완전 정리 (0) | 2026.07.03 |
|---|---|
| JavaScript 대입·조건 연산자 완전 정리 (0) | 2026.07.03 |
| JavaScript if-else — 학점 매기기 완전 정리 (0) | 2026.07.03 |
| JavaScript 링크·외부 파일 — href · alert · 이미지 교체 완전 정리 (0) | 2026.07.03 |
| JavaScript 리터럴 — 숫자·불리언·문자열 완전 정리 (0) | 2026.07.03 |
댓글