<div id="readability-page-1" class="page"><div><p data-ke-size="size16">for 문은 자바스크립트에서 가장 많이 사용되는 반복문으로써 초기화, 조건식, 증감식으로 구성되어 있고, 조건식을 만족할 때까지 블록의 코드를 반복하여 실행됩니다. 다른 반복문보다 가독성도 좋고, 사용하기도 편해 사용빈도가 높아 반복문중에서는 가장 중요하다고 할 수 있겠습니다. 아래에서 for 문에 대해 자세히 알아보겠습니다.</p>

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style8">

<h2 data-ke-size="size26"><span>&nbsp;for문 사용법&nbsp;</span></h2>
<pre><code>for (초기화; 조건식; 증감식) {
  // 반복 실행될 코드 블록
}
</code></pre>

<p data-ke-size="size16">위의 예제는 for문의 기본형입니다.</p>
<ul data-ke-list-type="disc">
<li>초기화: 반복문이 시작될 때 한 번만 실행되며, 변수를 초기화하는 부분입니다.</li>
<li>조건식: 각 반복마다 평가되어 참인 동안에 계속해서 반복됩니다. 조건식이 거짓이 되면 반복문이 종료됩니다.</li>
<li>증감식: 각 반복이 끝난 후에 실행되며, 변수를 증가 또는 감소시키는 부분입니다.'</li>
</ul>

<h3 data-ke-size="size23">for문의 실행순서</h3>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="460" data-origin-height="339"><span data-url="https://blog.kakaocdn.net/dn/HSaWv/btsEZRbmrfr/U4oNky7GGFMXTAUh41lsD0/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/HSaWv/btsEZRbmrfr/U4oNky7GGFMXTAUh41lsD0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="460" data-origin-height="339"></span></figure>

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

<h3 data-ke-size="size23">for문의 사용 예제 - 구구단 출력하기</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="qBvgeKy" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/qBvgeKy"> for문 예제</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>



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


<h3 data-ke-size="size23">for문 중첩 (이중 for문)</h3>
<p data-height="300" data-default-tab="js,result" data-slug-hash="GRezVBb" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/GRezVBb"> for문 예제2</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>



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

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style8">

<h2 data-ke-size="size26"><span>&nbsp;for문에서의 break와 continue&nbsp;</span></h2>
<h3 data-ke-size="size23">break - 반복문 탈출</h3>
<ul data-ke-list-type="disc">
<li>break 문은 루프를 즉시 종료하고 루프 외부로 빠져나가게 합니다.</li>
<li>break가 실행되면 루프 조건의 판별 여부와 상관없이 루프가 종료됩니다.</li>
<li>주로 특정 조건이 충족되었을 때 루프를 종료하고자 할 때 사용됩니다.</li>
</ul>

<p data-height="300" data-default-tab="js,result" data-slug-hash="WNmPVYx" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/WNmPVYx"> for문 break</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


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


<h3 data-ke-size="size23">continue - 반복문 건너뛰기</h3>
<ul data-ke-list-type="disc">
<li>continue 문은 현재 반복을 중단하고 다음 반복으로 진행합니다.</li>
<li>continue가 실행되면 이후의 코드는 실행되지 않고 다음 반복의 시작 지점으로 이동합니다.</li>
<li>특정 조건일 때 현재 반복을 건너뛰고자 할 때 사용됩니다.</li>
</ul>

<p data-height="300" data-default-tab="js,result" data-slug-hash="VwRgoVg" data-user="wjdxo513" data-ke-size="size16"><span>See the Pen <a href="https://codepen.io/wjdxo513/pen/VwRgoVg"> for문 continue</a> by wjdxo513 (<a href="https://codepen.io/wjdxo513">@wjdxo513</a>) on <a href="https://codepen.io/">CodePen</a>.</span></p>


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

</div></div>

코딩팩토리

for 문은 자바스크립트에서 가장 많이 사용되는 반복문으로써 초기화, 조건식, 증감식으로 구성되어 있고, 조건식을 만족할 때까지 블록의 코드를 반복하여 실행됩니다. 다른 반복문보다 가독성도 좋고, 사용하기도 편해 사용빈도가 높아 반복문중에서는 가장 중요하다고 할 수 있겠습니다. 아래에서 for 문에 대해 자세히 알아보겠습니다.
 
 
 for문 사용법 
for (초기화; 조건식; 증감식) {
  // 반복 실행될 코드 블록
}
 
위의 예제는 for문의 기본형입니다.
초기화: 반복문이 시작될 때 한 번만 실행되며, 변수를 초기화하는 부분입니다.
조건식: 각 반복마다 평가되어 참인 동안에 계속해서 반복됩니다. 조건식이 거짓이 되면 반복문이 종료됩니다.
증감식: 각 반복이 끝난 후에 실행되며, 변수를 증가 또는 감소시키는 부분입니다.'
 
for문의 실행순서
초기식 : 반복문에 사용될 변수 초기화 및 설정이 이루어집니다. 처음에 한 번 실행됩니다.
조건식 : 각 반복마다 조건이 평가됩니다. 조건이 true이면 루프 내용이 실행되고, false이면 종료됩니다.
실행 문장 : 조건이 true일 때 중괄호 { } 안의 코드 블록이 실행됩니다.
증감식 : 반복 후 실행 각 루프 내용 실행이 끝나면 반복 변수를 증가하거나 감소시킵니다.:
조건 평가 및 반복 : 증가 또는 감소된 반복 변수를 다시 조건 부분에 넣고 조건을 다시 확인합니다. 조건이 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문을 건너뛰어 홀수만 출력되는 것을 보실 수 있습니다.

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

댓글