반복문으로 같은 작업 자동화하기

2026-04-04Views 13약 5분

같은 코드를 여러 번 쓰지 않는 방법

프로그래밍을 하다 보면 비슷한 일을 계속 반복해야 할 때가 많습니다. 숫자 1부터 10까지 출력하거나, 장바구니에 담긴 상품 이름을 하나씩 보여주거나, 학생 점수를 모두 확인하는 일처럼 말입니다. 이때 똑같은 코드를 여러 줄 복사해서 붙여 넣으면 당장은 돌아가도 금방 지저분해집니다.

반복문은 이런 상황에서 빛을 냅니다. 한 번 규칙을 정해 두면, 자바스크립트가 그 규칙에 따라 같은 작업을 여러 번 실행해 줍니다. 즉, 사람이 손으로 반복하던 일을 코드가 대신 해 주는 것입니다.

반복문의 핵심은 아주 단순합니다. 어떤 조건이 참인 동안 같은 코드를 계속 실행하는 것입니다. 그리고 조건이 거짓이 되면 멈춥니다.¹

for문: 반복 횟수를 대충이라도 알 때

가장 많이 쓰는 반복문은 for문입니다. 몇 번 정도 반복할지 감이 잡히는 경우에 특히 잘 어울립니다. for문은 보통 시작값, 계속할 조건, 한 번 돌고 난 뒤의 변화를 한 줄에 모아 씁니다.¹

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

이 코드는 1부터 5까지 출력합니다.

여기서 let i = 1은 시작점입니다. i <= 5는 반복을 계속할지 검사하는 조건입니다. i++는 한 번 실행할 때마다 i를 1씩 늘리라는 뜻입니다. 읽는 순서는 처음 한 번 시작점을 만들고, 조건을 확인하고, 코드 블록을 실행한 뒤, 값을 바꾸고, 다시 조건을 확인하는 흐름입니다.¹

숫자를 세는 일뿐 아니라 배열을 다룰 때도 for문은 아주 유용합니다.

const fruits = ['사과', '바나나', '포도'];

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

배열은 0번부터 시작하므로 i = 0에서 출발합니다. fruits.length는 배열의 길이, 즉 과일 개수입니다. 그래서 이 코드는 배열의 처음부터 끝까지 차례대로 접근합니다.

처음에는 i, length, i++ 같은 표현이 낯설 수 있습니다. 하지만 익숙해지면 for문은 반복 작업의 기본 도구처럼 느껴집니다. 마치 컨베이어 벨트 위에 물건이 하나씩 지나오고, 우리는 같은 작업을 반복하는 느낌입니다.

while문: 언제 끝날지 정확히 모를 때

while문은 반복 횟수보다 종료 조건이 더 중요할 때 잘 맞습니다. 말 그대로 조건이 참인 동안 계속 실행합니다.²

let energy = 3;

while (energy > 0) {
  console.log('작업 실행');
  energy--;
}

이 코드는 energy가 0보다 큰 동안 반복됩니다. 한 번 돌 때마다 energy--로 에너지를 1씩 줄입니다. 에너지가 0이 되면 조건이 거짓이 되어 멈춥니다.

while문에서 가장 중요한 점은 조건을 바꾸는 코드가 꼭 있어야 한다는 것입니다. 만약 값을 줄이거나 늘리는 코드를 빼먹으면, 조건이 계속 참으로 남아서 끝나지 않는 반복이 될 수 있습니다. 이런 상황을 무한 반복, 또는 무한 루프라고 부릅니다.²

let count = 0;

while (count < 3) {
  console.log(count);
  count++;
}

이 예제는 0, 1, 2를 출력하고 끝납니다. 반대로 count++가 없다면 count는 계속 0이라서 멈추지 않습니다. 브라우저가 버벅거릴 수 있으니 아주 조심해야 합니다.

또 하나 기억할 점이 있습니다. while문은 조건을 먼저 검사합니다. 그래서 처음부터 조건이 거짓이면 한 번도 실행되지 않습니다.²

참고로 do...while이라는 문법도 있습니다. 이것은 조건을 나중에 검사해서, 코드가 최소 한 번은 실행됩니다. 자주 쓰는 편은 아니지만 while과의 차이를 알고 있으면 나중에 도움이 됩니다.¹

for문과 while문은 어떻게 다를까

두 문법은 할 수 있는 일이 많이 겹칩니다. 같은 작업을 for로도, while로도 표현할 수 있는 경우가 많습니다. 차이는 읽는 느낌에 있습니다.

반복 횟수가 비교적 분명하면 for문이 읽기 쉽습니다. 시작값, 조건, 변화가 한 줄에 모여 있기 때문입니다. 반대로 언제 끝날지보다 어떤 상태가 유지되는지가 더 중요하면 while문이 자연스럽습니다.

예를 들어 배열을 처음부터 끝까지 도는 일은 보통 for문이 잘 어울립니다. 반면 사용자가 올바른 값을 입력할 때까지 계속 확인하는 일은 while문이 더 잘 어울립니다.

for...of문: 값이 필요할 때 가장 편한 반복문

배열이나 문자열처럼 여러 값을 순서대로 담고 있는 자료를 다룰 때는 for...of가 무척 편합니다. 이 문법은 인덱스를 직접 다루지 않고, 값 자체를 하나씩 꺼내 줍니다.³

const fruits = ['사과', '바나나', '포도'];

for (const fruit of fruits) {
  console.log(fruit);
}

이 코드는 사과, 바나나, 포도를 차례대로 출력합니다. fruit에는 현재 값이 들어갑니다. fruits[0], fruits[1]처럼 인덱스를 직접 쓰지 않아도 되니 코드가 훨씬 읽기 쉬워집니다.

문자열에도 사용할 수 있습니다.

for (const ch of 'JS') {
  console.log(ch);
}

실행 결과는 J, S입니다. 문자열도 글자들을 순서대로 꺼낼 수 있기 때문입니다.³

다만 for...of는 배열, 문자열처럼 반복 가능한 값에 사용합니다. 일반 객체는 바로 for...of로 돌릴 수 없습니다.³

const user = {
  name: '민수',
  age: 20
};

// for (const item of user) {
//   console.log(item);
// }

이 코드는 그대로는 동작하지 않습니다. 객체 반복은 다음 장들에서 더 자연스럽게 다루게 되니, 지금은 for...of를 배열과 문자열의 반복문으로 기억해 두면 충분합니다.

break: 반복을 여기서 끝내기

반복문은 조건이 거짓이 되면 끝나지만, 중간에 더 볼 필요가 없어질 때도 있습니다. 그럴 때 break를 사용합니다. break는 현재 반복문을 즉시 종료합니다.¹

const numbers = [3, 7, 11, 20, 25];

for (const number of numbers) {
  if (number === 20) {
    console.log('찾았다!');
    break;
  }

  console.log(number);
}

이 코드는 3, 7, 11을 출력하다가 20을 만나면 찾았다!를 출력하고 반복을 멈춥니다. 25는 확인하지 않습니다.

break는 탐색 문제에서 아주 자주 씁니다. 예를 들어 시험 답안에서 첫 번째 오답만 찾고 싶다거나, 상품 목록에서 원하는 상품을 발견하면 더 이상 뒤를 볼 필요가 없는 경우에 유용합니다.

continue: 이번 한 번만 건너뛰기

continue는 반복문 전체를 끝내지 않습니다. 대신 현재 한 번의 반복만 건너뛰고 다음 반복으로 넘어갑니다.¹

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

  console.log(i);
}

이 코드는 1, 2, 4, 5를 출력합니다. 3일 때는 continue가 실행되어 아래쪽 코드가 건너뛰어지기 때문입니다.

이 문법은 특정 조건만 제외하고 나머지는 모두 처리하고 싶을 때 편합니다. 예를 들어 품절 상품만 건너뛰고 출력하거나, 짝수는 무시하고 홀수만 출력할 때 사용할 수 있습니다.

const scores = [90, -1, 80, -1, 100];

for (const score of scores) {
  if (score === -1) {
    continue;
  }

  console.log(score);
}

여기서 -1은 결석처럼 특별한 값을 뜻한다고 가정해 봅시다. 그러면 실제 점수만 골라서 처리할 수 있습니다.

continue를 while문에서 쓸 때 조심할 점

continue는 편리하지만 while문에서는 특히 위치를 조심해야 합니다. 조건을 바꾸는 코드보다 먼저 continue가 실행되면, 값이 갱신되지 않아 무한 반복이 될 수 있기 때문입니다.

아래 코드는 안전한 예시입니다.

let i = 0;

while (i < 5) {
  i++;

  if (i === 3) {
    continue;
  }

  console.log(i);
}

이 코드는 1, 2, 4, 5를 출력합니다. 먼저 i++가 실행되므로 continue가 나와도 숫자는 계속 앞으로 나아갑니다.

반대로 값을 바꾸는 코드가 continue 아래에 있으면, 어떤 숫자에서 영원히 멈춰 버릴 수 있습니다. 초보자가 자주 하는 실수라 꼭 기억해 두면 좋습니다.

어떤 반복문을 고르면 좋을까

처음에는 문법이 많아 보여도, 고르는 기준은 단순합니다.

반복 횟수가 비교적 분명하면 for
종료 조건이 더 중요하고 몇 번 반복할지 모르겠다면 while
배열이나 문자열의 값을 하나씩 꺼내고 싶다면 for...of

이 세 가지 기준만 기억해도 대부분의 기초 문제를 풀 수 있습니다.

자주 하는 실수

반복문은 강력하지만, 작은 실수 하나로 결과가 완전히 달라질 수 있습니다.

조건을 바꾸는 코드를 빼먹어서 무한 반복 만들기
break와 continue의 역할을 반대로 기억하기
값이 필요한 상황에서 복잡하게 인덱스를 다루다가 코드가 어려워지기

반복문이 이상하게 동작할 때는 조건, 변수 변화, 그리고 break나 continue가 실제로 언제 실행되는지를 천천히 확인해 보세요. 디버깅할 때는 console.log(i)처럼 중간값을 찍어 보는 습관이 큰 도움이 됩니다.

직접 손으로 읽어 보면 더 빨리 익숙해진다

반복문은 머리로만 보면 어렵고, 한 줄씩 따라가 보면 갑자기 쉬워집니다. 예를 들어 아래 코드를 보고 결과를 먼저 예상해 보세요.

for (let i = 1; i <= 4; i++) {
  if (i === 2) {
    continue;
  }

  if (i === 4) {
    break;
  }

  console.log(i);
}

i가 1일 때는 출력됩니다. i가 2일 때는 건너뜁니다. i가 3일 때는 출력됩니다. i가 4일 때는 반복이 끝납니다. 그래서 결과는 1, 3입니다.

반복문이 어렵게 느껴질 때는 꼭 이렇게 손으로 추적해 보세요. 종이에 i 값이 어떻게 변하는지 적어 보는 것만으로도 이해가 훨씬 빨라집니다.

마무리

반복문을 배우면 같은 코드를 여러 번 쓰지 않아도 됩니다. 한 번의 규칙으로 많은 데이터를 처리할 수 있고, 작업을 자동화할 수 있습니다. 이것이 반복문의 가장 큰 힘입니다.

for문은 반복 횟수가 보일 때 든든하고, while문은 조건 중심으로 생각할 때 자연스럽고, for...of는 배열과 문자열을 다룰 때 정말 편합니다. 여기에 break와 continue까지 익히면, 반복을 멈추거나 건너뛰는 제어도 할 수 있습니다.

이제 자바스크립트 코드는 조금 더 똑똑해졌습니다. 다음 단계에서는 반복해서 실행할 코드를 한 덩어리로 묶어 두고, 필요할 때마다 꺼내 쓰는 방법을 배우게 됩니다. 바로 함수입니다.

참고

¹MDN Loops and iteration

²javascript.info while and for

³MDN for...of

책 목록

처음부터 제대로 배우는 JavaScript 기초

전체 목차 보기