🟨 1-4. 연산자 총정리 — 산술, 비교, 논리, 삼항, typeof 완벽 이해

---

자바스크립트를 배우다 보면
+, ==, ===, &&, ||, ? : 같은 기호들이 수도 없이 등장한다.
이게 단순히 ‘계산하는 도구’가 아니라, 논리와 흐름을 제어하는 핵심 문법이다.

이번 편에서는 모든 연산자의 구조와 작동 원리,
그리고 실무에서 자주 마주치는 헷갈리는 비교 상황까지 한 번에 정리한다.

---

💡 1. 연산자란?

“연산자는 값을 계산하거나 비교하거나 논리를 제어하는 기호다.”

let sum = 10 + 5; // 산술 
let check = sum > 10; // 비교 
let result = check && true; // 논리 

자바스크립트에는 수십 가지 연산자가 있지만,
핵심은 다음 5가지 그룹으로 정리할 수 있다 👇

---

🔢 2. 산술 연산자 (Arithmetic)

연산자 의미 예시 결과

+	더하기	5 + 2	7
-	빼기	5 - 2	3
*	곱하기	5 * 2	10
/	나누기	5 / 2	2.5
%	나머지	5 % 2	1
**	거듭제곱	2 ** 3	8

💬 주의: +는 문자열과 숫자를 더할 때 문자열 연결이 된다.

console.log("3" + 2); // "32" 
console.log("3" - 2); // 1 (자동 형변환 발생) 

---

🧮 3. 대입(할당) 연산자 (Assignment)

연산자 의미 예시

=	기본 할당	x = 10
+=	더해서 할당	x += 5
-=	빼서 할당	x -= 3
*=	곱해서 할당	x *= 2
/=	나눠서 할당	x /= 2

let count = 10; 
count += 5; // 15 
count *= 2; // 30 

💡 축약형 대입은 실무 코드의 가독성을 높인다.

---

⚖️ 4. 비교 연산자 (Comparison)

연산자 의미 예시 결과

==	값만 비교 (형변환 O)	"3" == 3	true
===	값 + 타입 비교 (형변환 X)	"3" === 3	false
!=	같지 않음 (형변환 O)	"3" != 3	false
!==	값·타입 모두 다름	"3" !== 3	true
> < >= <=	크기 비교	5 > 3	true

💬 == 대신 ===를 쓰는 이유:
자동 형변환 때문에 버그가 자주 발생하기 때문이다.

console.log(0 == false); // true 
console.log(0 === false); // false 

✅ 실무에서는 항상 === / !== 를 쓰는 게 안전하다.

---

🔄 5. 논리 연산자 (Logical)

연산자 의미 예시 결과

&&	AND (모두 참일 때 true)	true && true	true
`		`	OR (하나라도 참이면 true)
!	NOT (반대값으로 변환)	!true	false

💬 논리 연산자는 단순 비교뿐 아니라,
조건 분기·단축 평가(Short-circuit) 에도 자주 쓰인다.

const name = ""; 
console.log(name || "이름 없음"); // 이름 없음 

✅ || → 왼쪽 값이 falsy면 오른쪽 반환
✅ && → 왼쪽 값이 falsy면 즉시 반환

---

🧠 6. 삼항 연산자 (Ternary Operator)

“조건문을 한 줄로 표현하는 연산자”

let score = 80; 
let grade = score >= 90 ? "A" : "B"; 
console.log(grade); // B 

✅ 구조: 조건 ? 참일 때 : 거짓일 때
✅ 간단한 if문 대체 가능

💬 중첩해서도 사용 가능하지만, 가독성 주의!

let message = score >= 90 ? "A" : score >= 80 ? "B" : "C"; 

---

🧩 7. typeof 연산자 (자료형 확인)

console.log(typeof "hi"); // string 
console.log(typeof 123); // number 
console.log(typeof true); // boolean 
console.log(typeof null); // object (주의!) 

✅ 변수의 자료형을 빠르게 확인할 때 사용
💡 typeof null === "object" 는 자바스크립트의 설계 오류이지만 그대로 유지됨.

---

🧱 8. 연산자 우선순위

우선순위 연산자 예시

1️⃣	()	(3 + 2) * 4
2️⃣	**	2 ** 3
3️⃣	* / %	10 / 2 * 3
4️⃣	+ -	5 + 2 - 1
5️⃣	비교 연산	a > b
6️⃣	논리 연산	&&, `
7️⃣	삼항 연산	조건 ? A : B
8️⃣	대입	=

💡 복잡한 연산식일수록 괄호로 명시적으로 우선순위를 지정하자.

---

⚙️ 9. 자동 형변환 (Type Coercion) 주의

console.log("3" + 2); // "32" 
console.log("3" - 2); // 1 
console.log("5" * "2"); // 10 

✅ +는 문자열 결합으로 작동
✅ 나머지 연산자(-, *, /)는 숫자로 자동 변환됨

💬 문자열과 숫자를 섞지 않는 습관을 들이자.

---

🎯 10. 실전 예제 — 로그인 조건 처리

const id = "admin"; 
const pw = "1234"; 
 
const isLogin = id === "admin" && pw === "1234" ? true : false; 
console.log(isLogin ? "로그인 성공" : "로그인 실패"); 

✅ &&와 삼항 연산자를 결합한 간결한 조건 처리
✅ 이런 형태는 실제 프론트엔드 로직에서도 자주 등장한다.

---

🧮 11. 단축 평가(Short-Circuit Evaluation)

const user = null; 
console.log(user && user.name); // null (오류 안 남) 

✅ &&는 왼쪽이 falsy면 오른쪽 실행 안 함
✅ ||는 왼쪽이 falsy면 오른쪽 실행

💡 옵셔널 체이닝(?.)과 비슷한 역할로 자주 쓰인다.

---

🏁 12. 마무리 — “연산자는 코드의 논리를 시각화하는 언어다”

자바스크립트의 연산자는 단순한 계산 도구가 아니다.
조건, 흐름, 논리, 데이터 변환의 모든 중심에 존재한다.

💬 “if문을 쓰지 않고도 사고를 표현할 수 있다면,
당신은 연산자를 제대로 이해한 것이다.”

다음 편에서는
✅ 1-5. 조건문(if, switch)과 반복문(for, while, for...of) 실전 예제
를 통해 코드 흐름을 제어하는 방법을 마스터해보자.