JavaScript/조건문과 반복문

JavaScript 반복문 완전 가이드 - for, while, for...of, forEach 마스터하기

코딩하는 패션이과생 2025. 6. 6. 20:11
반응형

반복문이란?

반복문은 특정 코드를 여러 번 반복해서 실행하는 JavaScript의 제어문입니다. 같은 작업을 반복해야 할 때 코드의 중복을 피하고 효율적으로 프로그램을 작성할 수 있게 해줍니다. JavaScript에서는 주로 for문, while문, for...of문, forEach문을 사용합니다.

반복문 for문

for문은 가장 기본적인 반복문으로, 초기값, 조건식, 증감식을 한 곳에 명시하여 반복 횟수를 제어할 수 있습니다. 조건식이 true인 동안 반복 실행되며, 주로 정해진 횟수만큼 반복할 때 사용합니다.

for문 문법

// 문법
for (초기값; 조건식; 증감식) {
    실행문....
}

// 사용법
for (let i = 0; i < 5; i++) {
    console.log("반복문 실행: " + i);
}

for문 기본 예제

for (let i = 1; i <= 5; i++) {
    console.log("숫자: " + i);
}
console.log("반복 완료");

실행 결과:

숫자: 1
숫자: 2
숫자: 3
숫자: 4
숫자: 5
반복 완료

초기값 i = 1부터 시작하여 조건식 i <= 5가 true인 동안 반복 실행됩니다. 매 반복마다 증감식 i++에 의해 i값이 1씩 증가하며, i가 6이 되면 조건식이 false가 되어 반복을 종료하고 '반복 완료'가 출력됩니다.

배열과 for문 예제

let fruits = ["사과", "바나나", "오렌지", "포도"];

for (let i = 0; i < fruits.length; i++) {
    console.log((i + 1) + "번째 과일: " + fruits[i]);
}
console.log("과일 목록 출력 완료");

실행 결과:

1번째 과일: 사과
2번째 과일: 바나나
3번째 과일: 오렌지
4번째 과일: 포도
과일 목록 출력 완료

배열의 인덱스는 0부터 시작하므로 i = 0으로 초기화하고, i < fruits.length 조건으로 배열의 모든 요소에 접근합니다. 출력할 때는 i + 1을 사용하여 1번째부터 표시합니다.

반복문 while문

while문은 조건식이 true인 동안 반복 실행되는 반복문입니다. for문과 달리 초기값과 증감식을 별도로 관리해야 하며, 반복 횟수가 정해지지 않은 상황에서 주로 사용합니다.

while문 문법

// 문법
while (조건식) {
    실행문....
    증감식; // 무한루프 방지를 위해 필요
}

// 사용법
let i = 0;
while (i < 3) {
    console.log("while 반복: " + i);
    i++;
}

while문 기본 예제

let count = 1;

while (count <= 5) {
    console.log("카운트: " + count);
    count++;
}
console.log("카운팅 완료");

실행 결과:

카운트: 1
카운트: 2
카운트: 3
카운트: 4
카운트: 5
카운팅 완료

count변수를 1로 초기화하고 count <= 5 조건이 true인 동안 반복됩니다. 반복문 내부에서 count++로 값을 증가시켜 무한루프를 방지하며, count가 6이 되면 조건이 false가 되어 반복을 종료합니다.

사용자 입력을 받는 while문 예제

let password = "";
let attempts = 0;
const correctPassword = "1234";

while (password !== correctPassword && attempts < 3) {
    password = prompt("비밀번호를 입력하세요 (시도: " + (attempts + 1) + "/3)");
    attempts++;

    if (password === correctPassword) {
        console.log("로그인 성공!");
    } else if (attempts >= 3) {
        console.log("로그인 실패: 시도 횟수 초과");
    }
}

이 예제는 올바른 비밀번호를 입력하거나 3번의 시도가 모두 실패할 때까지 반복됩니다. 조건식에 논리연산자(&&)를 사용하여 두 조건을 모두 만족해야 반복이 계속되도록 했습니다.

반복문 for...of문

for...of문은 ES6에서 도입된 반복문으로, 배열이나 문자열 같은 반복 가능한 객체의 값을 순회할 때 사용합니다. 인덱스가 아닌 값 자체에 직접 접근할 수 있어 코드가 간결하고 읽기 쉽습니다.

for...of문 문법

// 문법
for (변수 of 반복가능한객체) {
    실행문....
}

// 사용법
let numbers = [1, 2, 3];
for (let num of numbers) {
    console.log(num);
}

for...of문 배열 예제

let colors = ["빨강", "파랑", "노랑", "초록"];

for (let color of colors) {
    console.log("색상: " + color);
}
console.log("색상 출력 완료");

실행 결과:

색상: 빨강
색상: 파랑
색상: 노랑
색상: 초록
색상 출력 완료

for...of문은 배열의 각 요소를 color 변수에 자동으로 할당하며, 인덱스를 관리할 필요가 없어 코드가 간결합니다. 배열의 모든 요소를 순회한 후 반복을 종료합니다.

for...of문 문자열 예제

let message = "Hello";

for (let char of message) {
    console.log("문자: " + char);
}
console.log("문자 출력 완료");

실행 결과:

문자: H
문자: e
문자: l
문자: l
문자: o
문자 출력 완료

문자열도 반복 가능한 객체이므로 for...of문으로 각 문자에 접근할 수 있습니다. 문자열의 모든 문자를 하나씩 순회하며 처리할 수 있습니다.

반복문 forEach문

forEach문은 배열의 내장 메서드로, 배열의 각 요소에 대해 제공된 함수를 실행합니다. 함수형 프로그래밍 스타일로 배열을 처리할 때 사용하며, 콜백 함수를 통해 각 요소와 인덱스에 접근할 수 있습니다.

forEach문 문법

// 문법
배열.forEach(function(요소, 인덱스, 배열) {
    실행문....
});

// 화살표 함수 사용법
배열.forEach((요소, 인덱스) => {
    실행문....
});

forEach문 기본 예제

let numbers = [10, 20, 30, 40];

numbers.forEach(function(number, index) {
    console.log(index + "번째 숫자: " + number);
});
console.log("숫자 출력 완료");

실행 결과:

0번째 숫자: 10
1번째 숫자: 20
2번째 숫자: 30
3번째 숫자: 40
숫자 출력 완료

forEach문은 콜백 함수의 첫 번째 매개변수로 배열 요소의 값을, 두 번째 매개변수로 인덱스를 제공합니다. 배열의 모든 요소에 대해 콜백 함수가 실행됩니다.

forEach문 화살표 함수 예제

let students = ["김철수", "이영희", "박민수"];

students.forEach((student, index) => {
    console.log(`${index + 1}번 학생: ${student}`);
});

// 더 간단한 형태
students.forEach(student => console.log("학생 이름: " + student));

실행 결과:

1번 학생: 김철수
2번 학생: 이영희
3번 학생: 박민수
학생 이름: 김철수
학생 이름: 이영희
학생 이름: 박민수

ES6의 화살표 함수와 템플릿 리터럴을 사용하면 더 간결하게 작성할 수 있습니다. 인덱스가 필요하지 않다면 첫 번째 매개변수만 사용할 수 있습니다.

반복문 비교 및 선택 기준

📊 반복문 비교표

반복문 장점 단점 사용 상황
for 명확한 반복 횟수 제어 문법이 복잡 정해진 횟수 반복
while 유연한 조건 설정 무한루프 위험 조건 기반 반복
for...of 간결한 문법 인덱스 접근 어려움 배열/문자열 순회
forEach 함수형 스타일 break 사용 불가 배열 처리

🎯 상황별 반복문 선택

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}`);
    }
}

// 배열 역순 출력
let arr = [1, 2, 3, 4, 5];
for (let i = arr.length - 1; i >= 0; i--) {
    console.log(arr[i]);
}

while문 사용 예시

// 랜덤 숫자 맞히기 게임
let targetNumber = Math.floor(Math.random() * 10) + 1;
let guess = 0;
let attempts = 0;

while (guess !== targetNumber) {
    guess = parseInt(prompt("1-10 사이의 숫자를 맞춰보세요:"));
    attempts++;

    if (guess === targetNumber) {
        console.log(`정답! ${attempts}번 만에 맞췄습니다.`);
    } else {
        console.log("틀렸습니다. 다시 시도하세요.");
    }
}

for...of문 사용 예시

// 쇼핑 목록 출력
let shoppingList = ["우유", "빵", "계란", "사과"];

console.log("쇼핑 목록:");
for (let item of shoppingList) {
    console.log("- " + item);
}

// 문자열에서 모음 찾기
let text = "Hello World";
let vowels = "aeiouAEIOU";

for (let char of text) {
    if (vowels.includes(char)) {
        console.log(`모음 발견: ${char}`);
    }
}

forEach문 사용 예시

// 배열 요소 변환
let prices = [1000, 2000, 3000];
let discountedPrices = [];

prices.forEach(price => {
    discountedPrices.push(price * 0.8); // 20% 할인
});

console.log("할인된 가격:", discountedPrices);

// 조건부 처리
let scores = [85, 92, 78, 96, 88];

scores.forEach((score, index) => {
    if (score >= 90) {
        console.log(`${index + 1}번째 학생: A등급 (${score}점)`);
    } else if (score >= 80) {
        console.log(`${index + 1}번째 학생: B등급 (${score}점)`);
    }
});

마무리

JavaScript의 반복문은 효율적인 프로그래밍을 위한 필수 도구입니다.

  • for문: 명확한 반복 횟수가 있을 때, 복잡한 제어가 필요할 때
  • while문: 조건에 따른 반복이 필요할 때, 반복 횟수가 불확실할 때
  • for...of문: 배열이나 문자열의 값만 필요할 때, 간결한 코드를 원할 때
  • forEach문: 함수형 프로그래밍 스타일로 배열을 처리할 때

각 반복문의 특성을 이해하고 상황에 맞게 선택하면 더욱 효율적이고 읽기 쉬운 코드를 작성할 수 있습니다. 특히 무한루프를 방지하기 위해 종료 조건을 명확히 설정하는 것이 중요합니다.