반복문에 대해서 알아보자

반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 

그 중에서 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문은 조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 건너뛰고 반복문의 맨 앞으로 돌아가서 다음 반복 과정으로 넘어가도록 합니다.

반복 과정을 한 차례 건너뛰게 하는 것입니다.

 

출처