반복문

반복문

반복문은 코드 블록을 여러 번 실행하는 데 사용됩니다.

for 문

가장 일반적인 반복문으로, 지정된 횟수만큼 코드 블록을 반복합니다.

기본 구문:

for (초기화; 조건; 증감) {
  // 조건이 참인 동안 반복될 코드
}

예제:

// 기본 for 문
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 출력: 0, 1, 2, 3, 4

// 배열 순회
const fruits = ["사과", "바나나", "오렌지", "포도"];
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}
// 출력:
// 0: 사과
// 1: 바나나
// 2: 오렌지
// 3: 포도

// 역순 반복
for (let i = 10; i > 0; i--) {
  console.log(i);
}
// 출력: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1

// 중첩 for 문 (구구단 예제)
for (let i = 2; i <= 9; i++) {
  console.log(`[ ${i}단 ]`);
  for (let j = 1; j <= 9; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
  console.log(''); // 줄바꿈
}

// 초기화, 조건, 증감식 생략
let i = 0;
for (;;) {
  if (i >= 5) break;
  console.log(i);
  i++;
}
// 출력: 0, 1, 2, 3, 4

for...in 문

객체의 속성을 반복하는 데 사용됩니다.

기본 구문:

for (변수 in 객체) {
  // 객체의 각 속성에 대해 실행될 코드
}

예제:

// 객체 속성 순회
const person = {
  name: "홍길동",
  age: 25,
  job: "개발자"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
// 출력:
// name: 홍길동
// age: 25
// job: 개발자

// 배열에 for...in 사용 (권장하지 않음)
const colors = ["빨강", "파랑", "녹색"];
for (let index in colors) {
  console.log(index, colors[index]);
}
// 출력:
// 0 빨강
// 1 파랑
// 2 녹색

// 추가된 속성도 순회
Array.prototype.customProperty = "테스트";
for (let index in colors) {
  console.log(index, colors[index]);
}
// 출력:
// 0 빨강
// 1 파랑
// 2 녹색
// customProperty 테스트

for...in 사용 시 주의사항:

• 객체의 모든 열거 가능한(enumerable) 속성을 순회함
• 상속받은 속성도 포함됨(프로토타입 체인의 속성)
• 배열에 사용할 경우 인덱스 순서가 보장되지 않을 수 있음
• 배열은 for...in 대신 for...of 또는 forEach 메서드 사용을 권장

for...of 문

ES6에서 도입된 구문으로, 반복 가능한(iterable) 객체(배열, 문자열, Map, Set 등)의 요소를 순회합니다.

기본 구문:

for (변수 of 반복가능객체) {
  // 반복 가능한 객체의 각 요소에 대해 실행될 코드
}

예제:

// 배열 요소 순회
const fruits = ["사과", "바나나", "오렌지"];
for (let fruit of fruits) {
  console.log(fruit);
}
// 출력:
// 사과
// 바나나
// 오렌지

// 문자열 문자 순회
const message = "Hello";
for (let char of message) {
  console.log(char);
}
// 출력:
// H
// e
// l
// l
// o

// Map 순회
const userRoles = new Map([
  ["홍길동", "관리자"],
  ["김철수", "사용자"],
  ["이영희", "편집자"]
]);

for (let [user, role] of userRoles) {
  console.log(`${user}는 ${role} 권한을 가집니다.`);
}
// 출력:
// 홍길동는 관리자 권한을 가집니다.
// 김철수는 사용자 권한을 가집니다.
// 이영희는 편집자 권한을 가집니다.

// Set 순회
const uniqueNumbers = new Set([1, 2, 3, 2, 1]);
for (let num of uniqueNumbers) {
  console.log(num);
}
// 출력:
// 1
// 2
// 3

for...of와 for...in의 차이점:

• for...in: 객체의 속성 이름(키)을 순회
• for...of: 컬렉션의 요소 값을 순회

while 문

조건이 참인 동안 코드 블록을 반복 실행합니다.

기본 구문:

while (조건) {
  // 조건이 참인 동안 반복될 코드
}

예제:

// 기본 while 문
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}
// 출력: 0, 1, 2, 3, 4

// 사용자 입력 처리 시뮬레이션
let userInput = "";
let attempts = 0;

// 실제로는 prompt() 등으로 사용자 입력을 받을 수 있음
function simulateUserInput() {
  attempts++;
  return attempts > 3 ? "quit" : "retry";
}

while (userInput !== "quit") {
  userInput = simulateUserInput();
  console.log(`시도 ${attempts}: ${userInput}`);
}
// 출력:
// 시도 1: retry
// 시도 2: retry
// 시도 3: retry
// 시도 4: quit

// 무한 루프와 break
let i = 0;
while (true) {
  console.log(i);
  i++;
  if (i >= 5) {
    break; // 루프 종료
  }
}
// 출력: 0, 1, 2, 3, 4

do...while 문

while 문과 유사하지만, 조건을 확인하기 전에 코드 블록을 먼저 한 번 실행합니다.

기본 구문:

do {
  // 적어도 한 번은 실행될 코드
} while (조건);

예제:

// 기본 do...while 문
let count = 0;
do {
  console.log(count);
  count++;
} while (count < 5);
// 출력: 0, 1, 2, 3, 4

// 조건이 처음부터 거짓이더라도 한 번은 실행됨
let x = 10;
do {
  console.log("이 메시지는 한 번 출력됩니다.");
  x++;
} while (x < 10);

// 메뉴 선택 시뮬레이션
let choice;
let menuAttempt = 0;

function simulateMenuChoice() {
  menuAttempt++;
  return menuAttempt > 2 ? 4 : menuAttempt;
}

do {
  choice = simulateMenuChoice();
  
  switch(choice) {
    case 1:
      console.log("메뉴 1 선택");
      break;
    case 2:
      console.log("메뉴 2 선택");
      break;
    case 3:
      console.log("메뉴 3 선택");
      break;
    case 4:
      console.log("종료");
      break;
    default:
      console.log("잘못된 선택");
  }
  
} while (choice !== 4);
// 출력:
// 메뉴 1 선택
// 메뉴 2 선택
// 종료

반복문 제어

반복문 내에서 실행 흐름을 제어하기 위한 특별한 구문들이 있습니다.

break 문

반복문을 즉시 종료하고 그 다음 코드로 넘어갑니다.

// for 문에서 break 사용
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // i가 5일 때 루프 종료
  }
  console.log(i);
}
// 출력: 0, 1, 2, 3, 4

// 중첩 루프에서 break
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outer; // 라벨을 사용하여 바깥쪽 루프까지 종료
    }
    console.log(`i=${i}, j=${j}`);
  }
}
// 출력:
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

continue 문

현재 반복을 건너뛰고 다음 반복으로 넘어갑니다.

// for 문에서 continue 사용
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // i가 2일 때 이번 반복 건너뛰기
  }
  console.log(i);
}
// 출력: 0, 1, 3, 4

// 짝수만 출력
for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue; // 홀수일 경우 건너뛰기
  }
  console.log(i);
}
// 출력: 0, 2, 4, 6, 8

// 중첩 루프에서 continue
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (j === 1) {
      continue outer; // 바깥쪽 루프의 다음 반복으로 이동
    }
    console.log(`i=${i}, j=${j}`);
  }
}
// 출력:
// i=0, j=0
// i=1, j=0
// i=2, j=0

 

배열 순회와 관련된 반복문 활용

JavaScript 배열을 순회하는 다양한 방법들이 있으며, 각각 장단점과 적합한 상황이 다릅니다.

기본 for 문으로 배열 순회

const numbers = [10, 20, 30, 40, 50];

// 인덱스와 값 모두 사용
for (let i = 0; i < numbers.length; i++) {
  console.log(`인덱스 ${i}: ${numbers[i]}`);
}

// 최적화: 배열 길이를 변수에 저장
const len = numbers.length;
for (let i = 0; i < len; i++) {
  console.log(numbers[i]);
}

// 역순 순회
for (let i = numbers.length - 1; i >= 0; i--) {
  console.log(numbers[i]);
}
// 출력: 50, 40, 30, 20, 10

for...of 문으로 배열 순회

const fruits = ["사과", "바나나", "오렌지"];

// 값만 필요할 때 가장 간결함
for (let fruit of fruits) {
  console.log(fruit);
}

// 인덱스가 필요한 경우 entries() 메서드 사용
for (let [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}
// 출력:
// 0: 사과
// 1: 바나나
// 2: 오렌지

forEach 메서드로 배열 순회

const numbers = [1, 2, 3, 4, 5];

// 기본 사용법
numbers.forEach(function(value) {
  console.log(value);
});

// 인덱스와 배열 전체에 접근
numbers.forEach(function(value, index, array) {
  console.log(`${index}: ${value} (배열 길이: ${array.length})`);
});

// 화살표 함수로 간결하게
numbers.forEach(value => console.log(value));

map, filter, reduce 메서드로 배열 처리

const numbers = [1, 2, 3, 4, 5];

// map: 각 요소를 변환하여 새 배열 생성
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: 조건에 맞는 요소만 포함하는 새 배열 생성
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// reduce: 배열의 모든 요소를 하나의 값으로 축소
const sum = numbers.reduce((total, current) => total + current, 0);
console.log(sum); // 15 (1+2+3+4+5)

// 메서드 체이닝
const sumOfDoubledEvens = numbers
  .filter(num => num % 2 === 0) // [2, 4]
  .map(num => num * 2)          // [4, 8]
  .reduce((total, current) => total + current, 0); // 12
console.log(sumOfDoubledEvens);

반복문 성능 및 선택 가이드

상황에 맞는 반복문을 선택하면 코드의 가독성과 성능을 향상시킬 수 있습니다.

성능 고려사항

1. 기본 for 문: 일반적으로 가장 빠른 성능을 제공하며, 특히 대용량 배열에서 유리
2. for...of: 가독성이 좋으며 일반적인 상황에서 충분한 성능 제공
3. forEach: 함수 호출 오버헤드로 인해 기본 for 문보다 약간 느림
4. for...in: 배열 순회에는 적합하지 않으며 성능이 가장 느림

반복문 선택 가이드

1. 객체 속성 순회: for...in 사용
2. const person = { name: "홍길동", age: 25 }; for (let key in person) { console.log(`${key}: ${person[key]}`); }
3. 배열 요소 순회 (인덱스 필요 없음): for...of 사용
4. const fruits = ["사과", "바나나", "오렌지"]; for (let fruit of fruits) { console.log(fruit); }
5. 배열 요소 순회 (인덱스 필요): 기본 for 문 또는 forEach 사용
6. const fruits = ["사과", "바나나", "오렌지"]; // for 문 for (let i = 0; i < fruits.length; i++) { console.log(`${i}: ${fruits[i]}`); } // forEach fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`); });
7. 조건부 반복: while 또는 do...while 사용
8. let count = 0; while (count < 5) { console.log(count); count++; }
9. 함수형 배열 처리: map, filter, reduce 사용
10. const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((total, num) => total + num, 0);

•