[JavaScript] 자바스크립트 for문 사용법 & 예제 정리

for 문은 자바스크립트에서 가장 많이 사용되는 반복문으로 초기화, 조건식, 증감식으로 구성되어 있고 조건식을 만족할 때까지 블록의 코드를 반복하여 실행합니다. 다른 반복문보다 가독성도 좋고, 사용하기도 편해서 사용빈도가 높아 반복문중에서는 가장 중요하다고 할 수 있겠습니다. 아래에서 for 문에 대해 자세히 알아보겠습니다.

 

---

 

 for문 사용법 

for (초기화; 조건식; 증감식) {
  // 반복 실행될 코드 블록
}

 

위의 예제는 for문의 기본형입니다.

• 초기화: 반복문이 시작될 때 한 번만 실행되며, 변수를 초기화하는 부분입니다.
• 조건식: 각 반복마다 평가되어 참인 동안에 계속해서 반복됩니다. 조건식이 거짓이 되면 반복문이 종료됩니다.
• 증감식: 각 반복이 끝난 후에 실행되며, 변수를 증가 또는 감소시키는 부분입니다.'

 

for문의 실행순서

1. 초기식 : 반복문에 사용될 변수 초기화 및 설정이 이루어집니다. 처음에 한 번 실행됩니다.
2. 조건식 : 각 반복마다 조건이 평가됩니다. 조건이 true이면 루프 내용이 실행되고, false이면 종료됩니다.
3. 실행 문장 : 조건이 true일 때 중괄호 { } 안의 코드 블록이 실행됩니다.
4. 증감식 : 반복 후 실행 각 루프 내용 실행이 끝나면 반복 변수를 증가하거나 감소시킵니다.:
5. 조건 평가 및 반복 : 증가 또는 감소된 반복 변수를 다시 조건 부분에 넣고 조건을 다시 확인합니다. 조건이 true이면 다시 루프 내용이 실행되고, 이 과정이 반복됩니다.

 

for문의 사용 예제 - 구구단 출력하기

See the Pen for문 예제 by wjdxo513 (@wjdxo513) on CodePen.

 

for문을 사용해서 구구단을 출력해 보았습니다. 초기식에서 설정된 변수 i를 1에서 1씩 증가시키면서 10보다 클 때까지 계속해서 구구단을 출력합니다. 이렇게 실제 사용해 보시면 for문이 다른 반복문에 비해 코드가 간결하여 가독성이 좋다는 것을 체감하실 수 있습니다.

 

 

for문 중첩 (이중 for문)

See the Pen for문 예제2 by wjdxo513 (@wjdxo513) on CodePen.

 

for문 안에 for문을 사용하는것을 중첩 for문이라고 합니다. 이를 통해 다차원 데이터를 처리하거나, 패턴을 만들어내는 등의 다양한 작업을 수행할 수 있는데요. 위의 예제처럼 구구단을 2~9단까지 모두 출력하는 것도 for문을 중첩하면 간단히 해결할 수 있습니다.

 

---

 

 for문에서의 break와 continue 

break - 반복문 탈출

• break 문은 루프를 즉시 종료하고 루프 외부로 빠져나가게 합니다.
• break가 실행되면 루프 조건의 판별 여부와 상관없이 루프가 종료됩니다.
• 주로 특정 조건이 충족되었을 때 루프를 종료하고자 할 때 사용됩니다.

 

See the Pen for문 break by wjdxo513 (@wjdxo513) on CodePen.

 

반복문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다. 위의 예제를 보시면 idx값이 5보다 크면 break문이 실행되어 for문을 탈출하여 5까지만 출력되는 것을 보실 수 있습니다.

 

 

continue - 반복문 건너뛰기

• continue 문은 현재 반복을 중단하고 다음 반복으로 진행합니다.
• continue가 실행되면 이후의 코드는 실행되지 않고 다음 반복의 시작 지점으로 이동합니다.
• 특정 조건일 때 현재 반복을 건너뛰고자 할 때 사용됩니다.

 

See the Pen for문 continue by wjdxo513 (@wjdxo513) on CodePen.

 

continue문은 반복문에서만 사용할 수 있습니다. continue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 합니다. 위의 예제를 보시면 idx값이 짝수(2로 나눈 나머지가 0)면 continue문이 실행되어 for문을 건너뛰어 홀수만 출력되는 것을 보실 수 있습니다.