반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다.
반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 그만큼 소스 코드도 깔끔해지고 프로그램 실행도 빨라집니다.
1. for 문
자바스크립트에서 가장 많이 사용하는 반복문입니다. for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. for문에서는 몇 번 반복했는지 기록하기 위해 카운터를 사용하고 for문의 첫번째 항에서 카운터 변수를 지정합니다.
- 초깃값 : 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화합니다. 초깃값은 0이나 1부터 시작합니다.
- 조건 : 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for문에 있는 명령을 반복할 수 있습니다.
- 증가식 : 문장을 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터값을 하나 더 증가시키는 용도로 사용합니다.
for문을 공부할 때 실행순서가 헷갈리기 쉬우므로 초깃값은 처음에 한 번만 할당하고 조건 체크와 명령 실행, 증가식을 계속 반복한다고 기억해야 합니다.
| for 문을 사용해 배열값 가져오기 기본형 -> for (초깃값; 조건; 증가식){....} |
| const arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { document.write(i) } |
2. forEach 문
앞에서 for문을 사용해 배열의 값을 가져왔는데, 배열에서는 forEach문을 사용해서 좀 더 편리하게 반복할 수 있습니다.
단순히 배열요소만 가져와서 보여준다면 for문과 forEach문 사이에 큰 차이가 없습니다.
하지만 프로그램 중에서 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 또는 배열의 요소를 가져와서 함수를 실행해야 할 때 forEach문을 편리하게 사용할 수 있습니다.
| forEach 문으로 배열값 가져오기 기본형 -> 배열명.forEach(콜백 함수){......} |
| const arr = [1, 2, 3, 4, 5]; arr.forEach(function(i){ document.write(i) }); |
콜백 함수란, 다른 함수의 인수로 사용할 수 있는 함수를 가르킵니다.
3. for in 문
배열에서만 반복되는 반복문이 forEach문이라면 for in문은 반복해서 객체의 값을 가져와서 처리할 수 있게 합니다.
for in문은 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호([ ])를 사용합니다.
배열도 객체이므로 배열에 for in문을 사용할 수 있습니다.
| 기본형 -> for (변수 in 객체) {.....} |
4. for of 문
for of문은 문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다. 앞에서 forEach문을 사용해서 작성했던 소스 코드를 for of문으로도 작성할 수 있습니다.
짝수, 홀수 구별 프로그램
See the Pen Untitled by hyejeong3283 (@hyejeong3283) on CodePen.