반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다.
반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다.
그만큼 소스 코드도 깔끔해지고 프로그램 실행도 더 깔끔해질 것 입니다.
for 문
자바스크립트에서 가장 많이 사용하는 반복문 for 문입니다. for 문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할때 편리하게 사용 됩니다. for 문에서는 몇 번 반복했는지 기록 하기 위해 카운터를 사용하고 for 문의 첫 번째 항에서 카운터 변수를 지정합니다.
for ( 초깃값; 조건; 증가식) { ... }
1. 초깃값:
몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화합니다.
초깃값은 0이나 1부터 시작합니다.
2. 조건:
문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 for 문에 있는 명령을 반복할 수 있습니다.
3. 증가식:
문장을 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터값을 하나 더 증가시키는 용도로 사용합니다.
아래는 코드로 보여주는 설명입니다.
See the Pen Untitled by Kimdohyun2002 (@Kimdohyun2002) on CodePen.
위의 코드는 결과적으로 1부터 10까지의 숫자가 콘솔에 출력이 됩니다.
forEach문
앞에서 for 문을 사용해 배열의 값을 가져왔는데, 배열에서는 foEach 문을 사용해서 좀 더 편리하게 반복할 수 있습니다.
배열명.forEach(콜백 함수){ ... }
단순히 배열 요소만 가져와서 보여 준다면 for 문과 forEach 문 사이에 큰 차이가 없습니다.
하지만 프로그램 중에서 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때,
또는 배열의 요소를 가져와서 함수를 실행해야 할 때 forEach 문을 편리하게 사용할 수 있습니다.
See the Pen Untitled by Kimdohyun2002 (@Kimdohyun2002) on CodePen.
위의 코드는 결과적으로 Park. Kim. Lee. Kang 이 출력이 됩니다.
for...in 문
배열에서만 반복되는 반복문이 forEach 문이라면 for...in 문은 반복해서 객체의 값을 가져와서 처리할 수 있게 합니다.
for (변수 in 객체) { ... }
for...in 문은 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호([])를 사용합니다.
See the Pen Untitled by Kimdohyun2002 (@Kimdohyun2002) on CodePen.
위의 코드는 결과적으로
title : 깃&깃허브 입문
pubDate : 2019-12-06
pages : 272
finished : true 가 출력이 됩니다.
for...of 문
for...of 문은 문자열이나 배열과 같은 반복 가능(literable) 자료에서 사용하는 반복문입니다.
앞에서 forEach 문을 사용해서 작성했던 소스 코드를 다음과 같이 for...of 문으로도 작성할 수 있습니다.
See the Pen Untitled by Kimdohyun2002 (@Kimdohyun2002) on CodePen.
자바스크립트에서 반복문은 매우 중요한 기능 중 하나입니다.
반복문을 사용하면 코드를 간결하고 효율적으로 작성할 수 있으며, 일정한 작업을 반복해서 수행할 수 있습니다.
이를테면, 배열의 모든 항목에 대해 작업을 수행하거나, 조건을 만족하는 항목을 찾기 위해 배열을 순회하는 등의
작업을 수행할 때 반복문을 사용합니다.
반복문을 사용하지 않고 동일한 작업을 수행하는 경우, 코드가 길어지고 가독성이 떨어지며,
수정 및 유지보수가 어려워집니다. 따라서, 반복문을 사용하여 코드의 가독성과 유지보수성을 높이는 것이 중요합니다.