자바스크립트 반복문

티스토리 뷰

Front-End-Web/javascript

자바스크립트 반복문

jsBae 2026. 7. 4. 20:15

제9장 자바스크립트 반복문

9.1 반복문과 제어 흐름의 이해

프로그램은 기본적으로 위에서 아래로, 왼쪽에서 오른쪽으로 실행된다. 이러한 실행 순서를 제어 흐름(control flow)이라고 한다. 자바스크립트에서 제어 흐름은 조건문(condition statement), 반복문(loop statement), 점프문(jump statement)을 통해 바뀔 수 있다. 조건문은 실행 경로를 선택하고, 반복문은 같은 작업을 여러 번 수행하며, 점프문은 실행 흐름을 중간에 멈추거나 다른 위치로 이동시킨다.

반복문(loop)은 같은 코드 블록(code block)을 여러 번 실행하기 위한 문법이다. 웹 페이지에서 목록을 출력하거나, 배열(array)에 저장된 데이터를 하나씩 처리하거나, 특정 조건이 만족될 때까지 작업을 반복할 때 사용된다. 반복문은 “같은 작업을 몇 번 수행할 것인가” 또는 “어떤 조건이 유지되는 동안 작업을 계속할 것인가”를 표현하는 구조이다.

반복문을 이해할 때에는 세 가지 질문이 중요하다.

첫째, 반복은 어디에서 시작하는가.
둘째, 반복은 언제까지 계속되는가.
셋째, 반복할 때마다 값은 어떻게 변하는가.

이 세 가지 질문에 답할 수 있으면 대부분의 반복문 구조를 이해할 수 있다.

9.2 for 반복문

for 반복문은 반복 횟수가 비교적 분명할 때 많이 사용한다. 예를 들어 1부터 10까지 출력하거나, 배열의 첫 번째 요소부터 마지막 요소까지 순서대로 처리할 때 적합하다.

for 문은 세 개의 표현식(expression)을 사용하여 반복을 제어한다. 첫 번째 표현식은 반복이 시작되기 전에 한 번 실행되고, 두 번째 표현식은 반복을 계속할 조건을 나타내며, 세 번째 표현식은 코드 블록이 실행된 뒤 매번 실행된다.

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

예를 들어 1부터 5까지 출력하는 코드는 다음과 같다.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

위 코드는 다음 순서로 실행된다.

let i = 1은 반복을 시작하기 위한 초기값이다. 변수 i는 1에서 시작한다.
i <= 5는 반복을 계속할 조건이다. i가 5 이하이면 코드 블록이 실행된다.
i++는 반복이 한 번 끝날 때마다 i를 1씩 증가시키는 증감식이다.

따라서 실행 결과는 다음과 같다.

for 반복문은 구조가 한 줄에 모여 있기 때문에 반복의 시작, 조건, 변화 과정을 한눈에 파악하기 쉽다. 반복 횟수가 정해져 있거나 배열의 인덱스(index)를 순서대로 처리할 때 특히 유용하다.

9.3 배열과 for 반복문

배열(array)은 여러 개의 값을 하나의 변수에 저장하는 자료구조이다. 반복문은 배열과 함께 사용할 때 매우 효과적이다. 배열의 각 요소를 하나씩 꺼내어 출력하거나 계산할 수 있기 때문이다.

const fruits = ["사과", "바나나", "딸기", "포도"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

배열의 인덱스는 0부터 시작한다. 따라서 fruits[0]은 "사과"이고, fruits[1]은 "바나나"이다. fruits.length는 배열에 들어 있는 요소의 개수를 의미한다. 위 예제에서 fruits.length는 4이다.

반복 조건을 i < fruits.length로 작성하면 배열의 마지막 요소까지 안전하게 접근할 수 있다. 만약 i <= fruits.length로 작성하면 존재하지 않는 인덱스까지 접근하게 되므로 undefined가 출력될 수 있다.

9.4 for 반복문의 실행 흐름

다음 코드를 살펴보자.

let total = 0;

for (let i = 1; i <= 5; i++) {
  total = total + i;
}

console.log(total);

이 코드는 1부터 5까지의 합을 구한다. 변수 total은 누적 합계를 저장하는 변수이다.

실행 흐름은 다음과 같다.

처음에 total은 0이다.
i가 1일 때 total = 0 + 1이 되어 1이 된다.
i가 2일 때 total = 1 + 2가 되어 3이 된다.
i가 3일 때 total = 3 + 3이 되어 6이 된다.
i가 4일 때 total = 6 + 4가 되어 10이 된다.
i가 5일 때 total = 10 + 5가 되어 15가 된다.
그다음 i가 6이 되면 i <= 5 조건이 거짓이므로 반복문이 종료된다.

따라서 최종 출력값은 다음과 같다.

이처럼 반복문은 단순 출력뿐 아니라 누적 계산, 개수 세기, 조건에 맞는 값 찾기 등 다양한 작업의 기본 구조가 된다.

9.5 while 반복문

while 반복문은 조건이 참(true)인 동안 코드 블록을 계속 실행한다. for 반복문이 반복 횟수를 중심으로 작성되는 경우가 많다면, while 반복문은 조건의 유지 여부를 중심으로 작성된다.

while (조건식) {
  // 조건식이 true인 동안 실행할 코드
}

예를 들어 1부터 5까지 출력하는 코드를 while 문으로 작성하면 다음과 같다.

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

이 코드는 for 반복문과 동일하게 1부터 5까지 출력한다. 다만 초기값 let i = 1은 반복문 바깥에 있고, 증감식 i++는 반복문 내부에 있다.

while 반복문에서는 조건식에 사용되는 값이 반복 과정에서 반드시 변하여야 한다. 그렇지 않으면 조건이 계속 참으로 남아 무한 반복(infinite loop)이 발생할 수 있다. 조건에 사용되는 변수를 증가시키거나 감소시키지 않으면 반복문이 끝나지 않을 수 있으며, 브라우저 실행 환경에서는 페이지가 멈추는 문제가 생길 수 있다.

다음 코드는 잘못된 예이다.

let i = 1;

while (i <= 5) {
  console.log(i);
}

위 코드는 i++가 없기 때문에 i가 계속 1이다. 조건식 i <= 5는 계속 참이므로 반복문이 끝나지 않는다.

올바른 코드는 다음과 같다.

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

9.6 do...while 반복문

do...while 반복문은 조건을 검사하기 전에 코드 블록을 먼저 한 번 실행한다. 그 뒤 조건식을 검사하여 조건이 참이면 반복을 계속한다. 따라서 조건이 처음부터 거짓이어도 코드 블록은 최소 한 번 실행된다.

do {
  // 먼저 한 번 실행할 코드
} while (조건식);

예제는 다음과 같다.

let i = 10;

do {
  console.log(i);
  i++;
} while (i <= 5);

위 코드에서 i는 처음부터 10이다. 조건식 i <= 5는 거짓이다. 그러나 do...while 문은 조건을 검사하기 전에 코드 블록을 먼저 실행하므로 10이 한 번 출력된다. 그 후 조건을 검사하고 반복을 종료한다.

실행 결과는 다음과 같다.

do...while 문은 사용자 입력을 최소 한 번 받아야 하거나, 메뉴를 한 번 이상 보여 준 뒤 계속 여부를 판단하는 구조에 적합하다. 다만 초급 단계에서는 for와 while을 먼저 충분히 익힌 뒤 do...while을 비교하여 이해하는 것이 좋다.

9.7 for와 while의 비교

for 반복문과 while 반복문은 모두 조건이 참인 동안 코드를 반복한다. 두 문법은 서로 바꾸어 작성할 수 있는 경우가 많다. while 문은 for 문에서 초기식과 증감식이 반복문 바깥 또는 내부로 분리된 형태로 이해할 수 있다.

다음 두 코드는 같은 결과를 출력한다.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

반복 횟수가 분명하면 for 문이 적합하다. 조건이 언제 거짓이 될지 반복 과정에서 결정된다면 while 문이 적합하다.

예를 들어 배열의 모든 요소를 순서대로 처리할 때에는 for 문을 쓰기 쉽다.

const scores = [80, 90, 75, 100];

for (let i = 0; i < scores.length; i++) {
  console.log(scores[i]);
}

반면 특정 조건이 만족될 때까지 반복할 때에는 while 문이 자연스럽다.

let count = 0;

while (count < 3) {
  console.log("버튼 클릭 대기 중");
  count++;
}

9.8 break 문

break 문은 반복문을 즉시 종료할 때 사용한다. 반복문 안에서 break가 실행되면 더 이상 반복을 계속하지 않고, 반복문 다음 문장으로 실행 흐름이 이동한다. break 문은 반복문과 switch 문에서 사용할 수 있다.

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    break;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

1
2
3

i가 4가 되는 순간 break 문이 실행된다. 이때 반복문은 즉시 종료된다. 따라서 4는 출력되지 않고, 5부터 10까지도 출력되지 않는다.

break 문은 “더 이상 반복할 필요가 없을 때” 사용한다. 예를 들어 배열에서 원하는 값을 찾은 뒤 반복을 멈출 수 있다.

const names = ["민수", "지영", "현우", "서연"];
let target = "현우";

for (let i = 0; i < names.length; i++) {
  if (names[i] === target) {
    console.log(target + "를 찾았다.");
    break;
  }
}

위 코드는 "현우"를 찾는 순간 반복을 멈춘다. 이미 원하는 값을 찾았으므로 남은 요소를 계속 검사할 필요가 없다.

9.9 continue 문

continue 문은 현재 반복 회차(iteration)를 건너뛰고 다음 반복으로 이동할 때 사용한다. break가 반복문 전체를 종료하는 문법이라면, continue는 현재 반복만 건너뛴다.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

i가 3일 때 continue 문이 실행된다. 이때 console.log(i)는 실행되지 않고 다음 반복으로 넘어간다. 따라서 3은 출력되지 않는다.

continue 문은 특정 조건에 해당하는 값만 제외하고 나머지를 처리할 때 유용하다.

const scores = [90, 0, 85, 100, 0, 70];

for (let i = 0; i < scores.length; i++) {
  if (scores[i] === 0) {
    continue;
  }

  console.log(scores[i]);
}

위 코드는 점수가 0인 경우를 건너뛰고 나머지 점수만 출력한다.

9.10 break와 continue의 차이

break와 continue는 모두 반복문의 흐름을 바꾸는 점프문(jump statement)이다. 그러나 역할은 다르다. 제어 흐름에서 점프문은 break, continue, return, throw와 같이 실행 순서를 갑자기 바꾸는 문장으로 구분된다.

break는 반복문을 완전히 종료한다.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    break;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

1
2

continue는 현재 반복만 건너뛰고 다음 반복을 계속한다.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

실행 결과는 다음과 같다.

따라서 break는 “그만 반복하라”는 의미이고, continue는 “이번 차례만 건너뛰라”는 의미이다.

9.11 반복문과 변수 범위

반복문에서 변수를 선언할 때에는 일반적으로 let을 사용한다. let으로 선언한 변수는 블록 범위(block scope)를 가진다. 즉, 반복문 안에서 선언한 변수는 반복문 바깥에서 직접 사용할 수 없다.

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i); // 오류 발생

반면 var로 선언한 변수는 함수 범위(function scope)를 가지므로 반복문 바깥에도 영향을 줄 수 있다. W3Schools의 예제 범위에서도 var로 선언한 반복 변수는 반복문 밖의 변수를 다시 선언하는 결과를 만들 수 있고, let으로 선언한 반복 변수는 반복문 안에서만 보이는 것으로 정리된다.

초급 단계에서는 반복문에서 let을 사용하는 습관이 안전하다.

let i = 100;

for (let i = 0; i < 3; i++) {
  console.log("반복문 안:", i);
}

console.log("반복문 밖:", i);

실행 결과는 다음과 같다.

반복문 안: 0
반복문 안: 1
반복문 안: 2
반복문 밖: 100

반복문 안의 i와 반복문 밖의 i는 서로 다른 범위에 존재한다. 따라서 반복문 안에서 i가 0, 1, 2로 변하여도 반복문 밖의 i는 100을 유지한다.

9.12 반복문 작성 시 주의할 점

반복문은 강력한 문법이지만, 조건과 증감식을 잘못 작성하면 오류가 발생하기 쉽다.

첫째, 종료 조건을 분명히 작성하여야 한다.

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

위 코드는 i가 10보다 커지면 종료된다. 종료 조건이 분명하므로 안전하다.

둘째, while 문에서는 조건식에 사용되는 값이 반복문 안에서 변하여야 한다.

let i = 1;

while (i <= 10) {
  console.log(i);
  i++;
}

셋째, 배열을 반복할 때에는 인덱스 범위를 조심하여야 한다.

const colors = ["red", "green", "blue"];

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

배열의 마지막 인덱스는 length - 1이다. 따라서 조건식은 보통 i < 배열.length로 작성한다.

넷째, break와 continue를 남용하지 않아야 한다. 두 문법은 반복 흐름을 바꿀 때 유용하지만, 지나치게 많이 사용하면 코드의 실행 흐름을 읽기 어려워질 수 있다. 필요한 조건에서만 명확하게 사용하여야 한다.

9.13 예제: 짝수만 출력하기

다음 코드는 1부터 10까지의 숫자 중 짝수만 출력한다.

for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }

  console.log(i);
}

i % 2는 i를 2로 나눈 나머지이다. 짝수는 2로 나누었을 때 나머지가 0이다. 위 코드에서는 홀수인 경우 continue를 실행하여 출력하지 않고 다음 반복으로 넘어간다.

실행 결과는 다음과 같다.

9.14 예제: 합계가 20을 넘으면 반복 종료하기

다음 코드는 1부터 차례대로 더하다가 합계가 20을 넘으면 반복을 종료한다.

let total = 0;

for (let i = 1; i <= 10; i++) {
  total = total + i;

  if (total > 20) {
    break;
  }
}

console.log(total);

실행 흐름은 다음과 같다.

1을 더하면 합계는 1이다.
2를 더하면 합계는 3이다.
3을 더하면 합계는 6이다.
4를 더하면 합계는 10이다.
5를 더하면 합계는 15이다.
6을 더하면 합계는 21이다.

합계가 20을 넘었으므로 break 문이 실행되고 반복문이 종료된다. 최종 출력값은 다음과 같다.

9.15 예제: 웹 페이지 목록 만들기

반복문은 웹 페이지에서 여러 개의 HTML 요소를 만들 때 자주 사용된다. 다음 예제는 배열에 저장된 과목명을 목록 형태의 문자열로 만든다.

const subjects = ["HTML", "CSS", "JavaScript"];
let html = "<ul>";

for (let i = 0; i < subjects.length; i++) {
  html = html + "<li>" + subjects[i] + "</li>";
}

html = html + "</ul>";

console.log(html);

실행 결과는 다음과 같은 문자열이다.

<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>

이 문자열을 실제 웹 문서의 특정 영역에 넣으면 목록 형태로 화면에 표시할 수 있다.

document.getElementById("subjectList").innerHTML = html;

반복문은 데이터와 화면을 연결하는 기초 문법이다. 배열에 저장된 데이터를 반복하여 HTML 구조로 바꾸면, 같은 코드를 여러 번 작성하지 않고도 여러 항목을 화면에 출력할 수 있다.

9.16 핵심 정리

반복문(loop)은 같은 코드 블록을 여러 번 실행하기 위한 제어 구조이다. for 문은 반복 횟수가 분명할 때 적합하고, while 문은 조건이 참인 동안 반복할 때 적합하다. do...while 문은 조건 검사 전에 코드 블록을 최소 한 번 실행한다.

break 문은 반복문을 즉시 종료한다. continue 문은 현재 반복만 건너뛰고 다음 반복으로 이동한다. 두 문법은 반복문의 흐름을 바꾸는 점프문(jump statement)이다.

반복문을 작성할 때에는 초기값, 조건식, 증감식의 관계를 정확히 이해하여야 한다. 특히 while 문에서는 조건에 사용되는 값이 반복문 안에서 변하지 않으면 무한 반복이 발생할 수 있다. 배열과 반복문을 함께 사용할 때에는 인덱스가 0부터 시작하고 마지막 인덱스가 length - 1이라는 점을 주의하여야 한다.

반복문은 단순한 반복 출력 문법이 아니라, 데이터를 처리하고 화면을 구성하며 프로그램의 흐름을 자동화하는 핵심 문법이다.

9.17 확인 문제

반복문이 필요한 상황을 하나 예로 들어 설명하라.
다음 코드의 실행 결과를 쓰시오.

for (let i = 1; i <= 4; i++) {
  console.log(i);
}

다음 코드에서 무한 반복이 발생하는 이유를 설명하라.

let i = 1;

while (i <= 5) {
  console.log(i);
}

break와 continue의 차이를 설명하라.
다음 코드의 실행 결과를 쓰시오.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

배열 scores에 저장된 점수 중 80점 이상만 출력하는 코드를 작성하라.

const scores = [70, 85, 90, 60, 100];

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

multiking

티스토리 뷰