JS 1.10 · 1부. 기본 문법

반복문

for 와 while 로 같은 일을 되풀이하고, 무한 루프를 피하는 방법을 봅니다.

예상 학습 시간 16분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 초급
개념 설명

같은 일을 되풀이합니다

1부터 100까지 출력하려고 console.log 를 백 번 적을 수는 없습니다. 반복문은 끝나는 조건을 정해 두고 그때까지 같은 코드를 되풀이합니다.

모양
for (시작; 계속할 조건; 한 번 끝날 때마다) {
	되풀이할 코드
}

세 자리를 세미콜론으로 구분해 적습니다. 조건이 거짓이 되면 반복이 끝납니다.

최소 예제 · 편집 가능

세 번 되풀이하기

script.js
for (let i = 1; i <= 3; i++) {
	console.log(i);
}
출력
1 2 3

i 는 지금 몇 번째인지 담아 두는 변수입니다. 1 로 시작해 한 번 끝날 때마다 1 씩 늘고, 3 을 넘으면 멈춥니다.

상세 사용법

구구단 출력하기

script.js
const dan = 3;

for (let i = 1; i <= 9; i++) {
	console.log(`${dan} x ${i} = ${dan * i}`);
}
출력
3 x 1 = 3 3 x 2 = 6 3 x 3 = 9 3 x 4 = 12 3 x 5 = 15 3 x 6 = 18 3 x 7 = 21 3 x 8 = 24 3 x 9 = 27

값을 끼워 넣는 자리에는 변수뿐 아니라 계산식도 적을 수 있습니다.

상세 사용법

while 로 합계 구하기

while 은 조건 하나만 적습니다. 몇 번 되풀이할지 미리 알기 어려울 때 사용합니다.

script.js
let sum = 0;
let i = 1;

while (i <= 100) {
	sum += i;
	i++;
}

console.log(sum);
출력
5050

i++ 를 빠뜨리면 조건이 영영 참이라 멈추지 않습니다. 그것을 무한 루프 라고 합니다.

상세 사용법

중간에 멈추고 건너뛰기

break 는 반복을 끝내고, continue 는 이번 회차만 건너뜁니다.

script.js
for (let i = 1; i <= 10; i++) {
	if (i % 2 === 1) {
		continue;
	}
	if (i > 6) {
		break;
	}
	console.log(i);
}
출력
2 4 6

홀수는 건너뛰고, 6 을 넘으면 끝냅니다.

흔한 실수

처음에 자주 걸리는 것

1. 무한 루프를 만듭니다

조건이 영영 참이면 멈추지 않습니다. while 안에서 값을 바꾸는 줄을 빠뜨렸는지 확인하세요. 이 화면에서는 3초가 지나면 실행을 멈추고 알려 줍니다.

while (i <= 100) {
    sum += i;   // i 를 늘리지 않아 영영 끝나지 않습니다
}
2. 조건의 등호를 잘못 적습니다

i < 3 은 두 번, i <= 3 은 세 번 되풀이합니다. 한 번 모자라거나 한 번 더 도는 실수가 자주 나옵니다.

3. 반복 밖에서 i 를 사용합니다

for 안에서 let 으로 선언한 변수는 그 안에서만 보입니다. 밖에서 읽으면 없다고 알려 줍니다.

ReferenceError: i is not defined
실습 문제

직접 해보기

1. 1부터 10까지 짝수만 출력하기 난이도 하

반복문과 조건문을 함께 사용해 짝수만 출력하세요.

2로 나눈 나머지가 0인 것만 출력하면 됩니다.
for (let i = 1; i <= 10; i++) { if (i % 2 === 0) { console.log(i); } }
2. 별 쌓기 난이도 중

별이 한 줄에 하나씩 늘어나는 모양을 다섯 줄 출력하세요. 첫 줄은 *, 다섯째 줄은 ***** 입니다.

글자에 repeat 를 사용하면 그 수만큼 되풀이한 글자를 얻습니다.
for (let i = 1; i <= 5; i++) { console.log("*".repeat(i)); }
실습 문제

파트 1 미니 실습 — 콘솔 계산기

지금까지 배운 것을 모아 봅니다 난이도 상

두 수와 연산자를 변수에 담고, 연산자에 맞는 계산 결과를 7 + 2 = 9 형태로 출력하세요. 아래 세 가지를 모두 지켜야 합니다.

  • 연산자는 "+" · "-" · "*" · "/" 넷을 다룹니다.
  • 모르는 연산자가 오면 "알 수 없는 연산자입니다" 를 출력합니다.
  • 0으로 나누면 계산하지 말고 "0으로 나눌 수 없습니다" 를 출력합니다.
연산자 하나를 여러 후보와 견주는 자리이므로 switch 가 맞습니다(1.9). 0으로 나누는 것은 나누기 안에서 if 로 먼저 걸러 냅니다.
const a = 7; const b = 2; const op = "+"; switch (op) { case "+": console.log(`${a} + ${b} = ${a + b}`); break; case "-": console.log(`${a} - ${b} = ${a - b}`); break; case "*": console.log(`${a} * ${b} = ${a * b}`); break; case "/": if (b === 0) { console.log("0으로 나눌 수 없습니다"); } else { console.log(`${a} / ${b} = ${a / b}`); } break; default: console.log("알 수 없는 연산자입니다"); }

opb 값을 바꿔 가며 네 가지 연산과 두 가지 예외를 모두 확인해 보세요. 여기까지 하면 파트 1 이 끝납니다.

요약

이 단원의 정리

  • for 는 시작·조건·증감 세 자리를 세미콜론으로 구분해 적습니다.
  • while 은 조건만 적습니다. 안에서 값을 바꿔야 끝납니다.
  • break 는 반복을 끝내고 continue 는 이번 회차만 건너뜁니다.
  • 조건이 영영 참이면 무한 루프입니다. 이 화면에서는 3초 뒤에 멈춥니다.
  • for 안에서 선언한 변수는 그 안에서만 보입니다.