왕진 블로그
JavaScript 반복문 —
for · while · do-while 완전 정리
반복문 3형제 중 먼저 for문 코드를 본다. size라는 변수를 10부터 35까지 5씩 늘려가며 그때그때 글자 크기가 다른 <span>을 화면에 출력하는 코드다. 아래에서 while·do-while 버전도 이어서 다룬다.
let size=10)size+=5)위 코드가 하는 일은 document.write를 6번 다른 크기로 실행하는 것이다. 반복문이 없다면 아래처럼 크기 값만 바꿔서 같은 줄을 6번 써야 한다.
이 방식은 6번이라 그나마 참을 만하지만, 만약 1000번 반복해야 한다면? 또는 반복 횟수가 사용자 입력에 따라 매번 달라진다면? 코드로 직접 다 쓸 수 없다. "바뀌는 부분만 변수로 남기고, 나머지는 컴퓨터에게 반복시키는 것"이 반복문의 존재 이유다.
for문 괄호 안에는 세미콜론(;)으로 구분된 세 부분이 들어간다. 순서와 역할이 정확히 정해져 있다.
| 부분 | 이번 코드 | 실행 시점 |
|---|---|---|
| ① 초기식 | let size=10 |
맨 처음 딱 1번만 |
| ② 조건식 | size<=35 |
매 바퀴 시작 전마다 |
| ③ 증감식 | size+=5 |
매 바퀴 끝날 때마다 |
실제 실행 순서는 "① → (②검사 → 코드실행 → ③) → (②검사 → 코드실행 → ③) → ... → ②에서 거짓이 되면 종료"다. 화살표로 보면 다음과 같다.
size += 5는 size = size + 5의 줄임 표현이다. "지금 size 값에 5를 더해서 다시 size에 저장하라"는 뜻이다. 이 한 줄이 매 바퀴 끝에서 실행되기 때문에 size 값이 10 → 15 → 20 → 25 → 30 → 35로 커진다.
즉 코드 안에서는 document.write가 딱 한 번만 등장하지만, size 값이 바뀌면서 실제로는 6번 실행된 것과 같은 효과가 난다. 그 사이에 완성되는 문자열은 "<span style='font-size:10px'>10px</span>"처럼 size 값이 그대로 텍스트 속 숫자로 들어간 것이다.
while문은 for문보다 구조가 더 단순하다. 괄호 안에 조건식 하나만 들어간다. 초기식과 증감식은 while 바깥과 안쪽에 각자 따로 써야 한다.
여기서 let i=0, sum=0;이 초기식 역할, i<=n이 조건식, i++이 증감식이다. 다만 for처럼 한 줄에 모아두지 않고 각자 흩어져 있을 뿐, 하는 일은 완전히 똑같다.
초기식·조건식·증감식이라는 세 요소만 있으면 어떤 반복문으로도 똑같은 결과를 만들 수 있다. n=5일 때 0+1+2+3+4+5=15를 구하는 코드를 두 스타일로 비교하면 다음과 같다.
for(let i=0; i<=n; i++){
sum += i;
}let i=0;
while(i<=n){
sum += i;
i++;
}for가 한눈에 들어와 편하다. 반복을 "언제 멈출지"가 더 중요한 조건 중심 로직이면 while이 자연스럽다.do-while은 while과 하는 일은 같지만 조건 검사 위치가 코드 뒤다. 즉 조건이 거짓이더라도 do{} 안의 코드는 일단 한 번은 실행되고 나서 조건을 확인한다.
→ 조건이 처음부터 거짓이면 코드는 0번 실행
→ 조건이 처음부터 거짓이어도 코드는 최소 1번 실행
prompt에서 취소를 누르거나 n=0을 넣어도, do-while은 sum += 0; i++;이 한 번은 실행된 뒤에 조건을 본다. 반면 while은 애초에 i<=n이 거짓이면 안쪽 코드를 아예 건드리지 않는다.세 반복문 모두 "조건이 맞는 동안 반복"이라는 본질은 같다. 실무에서는 아래 기준으로 고른다.
prompt("0보다 큰 정수를 입력하세요", 0)는 사용자가 입력창에 무엇을 쳐도 항상 문자열("string")로 돌려준다. 사용자가 화면에서 5를 입력해도 실제로는 "5"라는 글자다.
그래서 n = parseInt(n); 한 줄이 꼭 필요하다. 이 줄이 없으면 i<=n 같은 조건식이나 sum += i 같은 계산이 숫자 덧셈이 아니라 문자열 이어붙이기로 동작해 엉뚱한 결과가 나온다.
parseInt("5")는 5(숫자)를, Number("5")도 마찬가지로 5(숫자)를 돌려준다. 정수만 다룰 땐 parseInt가 흔히 쓰인다.| 실수 | 증상 | 해결 |
|---|---|---|
증감식(i++, size+=5)을 빠뜨림 |
조건이 영원히 참 → 브라우저가 멈추는 무한루프 | 반복문 안에서 조건에 쓰인 변수를 반드시 변경 |
조건 <=와 <를 헷갈림 |
한 번 더 돌거나 마지막 값이 빠지는 경계 오류 | "그 값 포함?"을 먼저 정하고 <=/< 선택 |
do-while의 }while(조건) 뒤 세미콜론 생략 |
문법 에러(SyntaxError)로 스크립트 전체가 멈춤 | } while(조건); — 세미콜론 필수 암기 |
prompt 결과를 parseInt 없이 바로 계산 |
"5"+3이 8이 아니라 "53"으로 이어붙음 |
parseInt(n) 또는 Number(n)으로 변환 후 계산 |
for문 안에서 초기식 변수를 let 없이 재사용 시도 |
바깥 스코프와 충돌하거나 예상 밖 값 참조 | 루프 전용 변수는 for(let i=...)처럼 매번 새로 선언 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| JavaScript break · continue — 반복 제어 완전 정리 (0) | 2026.07.03 |
|---|---|
| JavaScript switch — 커피 주문 완전 정리 (0) | 2026.07.03 |
| JavaScript 문자열 연산 — 타입 혼합과 비교 완전 정리 (0) | 2026.07.03 |
| JavaScript 대입·조건 연산자 완전 정리 (0) | 2026.07.03 |
| JavaScript 비교·논리 연산자 완전 정리 (0) | 2026.07.03 |
댓글