같은 일을 여러 번 시키고 싶을 때
코드를 쓰다 보면 같은 일을 여러 번 해야 할 때가 많습니다.
예를 들어 1부터 10까지 출력한다고 해 봅시다. 일단 5까지만 손으로 써도 벌써 이런 모양이 됩니다.
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);5까지는 손으로 쓸 수 있습니다. 하지만 100까지 출력해야 한다면 어떨까요? 장바구니 상품이 3개가 아니라 300개라면 어떨까요?
이때 필요한 것이 반복문입니다. 반복문은 같은 일을 정해진 규칙에 따라 여러 번 실행하는 문법입니다. 반복문은 '같은 일을 대신 해 주는 직원'처럼 생각하면 좋습니다.
직원에게는 세 가지를 알려 주어야 합니다.
어디서 시작할지
언제까지 할지
한 번 끝날 때마다 어떻게 다음으로 넘어갈지
자바스크립트의 대표적인 반복문인 for 문은 이 세 가지를 한 줄에 적습니다.
for (시작값; 조건; 증가식) {
반복해서 실행할 코드
}아직 낯설어 보여도 괜찮습니다. 실제 코드로 보면 더 잘 보입니다.
AI 생성 이미지
for 문으로 1부터 10까지 출력하기
브라우저 콘솔에 다음 코드를 입력해 보세요.
for (let number = 1; number <= 10; number++) {
console.log(number);
}콘솔에는 1부터 10까지 차례대로 출력됩니다.
1
2
3
4
5
6
7
8
9
10이 코드를 세 부분으로 나누어 보겠습니다.
let number = 1반복을 시작할 값을 정합니다. 여기서는 number가 1에서 시작합니다. 이 부분은 반복문이 시작될 때 한 번만 실행됩니다.
number <= 10반복을 계속할 조건입니다. number가 10보다 작거나 같을 동안만 중괄호 안의 코드가 실행됩니다.
number++한 번 반복이 끝날 때마다 number를 1씩 늘립니다. number++는 number = number + 1과 같은 뜻으로 이해하면 됩니다.
전체 흐름은 이렇습니다.
number를 1로 시작한다.number <= 10인지 확인한다.맞으면
console.log(number);를 실행한다.number++로 1을 더한다.다시 조건을 확인한다.
조건이 맞지 않으면 반복을 끝낸다.
조건문에서 배운 것처럼 조건 자리에는 true 또는 false로 판단되는 식이 들어갑니다. 여기서도 number <= 10이 true이면 반복하고, false가 되면 멈춥니다.
주의할 점이 있습니다. 조건 자리에는 보통 비교를 써야 합니다.
number <= 10다음처럼 = 하나만 쓰면 값을 비교하는 것이 아니라 값을 넣는 뜻이 됩니다.
number = 10=는 대입, ===나 <= 같은 기호는 비교입니다. 반복문 안에서도 이 차이는 중요합니다. 특히 조건 자리에 실수로 =를 쓰면 반복이 예상과 다르게 계속 실행될 수 있으니 조심하세요.
장바구니 가격을 하나씩 더하기
반복문은 숫자를 출력할 때보다 목록을 다룰 때 더 자주 씁니다.
다음은 장바구니 상품 가격 목록입니다.
const prices = [12000, 8000, 15000];
let total = 0;
for (let index = 0; index < prices.length; index++) {
total = total + prices[index];
}
console.log('총 금액: ' + total + '원');결과는 다음과 같습니다.
총 금액: 35000원여기서 prices는 여러 값을 담은 목록입니다. 자바스크립트에서는 이런 목록을 배열이라고 부릅니다. 배열은 뒤에서 더 자세히 다루지만, 지금은 대괄호 안에 여러 값을 넣은 묶음이라고 이해하면 충분합니다.
const prices = [12000, 8000, 15000];배열의 각 값에는 위치 번호가 있습니다. 이 위치 번호를 인덱스라고 합니다. 중요한 점은 첫 번째 위치가 1이 아니라 0이라는 것입니다.
prices[0] → 12000
prices[1] → 8000
prices[2] → 15000그래서 반복문도 보통 0에서 시작합니다.
for (let index = 0; index < prices.length; index++)prices.length는 목록에 들어 있는 항목의 개수입니다. 위 예제에서는 3입니다.
그런데 마지막 인덱스는 3이 아니라 2입니다. 첫 번째가 0이기 때문입니다. 그래서 조건을 이렇게 씁니다.
index < prices.length만약 다음처럼 쓰면 문제가 생길 수 있습니다.
index <= prices.length이 경우 index가 3일 때도 반복이 실행됩니다. 하지만 prices[3]은 없습니다. 존재하지 않는 값을 더하려고 하면 계산 결과가 NaN이 될 수 있습니다. 이전에 본 것처럼 NaN은 숫자 계산에 실패했다는 신호입니다.
반복문에서 이상한 결과가 나오면 먼저 조건을 확인하세요. 특히 <와 <=를 잘못 쓴 경우가 많습니다.
for...of로 목록을 더 편하게 읽기
방금 본 for 문은 강력하지만 처음에는 조금 복잡해 보입니다.
목록의 항목을 처음부터 끝까지 하나씩 꺼내기만 하면 된다면 for...of를 쓰면 더 읽기 쉽습니다.
const prices = [12000, 8000, 15000];
let total = 0;
for (const price of prices) {
total = total + price;
}
console.log('총 금액: ' + total + '원');결과는 같습니다.
총 금액: 35000원이 코드는 이렇게 읽을 수 있습니다.
prices 안의 price를 하나씩 꺼내서 반복한다.첫 번째 반복에서 price는 12000입니다. 두 번째 반복에서는 8000, 세 번째 반복에서는 15000이 됩니다.
for...of는 인덱스를 직접 다루지 않아도 됩니다. 그래서 단순히 목록의 모든 항목을 확인하거나 출력할 때 초보자가 읽기 좋습니다. 반대로 "몇 번째 항목인지"가 꼭 필요하다면 앞에서 본 index를 사용하는 for 문이 더 편할 수 있습니다.
예를 들어 점수 목록을 하나씩 검사할 수 있습니다.
const scores = [90, 45, 72, 100];
for (const score of scores) {
if (score >= 60) {
console.log(score + '점: 통과');
} else {
console.log(score + '점: 재도전');
}
}조건문과 반복문은 자주 함께 쓰입니다. 반복문이 항목을 하나씩 꺼내고, 조건문이 각 항목의 상태를 판단합니다.
while 문은 조건이 맞는 동안 반복한다
for 문은 반복 횟수를 어느 정도 알고 있을 때 자주 씁니다. 1부터 10까지, 목록의 처음부터 끝까지처럼 범위가 분명한 경우입니다.
반대로 몇 번 반복할지보다 '조건이 맞는 동안 계속한다'가 더 자연스러운 상황도 있습니다. 이때 while 문을 씁니다.
let count = 1;
while (count <= 5) {
console.log(count + '번째 실행');
count++;
}while은 이렇게 읽으면 됩니다.
count가 5보다 작거나 같은 동안 반복한다.결과는 다음과 같습니다.
1번째 실행
2번째 실행
3번째 실행
4번째 실행
5번째 실행while 문에서 특히 조심할 점은 조건을 언젠가 false로 만들어야 한다는 것입니다.
다음 코드는 위험합니다.
let count = 1;
while (count <= 5) {
console.log(count + '번째 실행');
}count++가 없기 때문에 count는 계속 1입니다. 조건 count <= 5가 계속 참이어서 반복이 끝나지 않습니다. 이런 상황을 무한 반복이라고 합니다.
브라우저 콘솔이 멈춘 것처럼 보이면 페이지를 새로고침하면 됩니다. 실수해도 괜찮습니다. 다만 while 문을 쓸 때는 반복 안에서 조건에 영향을 주는 값이 바뀌는지 꼭 확인하세요.
break로 반복을 중간에 멈추기
반복문은 원래 조건이 끝날 때까지 계속됩니다. 하지만 원하는 값을 찾았다면 더 반복할 필요가 없을 때도 있습니다.
예를 들어 쿠폰 목록에서 사용할 쿠폰을 찾는다고 해 봅시다.
const coupons = ['WELCOME', 'SUMMER', 'VIP'];
const targetCoupon = 'SUMMER';
for (const coupon of coupons) {
console.log(coupon + ' 확인 중');
if (coupon === targetCoupon) {
console.log('사용할 쿠폰을 찾았습니다: ' + coupon);
break;
}
}결과는 다음과 같습니다.
WELCOME 확인 중
SUMMER 확인 중
사용할 쿠폰을 찾았습니다: SUMMERVIP는 출력되지 않습니다. SUMMER를 찾은 순간 break가 반복문을 끝냈기 때문입니다.
break는 '여기서 반복을 멈추고 밖으로 나가라'는 지시입니다. 더 볼 필요가 없는 상황에서 사용합니다.
continue로 이번 차례만 건너뛰기
이번에는 사용이 끝난 쿠폰은 검사하지 않고 건너뛰고 싶다고 해 봅시다.
const coupons = ['WELCOME', 'EXPIRED', 'SUMMER'];
for (const coupon of coupons) {
if (coupon === 'EXPIRED') {
console.log('만료된 쿠폰은 건너뜁니다.');
continue;
}
console.log(coupon + ' 쿠폰을 확인합니다.');
}결과는 다음과 같습니다.
WELCOME 쿠폰을 확인합니다.
만료된 쿠폰은 건너뜁니다.
SUMMER 쿠폰을 확인합니다.continue는 반복문 전체를 끝내지 않습니다. 지금 차례만 건너뛰고 다음 항목으로 넘어갑니다.
정리하면 이렇습니다.
break: 반복을 완전히 끝낸다.continue: 이번 한 번만 건너뛰고 다음 반복으로 간다.
두 단어는 비슷해 보이지만 역할이 다릅니다. 쿠폰을 찾았으면 break, 검사할 필요 없는 항목만 넘기려면 continue입니다.
작은 실습: 무료 배송까지 남은 금액 계산하기
다음 코드를 콘솔에 입력해 보세요.
const cartPrices = [12000, 7000, 5000];
let total = 0;
for (const price of cartPrices) {
total = total + price;
}
console.log('현재 주문 금액: ' + total + '원');
if (total >= 30000) {
console.log('무료 배송입니다.');
} else {
console.log('무료 배송까지 ' + (30000 - total) + '원 남았습니다.');
}이 예제에는 지금까지 배운 내용이 함께 들어 있습니다.
변수와 상수로 값을 저장한다.
배열에 여러 가격을 담는다.
반복문으로 가격을 하나씩 더한다.
조건문으로 무료 배송 여부를 판단한다.
문자열과 숫자를 연결해 안내 문구를 만든다.
반복문을 배우면 코드를 복사해서 여러 번 쓰는 일이 줄어듭니다. 상품이 3개든 30개든 같은 구조로 처리할 수 있습니다. 이 점이 반복문의 가장 큰 힘입니다.
반복문을 읽는 습관
반복문이 어렵게 느껴질 때는 한 번에 전체를 이해하려고 하지 말고 다음 순서로 읽어 보세요.
반복에 사용할 값은 어디서 시작하는가?
어떤 조건일 때 계속 반복하는가?
한 번 반복할 때마다 값이 어떻게 바뀌는가?
반복 안에서 실제로 하는 일은 무엇인가?
중간에
break나continue가 있는가?
처음에는 반복이 몇 번 실행되는지 손으로 적어 보는 것도 좋습니다.
for (let number = 1; number <= 3; number++) {
console.log(number);
}이 코드는 머릿속으로 이렇게 따라가면 됩니다.
number = 1 → 출력 → 2가 됨
number = 2 → 출력 → 3이 됨
number = 3 → 출력 → 4가 됨
number = 4 → 조건이 false → 끝반복문은 많은 일을 한 번에 처리하는 문법입니다. 하지만 실제로는 한 번에 하나씩 차례대로 실행됩니다. 이 감각을 잡으면 목록 출력, 합계 계산, 점수 검사, 쿠폰 찾기 같은 작업을 훨씬 짧고 안전하게 작성할 수 있습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.