“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다.
그 중에서 for 문, forEach 문, for in 문 그리고 for of 문에 대해서 알아보려고 합니다.
for 문
자바스크립트에서 가장 많이 사용하는 반복문입니다.
기본형은, for (초깃값; 조건; 증가식) {...} 입니다.
초깃값은 0이나 1부터 시작합니다.
몇 번을 반복할지 지정하기 위해서 카운터 변수를 사용하는데 이 항목에서 카운터 변수를 선언합니다.
조건은 문장을 실행한 후 카운터 변수를 증가시키는 부분입니다.
보통 카운터 값을 하나 더 증가시틸 때 사용합니다.
증가식은 문장 실행한 후 카운터 변수를 증가시키는 부분입니다.
보통 카운터 값을 하나 더 증가시키는 용도로 사용합니다.
실행 순서가 헷갈리기 쉽기 때문에 초깃값은 처음에 한 번만 할당하고 조건 체크와 명령 실행, 증가식을 반복한다고 기억하는게 좋습니다.
예제로 설명하겠습니다.
forEach 문
배열에서는 for 문 보다 더 편리하게 사용할 수 있는 반복문입니다.기본형은, 배열명.forEach(콜백 함수) {...} 입니다.
단순히 배열 요소만 본다면 for 문과 forEach 문 사이에 큰 차이는 없습니다.하지만 프로그램 중에서 배열의 길이가 바뀌어 배열의 크기를 알 수 없을 때나 배열의 요소를 가져와서 함수를 실행할 때 forEach 문을 사용하면 편합니다.
예제로 설명하겠습니다.
| const students = ["Park", "Kim", "Lee", "Kang"]; students.forEach(function(students) { document.write('${student}. ') }); |
결과로 Park, Kim, Lee, Kang 이 나옵니다.
for...in 문
배열에서만 반복되는 반복문이 forEach 문이라면 for...in 문은 반복해서 객체의 값을 가져와서 처리할 수 있는 반복문입니다.
기본형은, for (변수 in 객체) {...} 입니다.
객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호를 사용합니다.
| const gitBook = { title : "깃&깃허브 입문", pubDate : "2019-12-06", pages : 272, finished : true } for(key in gitBook) { doctument.write('${key} : ${gitBook[key]}<br>'); } |
결과로
title : 깃&깃허브 입문
pubDate : 2019-12-06
pages : 272
finished : true
가 나옵니다.
for...of 문
문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다.
forEach 문을 사용해서 작성했던 소스 코드를 for...of 문으로도 작성할 수 있습니다.
| const students = ["Park", "Kim", "Lee", "Kang"]; // students에 student가 있는 동안 계속 반복합니다. for (student of students) { document.write('${student}. '); } |
codepen 으로 짝수와 홀수 구별하는 프로그램 만들기
See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen.
while 문과 do...while 문
while 반복문은 조건이 참(true)인 동안 문장을 반복합니다.
while 문은 조건부터 체크한 후 true일 경우에만 문장을 반복합니다.
조건이 false라면 문장은 한 번도 실행되지 않을 수 있습니다.
기본형:
| while (조건) { 실행할 명령 } |
while문거ㅣ 달리 do...while문은 조건이 맨 뒤에 붙습니다.
do...while문은 일단 문장을 한 번 실행한 후 조건을 체크합니다.
그러므로 조건이 false라고 해도 일단 문장이 최소한 한 번은 실행됩니다.
기본형:
| do { 실행할 명령 } while (조건) |
while문과 do...while문을 사용해 지정한 횟수만큼 화면에 *기호를 표시하는 예제로 설명하겠습니다.
- while:
| let stars = parseInt(prompt("별의 개수 : ")); while(stars > 0) { document.write('*'); stars--; } |
- do...while:
| let stars = parseInt(prompt("별의 개수 : ")); do { document.write('*'); stars--; } while(stars > 0) |
값을 5로 지정하면 while문과 do...while문에서 모두 5개의 *기호가 표시됩니다. : *****
stars 값을 0으로 지정(stars = 0)하면 while문에서는 조건을 먼저 체크했으므로 아무것도 표시되지 않습니다.
하지만 do...while문에서는 일단 *를 표시한 후 조건을 체크했으므로 화면에 *가 나타납니다.
while문과 do...while문은 초깃값이나 반복 횟수 없이 조건만 주어졌을 때 많이 사용합니다.
어떤 조건을 만족하는 동안 계속 반복하게 되는 것입니다.
조건을 체크하기 전에 문장을 한 번 실행하느냐, 안 하느냐의 차이일 뿐이므로
프로그램의 환경에 따라 둘 중의 하나를 선택해서 사용하면 됩니다.
break 문과 continue 문
반복문은 지정한 횟수만큼 명령을 반복하지만, 조건에 따라 반복문을 중간에 끝낼 수 있습니다.
이 때 break문과 continue문을 사용합니다.
앞에서 살펴본 for문이나 while문과 같은 반복문은 주어진 조건에 따라 문장을 반복하기 때문에 종료 조건이 되면 반복을 끝냅니다.
하지만 종료 조건이 되기 전에 반복문을 빠져나와야 할 경우도 있는데,
이 때 break문을 사용합니다.
앞에서 switch문으로 조건을 체크할 때 break문을 사용했던 것을 기억하면 쉽게 이해할 수 있습니다.
continue문은 조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 건너뛰고 반복문의 맨 앞으로 돌아가서 다음 반복 과정으로 넘어가도록 합니다.
반복 과정을 한 차례 건너뛰게 하는 것입니다.
