notes

07장. 연산자

2025-07-27수정 2026-09-267 min read

모던 JS Deep Dive — 연산자 종류·우선순위와 평가 규칙 핵심 정리.

Kim mr.

프론트엔드 · 기술 블로그

참고: 이웅모 《모던 자바스크립트 Deep Dive》 7장 · [MDN Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators)

연산자는 “값과 값을 결합해 새 값을 내는 기호”로 시작했지만, 동등 비교·논리·지수·typeof까지 가면 언어 철학이 드러난다. 이 장은 산술부터 **, typeof, 쉼표까지 한 지도로 묶는다.

flowchart TB
  OP[연산자] --> AR[산술]
  OP --> AS[할당]
  OP --> CMP[비교 ===]
  OP --> LOG[논리 && || !]
  OP --> SPEC[typeof ** ?: ,]

7.1 산술

이항: + - * / % 단항: + - ++ --

console.log(5 % 2);
console.log(+'10');
let x = 1;
console.log(++x, x++);

+는 문자열 연결도 겸함(9).

7.2 할당

= += -= *= … 할당은 표현식 — 값이 오른쪽(또는 연산 결과).

let a = 1;
a += 2;
let b, c;
b = c = 3;

7.3 비교

== vs ===

느슨한 동등은 타입 변환 후 비교. 일치는 타입까지. 실무 기본 === / !==.

console.log(1 == '1'); // true
console.log(1 === '1'); // false
console.log(NaN === NaN); // false — Object.is / Number.isNaN

대소

< > <= >= — 문자열은 유니코드 순서. 로케일 비교는 localeCompare.

7.4 삼항 ?:

const label = score >= 60 ? 'pass' : 'fail';

중첩 삼항은 가독성 해침 → if/lookup.

7.5 논리

! && || — 단축 평가(9). 반환이 불리언만이 아님.

7.6 쉼표

왼쪽부터 평가, 마지막 값.

let x = (1, 2, 3); // 3

for 절 등. 남용 비추.

7.7 그룹 ()

우선순위 변경.

7.8 typeof

typeof 1; // 'number'
typeof null; // 'object' — 역사적 버그
typeof []; // 'object' — Array.isArray
typeof (() => {}); // 'function'

7.9 지수 **

2 ** 3; // 8
2 ** 3 ** 2; // 512 — 우측 결합

예제

function clamp(n, min, max) {
  return n < min ? min : n > max ? max : n;
}
function isSame(a, b) {
  return Object.is(a, b);
}

헷갈리던 장면 / 함정

==
typeof null
++ 전후위
** 결합 방향
|| 기본값

표

질문 → 자답

Q. Object.is와 === 차이? A. NaN과 +0/-0 처리. 그 외 대부분 같음.

Q. 할당이 비교보다 우선? A. 우선순위 표를 의심스러울 때 괄호.

웹 보강 메모

MDN operator precedence. 린트 eqeqeq, no-sequences.

실무로 바로

=== 기본
삼항은 얕게
typeof는 원시 가드, 객체는 더 구체적 API
지수·비트는 주석

여기서 잠깐 💁‍♂️

8장 제어문 — 연산 결과를 흐름에 연결한다.

보강 — 널리시·옵셔널은 9장과 공유

?? ?.는 현대 코드의 기본 연산자 세트. 7에서 논리만 보고 끝나면 실무가 비다.

보강 — 비트 연산

& | ^ ~ << >> >>> — ToInt32. 플래그·마스크. 가독성 위해 이름있는 상수.

const READ = 1 << 0;
const WRITE = 1 << 1;
const mode = READ | WRITE;
console.log(mode & WRITE);

연습 체크리스트

[ ] 핵심 표만 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 링크 한 번씩 훑기
[ ] 실무 코드에서 같은 패턴 검색
[ ] 관련 장(앞뒤) 한 줄로 연결

일기 보강 — 헷갈림 → 찾아봄 → 정리

처음에 용어가 추상적으로 들렸다. 책을 덮고 한 줄 정의를 내 말로 다시 쓰고, 예제를 최소 세 개 쳐 보니 문제 유형이 보이기 시작했다. “외운 문장”이 아니라 “다시 설명 가능한 문장”이 남을 때까지 표를 줄였다 늘렸다.

추가 예제 블록

// 실험 1 — 기대 vs 실제를 주석으로 남긴다
console.log('실험');

// 실험 2 — 경계값
console.log('경계');

// 실험 3 — 실무 형태
function demo() { return true; }
console.log(demo());

웹·스펙 메모

MDN과 ECMA-262 용어가 다를 수 있다. 노트에는 내가 디버깅에 쓰는 말을 우선 적고, 면접용 키워드를 괄호로 병기한다. 원문 복붙 없이 “왜 이렇게 동작하나”만 남긴다.

실무 적용 한 스푼

PR 리뷰 때 이 장 키워드가 보이면 체크리스트를 붙인다. 버그 리포트에는 재현 코드와 기대/실제를 한 쌍으로 적는다. 팀 컨벤션이 없으면 이 노트 표를 초안으로 제안한다.

연습 체크리스트

[ ] 핵심 표만 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 링크 한 번씩 훑기
[ ] 실무 코드에서 같은 패턴 검색
[ ] 관련 장(앞뒤) 한 줄로 연결

일기 보강 — 헷갈림 → 찾아봄 → 정리

추가 예제 블록

// 실험 1 — 기대 vs 실제를 주석으로 남긴다
console.log('실험');

// 실험 2 — 경계값
console.log('경계');

// 실험 3 — 실무 형태
function demo() { return true; }
console.log(demo());

웹·스펙 메모

실무 적용 한 스푼

연습 체크리스트

[ ] 핵심 표만 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 링크 한 번씩 훑기
[ ] 실무 코드에서 같은 패턴 검색
[ ] 관련 장(앞뒤) 한 줄로 연결

일기 보강 — 헷갈림 → 찾아봄 → 정리

추가 예제 블록

// 실험 1 — 기대 vs 실제를 주석으로 남긴다
console.log('실험');

// 실험 2 — 경계값
console.log('경계');

// 실험 3 — 실무 형태
function demo() { return true; }
console.log(demo());

웹·스펙 메모

실무 적용 한 스푼

연습 체크리스트

[ ] 핵심 표만 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 링크 한 번씩 훑기
[ ] 실무 코드에서 같은 패턴 검색
[ ] 관련 장(앞뒤) 한 줄로 연결

일기 보강 — 헷갈림 → 찾아봄 → 정리

추가 예제 블록

// 실험 1 — 기대 vs 실제를 주석으로 남긴다
console.log('실험');

// 실험 2 — 경계값
console.log('경계');

// 실험 3 — 실무 형태
function demo() { return true; }
console.log(demo());