notes

08장. 제어문

2025-08-07수정 2026-09-268 min read

모던 JS Deep Dive — 조건문·반복문과 제어 흐름 핵심 정리.

Kim mr.

프론트엔드 · 기술 블로그

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

위에서 아래로만 흐르면 프로그램이 안 된다. 조건·반복·탈출이 흐름을 꺾는다. 이 장은 블록, if/switch, for/while, break/continue.

flowchart TD
  S[시작] --> IF{조건}
  IF -->|yes| A[블록 A]
  IF -->|no| B[블록 B]
  A --> LOOP[반복]
  B --> LOOP
  LOOP --> OUT[이후]

8.1 블록문

{ ... } — 여러 문을 하나로. let/const 스코프(15).

8.2 조건문

if…else

if (score >= 90) grade = 'A';
else if (score >= 80) grade = 'B';
else grade = 'C';

switch

=== 비교. break 필수(fall-through 의도 아니면).

switch (grade) {
  case 'A':
  case 'B':
    console.log('pass');
    break;
  default:
    console.log('fail');
}

8.3 반복문

for

초기식; 조건; 증감.

while / do…while

조건 선행 vs 최소 1회.

for (let i = 0; i < 3; i++) console.log(i);
let n = 3;
while (n--) console.log(n);

8.4 break

루프·switch 탈출. 레이블 가능(남용 비추).

8.5 continue

이번 반복 나머지 건너뛰기.

for (let i = 0; i < 5; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

예제

function sumTo(n) {
  let s = 0;
  for (let i = 1; i <= n; i++) s += i;
  return s;
}

function findFirstEven(arr) {
  for (const x of arr) {
    if (x % 2 === 0) return x;
  }
  return null;
}

헷갈리던 장면 / 함정

switch fall-through
for 무한 루프 조건
var 루프+클로저(24)
for…in으로 배열 순회(비추)

표

질문 → 자답

Q. 삼항 vs if? A. 값 선택이 짧으면 삼항, 문·부수효과면 if.

Q. forEach에서 break? A. 불가에 가깝다. for…of 사용.

웹 보강 메모

MDN loops and iteration. ESLint no-fallthrough.

실무로 바로

조기 return으로 중첩 감소
배열은 map/filter/for…of
switch에 default

여기서 잠깐 💁‍♂️

9장 타입 변환 — 조건식 truthy/falsy와 직결.

연습·복습 체크리스트

[ ] 이 장 핵심 표를 백지에 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 관련 페이지 북마크
[ ] 실무 코드에서 같은 패턴 검색·리팩터 후보 표시
[ ] 앞뒤 장과 한 줄로 연결해 보기

일기 보강

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