C
JavaScript 목록
이전5 / 21다음
JavaScript/기초/Lesson 05

제어 흐름 — if · for · while · switch

45분·theory
이 챕터
4/5

제어 흐름 — if · for · while · switch

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ if-else · switch · 삼항 중 언제 무엇 을 쓸지
  • ▸✅ ?? (nullish) vs || (falsy) 의 결정적 차이
  • ▸✅ for · for-of · for-in · forEach 의 await 호환성

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

if / else / 삼항 — *분기* 의 3가지 표현

가장 기본 if

javascript
const score = 85;

if (score >= 90) {
    console.log('A');
} else if (score >= 80) {
    console.log('B');     // 출력됨
} else {
    console.log('C');
}

조건은 truthy/falsy 로 평가됩니다. 0, '', null, undefined, NaN, false 가 falsy. 그 외는 모두 truthy.

javascript
if (user) { ... }              // user 가 null/undefined 가 아닐 때
if (items.length) { ... }      // 배열에 요소가 있을 때
if (!name) { ... }             // name 이 빈 문자열·null·undefined 일 때

삼항 연산자 — 짧은 if 의 표현

javascript
const label = age >= 19 ? '성인' : '미성년';

값을 반환하는 if. React JSX 안에서 매우 자주:

jsx
<button>{isLoading ? '저장 중...' : '저장'}</button>

3중 삼항 (a ? b : c ? d : e) 은 가독성 떨어지니 자제. if-else 로 풀어쓰세요.

옵셔널 체이닝 + Nullish coalescing — 분기의 단축형

javascript
const city = user?.address?.city ?? '미상';

?. — 앞이 null/undefined 면 즉시 undefined 반환 (TypeError 회피).
?? — 왼쪽이 null/undefined 일 때만 오른쪽 사용. 0 이나 '' 는 그대로 사용.

javascript
const req = { page: 0 };

const page  = req.page ?? 1;    // ?? : null/undefined 일 때만 1 사용
const page2 = req.page || 1;    // || : falsy 면 모두 1 사용 (0 도 falsy)

console.log(page);    // 0   ← ✅ 0 그대로 (의도한 값)
console.log(page2);   // 1   ← ⚠️ 0 이 falsy 라서 1 로 바뀜 — 함정!

|| 와의 차이가 바이브 코딩의 단골 함정. AI 생성 코드의 80% 가 ?? 를 씁니다.

반복문 4종 — for · while · for...of · for...in

고전 for

javascript
for (let i = 0; i < 5; i++) {
    console.log(i);   // 0,1,2,3,4
}

인덱스를 직접 다뤄야 할 때 (역순 순회·건너뛰기) 유용.

while / do-while

javascript
let n = 0;
while (n < 3) {
    console.log(n++);
}

do {
    console.log('적어도 한 번');
} while (false);

조건이 동적 일 때 (입력 대기·재시도 루프). 일반 반복은 for-of 가 낫습니다.

for...of — 값 을 순회 (배열)

javascript
const arr = [10, 20, 30];
for (const v of arr) {
    console.log(v);   // 10, 20, 30
}

가장 자주 쓰는 배열 순회. break·continue 사용 가능 (forEach 와의 결정적 차이).

for...in — 키 를 순회 (객체)

javascript
const obj = { name: 'A', age: 30 };
for (const key in obj) {
    console.log(key, obj[key]);
}

주의: 배열에 for...in 쓰면 인덱스가 문자열 로 나오고 상속 프로퍼티까지 포함될 수 있음 — 배열은 for...of, 객체는 for...in (또는 Object.entries).

break · continue

javascript
for (const item of list) {
    if (item.skip) continue;     // 다음 반복으로
    if (item.stop) break;        // 루프 종료
    process(item);
}

forEach 와 for...of 의 차이 — 바이브 코딩 단골 질문

javascript
// forEach
[1,2,3].forEach(v => console.log(v));

// for...of
for (const v of [1,2,3]) console.log(v);
forEachfor...of
break/continue❌ 불가 (return 으로 다음 요소)✅ 가능
async/await❌ 동작 안 함✅ 동작
가독성메서드 체이닝 자연스러움명령형

규칙: await 또는 break 가 필요하면 for...of, 단순 변환이면 map/filter/reduce (forEach 는 줄어드는 추세).

switch — case 폴스루 함정

기본 switch

javascript
const role = 'admin';

switch (role) {
    case 'admin':
        console.log('관리자');
        break;        // *반드시* break
    case 'user':
        console.log('일반');
        break;
    default:
        console.log('미인증');
}

폴스루 (fall-through) 함정

javascript
switch (day) {
    case 'MON':
        console.log('월요일');
        // break 빼먹음 → 아래 case 까지 흘러내림
    case 'TUE':
        console.log('화요일');
        break;
}

day === 'MON' 입력 시 "월요일" + "화요일" 둘 다 출력. break 누락이 버그의 원인 1위.

의도적 폴스루 — 여러 case 묶기

javascript
switch (day) {
    case 'SAT':
    case 'SUN':
        console.log('주말');
        break;
    default:
        console.log('주중');
}

객체 리터럴로 대체 — 더 현대적

if-else 또는 switch 가 길어지면 객체 매핑 이 깔끔:

javascript
const roleLabel = {
    admin: '관리자',
    user: '일반',
    guest: '게스트'
};
console.log(roleLabel[role] ?? '미인증');

JSX·React 컴포넌트 분기에서 자주 쓰는 패턴.

🤖 AI 에게 이렇게 요청해보세요

  • ▸"이 if-else 체인을 switch 로 바꿔줘"
  • ▸"이 switch 의 break 누락 가능성을 검사해줘"
  • ▸"이 분기를 객체 매핑으로 리팩토링해줘"

제어문을 알면 AI 에게 흐름 변형을 정확히 지시 할 수 있고, AI 가 생성한 코드의 버그를 잡아낼 수 있습니다.

⚡ 직접 해보기 — if · for · switch

제어 흐름의 핵심 4가지 (if, 삼항, for-of, switch) 를 한 번에 실행.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가
먼저 읽으면 좋은 개념: 자료형
다음 추천: 타입 변환과 동등 비교
이전목록다음
제어 흐름 — if · for · while · switch - JavaScript