diff options
Diffstat (limited to 'files/ko/web/javascript/reference/statements/for/index.html')
-rw-r--r-- | files/ko/web/javascript/reference/statements/for/index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/statements/for/index.html b/files/ko/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..cba49dbba6 --- /dev/null +++ b/files/ko/web/javascript/reference/statements/for/index.html @@ -0,0 +1,160 @@ +--- +title: for +slug: Web/JavaScript/Reference/Statements/for +tags: + - JavaScript + - Loop + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>for 문</strong>은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과, 반복을 수행할 문(주로 {{jsxref("Statements/block", "블럭문", "", 0)}})으로 이루어져 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>]) + <em>statement</em> +</pre> + +<dl> + <dt><code>initialization</code></dt> + <dd>식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. <code>var</code> 또는 <code>let</code> 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. <code>var</code> 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 <code>for</code> 문과 같은 범위<sup>scope</sup>에 위치합니다. <code>let</code> 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.<br> + <br> + 식의 결과는 버려집니다.</dd> + <dt><code>condition</code></dt> + <dd>매 반복마다 평가할 식. 평가 결과가 참이라면 <code>statement</code>를 실행합니다. 이 식을 넣지 않았을 때 계산 결과는 언제나 참이 됩니다. 계산 결과가 거짓이라면 <code>for</code> 문의 바로 다음 식으로 건너 뜁니다.</dd> + <dt><code>final-expression</code></dt> + <dd>매 반복 후 평가할 식. 다음번 <code>condition</code> 평가 이전에 발생합니다. 주로 카운터 변수를 증감하거나 바꿀 때 사용합니다.</dd> + <dt><code>statement</code></dt> + <dd>조건의 평가 결과가 참일 때 실행하는 문. 여러 문을 반복 실행하려면 {{jsxref("Statements/block", "블럭문", "", 0)}}(<code>{ ... }</code>)으로 묶어야 합니다. 아무것도 실행하지 않으려면 {{jsxref("Statements/empty", "공백문", "", 0)}} (<code>;</code>)을 사용하세요.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="for_사용하기"><code>for</code> 사용하기</h3> + +<p>다음 <code>for</code> 문은 변수 <code>i</code>를 선언하고 0으로 초기화하여 시작합니다. <code>i</code>가 9보다 작은지를 확인하고 맞으면 명령문을 수행한 후 <code>i</code>의 값을 1 높입니다.</p> + +<pre class="brush: js">for (var i = 0; i < 9; i++) { + console.log(i); + // 기타 등등 +} +</pre> + +<h3 id="선택적_식_사용">선택적 식 사용</h3> + +<p><code>for</code> 반복문의 3개 식은 모두 선택 사항입니다.</p> + +<p>예를 들어, 변수를 초기화하려고 <code>initialization</code> 블럭을 사용할 필요는 없습니다.</p> + +<pre class="brush: js">var i = 0; +for (; i < 9; i++) { + console.log(i); + // 기타 등등 +} +</pre> + +<p><code>initialization</code> 블럭처럼 <code>condition</code> 블럭도 선택 사항입니다. 다만 이 경우, 반복문 본문에 무한 반복을 탈출할 수 있는 장치를 추가해야 합니다.</p> + +<pre class="brush: js">for (var i = 0;; i++) { + console.log(i); + if (i > 3) break; + // 기타 등등 +}</pre> + +<p>세 가지 모두 생략할 수도 있습니다. 위와 같이 {{jsxref("Statements/break", "break")}} 문을 사용해 반복을 탈출할 수 있도록 추가하고, 변수를 수정해 탈출 조건이 언젠가 참이 되도록 해야 합니다.</p> + +<pre class="brush: js">var i = 0; + +for (;;) { + if (i > 3) break; + console.log(i); + i++; +} +</pre> + +<h3 id="문_없이_for_사용하기">문 없이 <code>for</code> 사용하기</h3> + +<p>다음 <code>for</code> 반복 사이클은 노드의 위치 오프셋을 <code>final-expression</code>에서 계산해 문이나 블럭문이 필요하지 않으므로 세미콜론을 사용합니다.</p> + +<pre>function showOffsetPos(sId) { + var nLeft = 0, nTop = 0; + + for ( + var oItNode = document.getElementById(sId); /* initialization */ + oItNode; /* condition */ + nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */ + ); /* semicolon */ + + console.log('Offset position of \'' + sId + '\' element:\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;'); +} + +/* Example call: */ + +showOffsetPos('content'); + +// Output: +// "Offset position of "content" element: +// left: 0px; +// top: 153px;"</pre> + +<div class="note"><strong>참고:</strong> 여기서 쓰인 세미콜론은, JavaScript가 <strong>필수로 요구하는 몇 안되는 세미콜론</strong>입니다. 물론 세미콜론 없이는 반복 사이클 선언의 바로 다음 줄을 반복 본문으로 인식합니다.</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("javascript.statements.for")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{jsxref("Statements/empty", "공백문", "", 0)}}</li> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/do...while", "do...while")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> +</ul> |