연산자

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• 산술, 비교, 논리, 할당 연산자를 올바르게 사용할 수 있습니다.
• ==(동등)와 ===(일치)의 결정적 차이를 이해하고 항상 ===를 사용해야 하는 이유를 설명할 수 있습니다.
• 논리 연산자의 단축 평가(Short-circuit Evaluation) 원리를 이해하고 실전에서 활용할 수 있습니다.
• 증감 연산자와 복합 할당 연산자로 코드를 간결하게 작성할 수 있습니다.

➕ 산술 연산자

이 섹션에서는 숫자 계산에 사용하는 산술 연산자와 자바스크립트에서 주의해야 할 동작을 살펴보겠습니다.

산술 연산자는 수학 계산을 수행합니다. 기본 연산자는 다른 언어와 동일하지만, 자바스크립트만의 특이한 동작이 있으므로 주의가 필요합니다.

// 기본 산술 연산자
console.log(10 + 3);   // 13 — 덧셈
console.log(10 - 3);   // 7  — 뺄셈
console.log(10 * 3);   // 30 — 곱셈
console.log(10 / 3);   // 3.3333... — 나눗셈 (항상 소수 포함)
console.log(10 % 3);   // 1  — 나머지(모듈로)
console.log(2 ** 10);  // 1024 — 거듭제곱 (ES7)

// 주의: + 연산자는 문자열과 만나면 연결 연산
console.log("10" + 3);   // "103" — 문자열 연결!
console.log("10" - 3);   // 7    — 뺄셈은 숫자로 자동 변환
console.log(10 + "3");   // "103" — 앞쪽이 숫자여도 문자열 연결

나머지 연산자(%)는 처음에는 낯설지만 실전에서 매우 자주 사용됩니다. 짝수/홀수 판별, 배열을 순환하는 로직, 시간 계산(60초 = 1분) 등에 핵심적으로 활용됩니다. 예를 들어 n % 2 === 0이면 짝수, 1이면 홀수입니다.

증감 연산자는 변수의 값을 1씩 늘리거나 줄이는 데 사용합니다. 반복문과 함께 자주 쓰입니다.

let count = 5;

// 전위 증가: 먼저 증가시키고 값을 반환
console.log(++count);  // 6 (증가 후 반환)
console.log(count);    // 6

// 후위 증가: 현재 값을 반환하고 증가
let count2 = 5;
console.log(count2++); // 5 (반환 후 증가)
console.log(count2);   // 6

// 감소 연산자
let life = 3;
life--;  // 3 → 2
console.log(life); // 2

// 복합 할당 연산자 — 연산과 할당을 동시에
let score = 100;
score += 10;  // score = score + 10 → 110
score -= 20;  // score = score - 20 → 90
score *= 2;   // score = score * 2  → 180
score /= 3;   // score = score / 3  → 60
score %= 7;   // score = score % 7  → 4
console.log(score); // 4

복합 할당 연산자(+=, -=, *=, /=, %=)는 코드를 간결하게 만들어줍니다. score = score + 10보다 score += 10이 짧고 읽기 편합니다. 실무 코드에서 매우 자주 사용하므로 반드시 익혀두세요.

🔍 비교 연산자와 == vs ===

이 섹션에서는 두 값을 비교하는 연산자와, 자바스크립트에서 반드시 이해해야 하는 ==와 ===의 차이를 살펴보겠습니다.

비교 연산자는 두 값을 비교하여 true 또는 false를 반환합니다. 조건문(7강)의 핵심 재료입니다.

console.log(5 > 3);   // true  — 크다
console.log(5 < 3);   // false — 작다
console.log(5 >= 5);  // true  — 크거나 같다
console.log(5 <= 4);  // false — 작거나 같다

// 동등 연산자 (==) — 타입 변환 후 비교 (사용 자제!)
console.log(5 == "5");    // true  — 문자열 "5"를 숫자 5로 변환
console.log(0 == false);  // true  — false가 0으로 변환
console.log(null == undefined); // true
console.log("" == false); // true  — 빈 문자열과 false

// 일치 연산자 (===) — 타입과 값 모두 비교 (항상 이것을 사용!)
console.log(5 === "5");    // false — 타입이 다름 (number vs string)
console.log(0 === false);  // false — 타입이 다름
console.log(null === undefined); // false — 타입이 다름
console.log(5 === 5);     // true

// 불일치 연산자
console.log(5 != "5");    // false — == 기반, 타입 무시
console.log(5 !== "5");   // true  — === 기반, 타입 포함

==(동등 연산자)는 비교 전에 두 값의 자료형을 일치시키는 암묵적 형 변환을 수행합니다. 그 결과 0 == false가 true가 되는 등 직관적이지 않은 결과가 발생합니다. 이런 동작은 버그의 주요 원인입니다.

===(일치 연산자)는 값과 자료형을 모두 비교합니다. 형 변환 없이 있는 그대로 비교하므로 예측 가능하고 안전합니다. 자바스크립트에서는 항상 ===와 !==를 사용하는 것이 정석입니다. ==는 특별한 이유가 없다면 절대 사용하지 마세요.

비교	== 결과	=== 결과
5 == "5"	true	false
0 == false	true	false
null == undefined	true	false
"" == false	true	false
5 == 5	true	true

🔗 논리 연산자와 단축 평가

이 섹션에서는 여러 조건을 결합하는 논리 연산자와 자바스크립트에서 매우 유용한 단축 평가(Short-circuit Evaluation) 개념을 살펴보겠습니다.

논리 연산자는 불리언 값을 다루는 데 사용합니다. &&(AND), ||(OR), !(NOT) 세 가지가 있습니다.

// && (AND) — 둘 다 true일 때만 true
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false

// || (OR) — 하나라도 true면 true
console.log(true || false);  // true
console.log(false || false); // false

// ! (NOT) — true ↔ false 반전
console.log(!true);   // false
console.log(!false);  // true
console.log(!0);      // true  — Falsy 값 반전
console.log(!"hi");   // false — Truthy 값 반전

// 실전 예시
let age = 20;
let hasId = true;
console.log(age >= 18 && hasId);  // true — 성인이고 신분증 있음

let isWeekend = false;
let isHoliday = true;
console.log(isWeekend || isHoliday);  // true — 주말이거나 휴일

자바스크립트 논리 연산자에는 강력한 특성이 있습니다. &&와 ||는 반드시 true/false를 반환하는 것이 아니라, 실제 피연산자 중 하나를 반환합니다. 이것이 단축 평가(Short-circuit Evaluation)입니다.

// && 단축 평가 — 앞이 Falsy면 앞 값, Truthy면 뒤 값 반환
console.log(0 && "hello");     // 0     — 앞(0)이 Falsy라 멈춤
console.log("hi" && "hello"); // "hello" — 앞이 Truthy라 뒤 반환
console.log(null && "hello"); // null  — null이 Falsy라 멈춤

// || 단축 평가 — 앞이 Truthy면 앞 값, Falsy면 뒤 값 반환
console.log("hi" || "기본값");  // "hi"    — 앞이 Truthy라 멈춤
console.log("" || "기본값");    // "기본값" — 앞(빈문자열)이 Falsy
console.log(null || "기본값");  // "기본값" — null이 Falsy

// 실전 활용: 기본값 설정
let userName = null;
let displayName = userName || "손님";  // userName이 null이므로 "손님"
console.log(displayName);  // "손님"

userName = "홍길동";
displayName = userName || "손님";  // userName이 있으므로 "홍길동"
console.log(displayName);  // "홍길동"

||의 단축 평가는 변수에 기본값을 설정할 때 매우 자주 사용됩니다. value || "기본값" 패턴은 value가 Falsy(null, undefined, 빈 문자열 등)이면 "기본값"을 사용하라는 의미입니다. 실무 코드에서 수없이 만나게 되는 패턴이니 반드시 익혀두세요.

ES2020에서는 더 정교한 연산자가 추가되었습니다.

// ?? (Nullish Coalescing) — null이나 undefined일 때만 기본값
let score = 0;
console.log(score || 100);  // 100 — 0이 Falsy라 기본값 반환 (의도치 않음!)
console.log(score ?? 100);  // 0   — 0은 null/undefined가 아니므로 그대로

let name = null;
console.log(name ?? "손님");  // "손님" — null이므로 기본값

// ?. (Optional Chaining) — 중간 값이 null/undefined면 undefined 반환
let user = null;
// console.log(user.name);  // ❌ TypeError
console.log(user?.name);    // undefined — 오류 없이 안전하게

??(Nullish Coalescing)는 ||와 비슷하지만, null과 undefined에만 반응합니다. 0이나 빈 문자열은 의미 있는 값으로 그대로 통과시킵니다. ?.(Optional Chaining)는 객체의 깊은 속성에 접근할 때 중간에 null이나 undefined가 있어도 오류 대신 undefined를 반환합니다. 14강 객체에서 더 깊이 다룹니다.

⚠️ 자주 하는 실수와 주의점

이 섹션에서는 연산자 사용 시 입문자들이 자주 겪는 실수와 혼동을 살펴보겠습니다.

=, ==, ===를 혼동하는 실수가 가장 흔합니다. =는 할당(오른쪽 값을 왼쪽 변수에 저장), ==는 값만 비교(타입 변환 포함), ===는 값과 타입 모두 비교입니다. 조건문 안에 if (x = 5)처럼 실수로 =를 쓰면 5를 x에 할당하고, 5는 Truthy이므로 조건이 항상 참이 됩니다. 이런 실수를 방지하기 위해 일부 개발자는 5 === x처럼 상수를 왼쪽에 쓰기도 합니다.

연산자 우선순위도 주의해야 합니다. 수학과 동일하게 곱셈·나눗셈이 덧셈·뺄셈보다 먼저 계산됩니다. 논리 연산자는 ! → && → || 순으로 우선순위가 높습니다. 헷갈릴 때는 괄호를 사용하면 항상 명확합니다.

// 우선순위 예시
console.log(2 + 3 * 4);       // 14 (곱셈 먼저)
console.log((2 + 3) * 4);     // 20 (괄호 먼저)

console.log(true || false && false);  // true (&& 먼저: false&&false=false, 그 후 true||false=true)
console.log((true || false) && false); // false (괄호 먼저: true, 그 후 true&&false=false)

NaN 비교 실수도 자주 발생합니다. NaN === NaN은 false이므로, NaN인지 확인하려면 Number.isNaN(value)를 사용해야 합니다. 4강에서 배운 내용이지만, 연산자와 함께 다시 한번 강조합니다.

📝 핵심 요약

5강에서 배운 내용을 정리해 보겠습니다.

연산자 종류	연산자	설명
산술	+ - * / % **	기본 수학 계산, +는 문자열 연결도 겸함
증감	++ --	값을 1씩 증가/감소, 전위(먼저)/후위(나중에) 구분
복합 할당	+= -= *= /= %=	연산과 할당을 한 번에
비교	> < >= <=	크기 비교, 결과는 boolean
동등	== !=	타입 변환 후 비교 — 사용 자제
일치	=== !==	타입+값 모두 비교 — 항상 이것 사용
논리	&& || !	AND/OR/NOT, 단축 평가로 실제 값 반환
Nullish	??	null/undefined일 때만 기본값 적용
옵셔널 체이닝	?.	중간 null/undefined 있어도 안전하게 접근

다음 강인 6강 — 문자열 다루기에서는 텍스트 데이터를 가공하는 강력한 문자열 메서드들을 배웁니다. slice, includes, replace, split 등 실무에서 매일 사용하는 메서드들을 예제와 함께 깊이 익혀보겠습니다!