frontend/javascript

🟨 1-5. 조건문(if, switch)과 반복문(for, while, for...of) 실전 예제

mirabo01 2025. 11. 5. 21:14

 

모든 프로그램의 핵심은 “상황에 따라 다르게 행동하고,
특정 동작을 반복하는 것”이다.

자바스크립트에서는 이 두 가지를
조건문(Condition Statements) 과 반복문(Loops) 으로 제어한다.

이번 편에서는 if, switch, for, while, for...of, for...in 

💡 1. 조건문의 기본 구조

“조건이 참일 때만 실행되는 코드 블록”

if (조건식) { 
  // 실행문 
} else { 
  // 조건이 거짓일 때 실행 
}

예시 👇

let age = 20; 
 
if (age >= 19) { 
  console.log("성인입니다."); 
} else { 
  console.log("미성년자입니다."); 
}

✅ 조건식은 항상 true/false 로 평가된다.
✅ 비교 연산자(>, <, ===, !==)와 함께 사용된다.

⚙️ 2. else if로 다중 조건 처리

let score = 85; 
 
if (score >= 90) { 
  console.log("A 등급"); 
} else if (score >= 80) { 
  console.log("B 등급"); 
} else if (score >= 70) { 
  console.log("C 등급"); 
} else { 
  console.log("F 등급"); 
}

✅ 위에서부터 순서대로 검사 → 첫 번째로 만족하는 조건에서 종료된다.
✅ 순서가 중요하다! (상위 조건부터 검사해야 한다.)

🔄 3. 중첩 if문

“조건 안에 조건을 넣을 수 있다.”

let id = "admin"; 
let pw = "1234"; 
 
if (id === "admin") { 
  if (pw === "1234") { 
    console.log("로그인 성공"); 
  } else { 
    console.log("비밀번호가 틀렸습니다."); 
  } 
} else { 
  console.log("아이디가 없습니다."); 
}

💬 중첩이 많아지면 가독성이 떨어지므로,
필요하다면 switch문이나 조기 리턴(return)으로 단순화하자.

⚡ 4. switch문 — 다중 분기 처리의 깔끔한 방법

let fruit = "사과"; 
 
switch (fruit) { 
  case "사과": 
    console.log("🍎 사과입니다."); 
    break; 
  case "바나나": 
    console.log("🍌 바나나입니다."); 
    break; 
  case "포도": 
    console.log("🍇 포도입니다."); 
    break; 
  default: 
    console.log("알 수 없는 과일입니다."); 
}

✅ 조건이 많을 때 if보다 가독성 좋음
✅ 각 case는 break로 끝내야 중복 실행 방지
✅ default는 모든 조건이 일치하지 않을 때 실행

🧱 5. 반복문 (Loop)의 개념

“특정 코드를 여러 번 반복 실행하는 구문”

🔁 5-1. for문

for (초기식; 조건식; 증감식) { 
  // 반복 실행할 코드 
}

예시 👇

for (let i = 1; i <= 5; i++) { 
  console.log(`${i}번째 반복`); 
}

✅ 반복이 끝나면 자동 종료
✅ i++는 1씩 증가, i--는 1씩 감소

🔂 5-2. while문

let n = 1; 
while (n <= 5) { 
  console.log(`${n}번째 실행`); 
  n++; 
}

✅ 조건이 참일 동안 계속 실행
✅ 조건이 거짓이 되면 종료

💡 조건을 잘못 설정하면 무한 루프 발생
→ 항상 증가/감소 조건 포함해야 함.

🔁 5-3. do...while문

“일단 한 번은 실행하고 조건을 검사한다.”

let count = 0; 
do { 
  console.log("한 번은 무조건 실행!"); 
  count++; 
} while (count < 3);

✅ 조건이 false라도 최소 1회 실행

🧩 6. 반복문 제어 — break & continue

for (let i = 1; i <= 5; i++) { 
  if (i === 3) continue; // 3은 건너뜀 
  if (i === 5) break; // 5에서 종료 
  console.log(i); 
}

✅ continue: 현재 반복만 건너뛰고 다음 반복으로
✅ break: 반복문 전체 종료

🧠 7. for...of — 배열 요소 순회

let fruits = ["사과", "바나나", "포도"]; 
 
for (let fruit of fruits) { 
  console.log(fruit); 
}

✅ 인덱스를 신경 쓰지 않아도 됨
✅ 배열, 문자열, Map, Set 등 이터러블(iterable) 에서 사용 가능

🧾 8. for...in — 객체의 속성 순회

let user = { name: "기범", age: 25, job: "개발자" }; 
 
for (let key in user) { 
  console.log(`${key}: ${user[key]}`); 
}

✅ 객체의 key 값들을 순회
✅ 배열에는 비추천 (순서가 보장되지 않음)

💡 9. 중첩 반복문

“반복문 안에서 또 다른 반복문”

for (let i = 1; i <= 3; i++) { 
  for (let j = 1; j <= 2; j++) { 
    console.log(`${i}행 ${j}열`); 
  } 
}

✅ 2차원 배열, 테이블 렌더링 등에 자주 사용됨

🧮 10. 실전 예제 — 별 찍기

let stars = ""; 
 
for (let i = 1; i <= 5; i++) { 
  for (let j = 1; j <= i; j++) { 
    stars += "⭐"; 
  } 
  stars += "\n"; 
} 
 
console.log(stars);

✅ 중첩 for문으로 계단식 패턴 출력
✅ 알고리즘 기본 훈련용으로 자주 등장

🧠 11. 반복문의 성능 팁

1️⃣ 고정된 길이는 미리 변수로 저장

for (let i = 0, len = arr.length; i < len; i++) { ... }

2️⃣ break 조건이 명확한 경우 즉시 종료
→ 불필요한 반복 방지

3️⃣ forEach / map 도 상황에 따라 유용

arr.forEach(item => console.log(item));

🏁 12. 마무리 — “조건과 반복은 모든 프로그램의 뼈대다”

조건문은 프로그램의 분기점,
반복문은 프로그램의 시간축이다.

이 둘을 이해하면 모든 알고리즘의 흐름이 보이기 시작한다.

💬 “코드는 결국 조건과 반복으로 완성된다.”

다음 편에서는
✅ 1-6. 함수 선언문 vs 함수 표현식 — 호출 타이밍과 차이점 완벽 이해
를 통해 자바스크립트의 함수 구조를 심도 있게 살펴보자.