산술·비교·논리·할당 연산자의 동작 원리를 정확히 이해하고, 단축 평가·옵셔널 체이닝·널 병합 연산자 등 현대 자바스크립트에서 자주 쓰이는 패턴을 익힌다.
연산자 전체 지도
자바스크립트 연산자는 크게 산술, 비교, 논리, 할당, 기타로 나뉩니다. 문법 자체보다 각 연산자의 실제 반환값과 부수 효과를 이해하는 것이 핵심입니다.
산술 연산자
// 기본 사칙연산
10 + 3 // 13
10 - 3 // 7
10 * 3 // 30
10 / 3 // 3.3333... (정수 나눗셈 없음!)
10 % 3 // 1 (나머지)
10 ** 3 // 1000 (거듭제곱, ES2016)
// 문자열과의 연산
"5" + 3 // "53" (연결)
"5" - 3 // 2 (숫자 변환)
"5" * "2" // 10
// 증감 연산자 — 위치가 중요
let a = 5;
console.log(a++); // 5 (반환 후 증가)
console.log(a); // 6
console.log(++a); // 7 (증가 후 반환)
// 나머지 연산자 활용
const isEven = n => n % 2 === 0; // 짝수 판별
const minutes = 90 % 60; // 30 (90분 → 30분 남은 시간)비교 연산자
// 값 비교
5 > 3 // true
5 >= 5 // true
5 < 3 // false
5 <= 4 // false
// 일치 연산자 (항상 === 사용!)
5 === 5 // true
5 === "5" // false (타입 다름)
5 !== "5" // true
// 문자열 비교 — 유니코드 순서
"apple" < "banana" // true
"Z" < "a" // true (대문자가 소문자보다 앞)
"100" < "9" // true! (문자열이므로 "1" < "9")논리 연산자 — 반환값을 이해하라
논리 연산자는 boolean을 반환하는 것이 아니라 피연산자 중 하나를 반환합니다. 이 특성이 단축 평가의 핵심입니다.
// && (AND) — 첫 falsy 값 반환, 모두 truthy면 마지막 값
true && true // true
"hello" && 42 // 42 (앞이 truthy면 뒤 반환)
null && "hello" // null (앞이 falsy면 앞 반환)
0 && "hello" // 0
// || (OR) — 첫 truthy 값 반환, 모두 falsy면 마지막 값
false || true // true
null || "hello" // "hello" (앞이 falsy면 뒤 반환)
"hi" || "bye" // "hi" (앞이 truthy면 앞 반환)
0 || "" // "" (모두 falsy, 마지막 반환)
// ! (NOT) — boolean으로 변환 후 반전
!true // false
!0 // true
!!"hi" // true (이중 부정으로 boolean 변환)단축 평가 (Short-circuit Evaluation)
논리 연산자는 결과가 확정되는 순간 나머지를 평가하지 않습니다. 이를 활용하면 간결한 코드를 작성할 수 있습니다.
// && 활용: 조건부 실행
const user = { name: "Kim", isAdmin: true };
user.isAdmin && console.log("관리자입니다"); // 실행됨
null && console.log("실행 안 됨"); // 실행 안 됨
// || 활용: 기본값 제공 (ES5 방식)
function greet(name) {
const displayName = name || "방문자";
console.log("안녕하세요, " + displayName + "!");
}
greet("Kim"); // "안녕하세요, Kim!"
greet(); // "안녕하세요, 방문자!"
greet(0); // "안녕하세요, 방문자!" — 0도 falsy라 문제 발생!널 병합 연산자 ?? (ES2020)
||의 문제점을 해결합니다. null과 undefined일 때만 오른쪽을 반환합니다.
null ?? "기본값" // "기본값"
undefined ?? "기본값" // "기본값"
0 ?? "기본값" // 0 (0은 유효한 값!)
"" ?? "기본값" // "" (빈 문자열도 유효!)
false ?? "기본값" // false
// 실용 예시: 점수 0도 유효하게 처리
const score = 0;
const display1 = score || "점수 없음"; // "점수 없음" (잘못됨!)
const display2 = score ?? "점수 없음"; // 0 (올바름)옵셔널 체이닝 ?. (ES2020)
중첩 객체에 접근할 때 중간에 null/undefined가 있어도 에러 없이 undefined를 반환합니다.
const user = {
name: "Kim",
address: {
city: "Seoul"
}
};
// 기존 방식 — 길고 번거로움
const city = user && user.address && user.address.city;
// 옵셔널 체이닝
const city2 = user?.address?.city; // "Seoul"
const zip = user?.address?.zipCode; // undefined (에러 없음)
const phone = user?.contact?.phone; // undefined (contact 없어도 안전)
// 메서드 호출에도 사용
user?.sendEmail?.(); // sendEmail이 없어도 안전
// 배열 인덱스에도 사용
const users = null;
users?.[0]?.name; // undefined (에러 없음)
// ?? 와 조합
const city3 = user?.address?.city ?? "도시 정보 없음";할당 연산자
let x = 10;
x += 5; // x = x + 5 = 15
x -= 3; // x = x - 3 = 12
x *= 2; // x = x * 2 = 24
x /= 4; // x = x / 4 = 6
x **= 2; // x = x ** 2 = 36
x %= 7; // x = x % 7 = 1
// 논리 할당 연산자 (ES2021)
let a = null;
a ||= "기본값"; // a가 falsy면 할당 → a = "기본값"
a &&= "새값"; // a가 truthy면 할당 → a = "새값"
a ??= "또다른값"; // a가 null/undefined면 할당삼항 연산자
// 기본 구조: 조건 ? 참일때 : 거짓일때
const age = 20;
const status = age >= 18 ? "성인" : "미성년자";
console.log(status); // "성인"
// 중첩 사용 (3단계 이상은 가독성 해침)
const score = 75;
const grade = score >= 90 ? "A"
: score >= 80 ? "B"
: score >= 70 ? "C"
: "F";
// → "C"비트 연산자 — 실무 활용 패턴
// 정수 변환 (Math.floor 대신)
~~3.9 // 3 (이중 비트 NOT)
3.9 | 0 // 3 (OR 0)
// 2의 배수 체크
8 & (8 - 1) === 0 // true (8은 2의 거듭제곱)
6 & (6 - 1) === 0 // false연산자 우선순위 핵심만
// 높음 → 낮음 (주요 부분)
// () > 단항(!, ++, --) > ** > *, /, % > +, - > 비교 > == > && > || > ?? > 삼항 > 할당
// 괄호로 의도를 명확하게 표현하는 것이 최선
const result = (a + b) * c; // 더하기 먼저라는 의도 명확
const isValid = (age > 0) && (age < 150); // 각 조건 명확관련 검색어 · 자바스크립트 연산자, 단축 평가, 옵셔널 체이닝, 널 병합 연산자, 삼항 연산자, 논리 연산자 반환값