======JavaScript For Loop======
<WRAP left notice 70%>
  * description : JavaScript For Loop
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-26
</WRAP>
<WRAP clear></WRAP>
\\
===the source of this article===
[[https://www.w3schools.com/js/js_loop_for.asp|JavaScript For Loop]]
\\
루프(Loops)는 코드 블록을 여러 번 실행할 수 있습니다.\\

=====JavaScript Loops=====
루프는 매번 다른 값으로 동일한 코드를 반복해서 실행하려는 경우 편리합니다.\\
\\
배열로 작업하는 경우가 해당합니다.\\

====Instead of writing====
<code javascript>
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
</code>

====You can write====
<code javascript>
let cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
let i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</code>

=====Different Kinds of Loops=====
%%JavaScript%%는 다양한 종류의 루프를 지원합니다.\\
  * ''%%for%%'' - 코드 블록을 여러 번 반복합니다.
  * ''%%for/in%%'' - 오브젝트의 속성을 반복합니다.
  * ''%%for/of%%'' - 반복 가능한(iterable, 이터러블) 객체의 값을 반복합니다.
  * ''%%while%%'' - 지정된 조건이 true인 동안 코드 블록을 반복합니다.
  * ''%%do/while%%'' - 지정된 조건이 true인 동안 코드 블록을 반복합니다.


=====The For Loop=====

''for'' 루프는 다음의 구문을 사용합니다.\\
\\
<code javascript>
for (statement 1; statement 2; statement 3) {
  // code block to be executed
}
</code>
\\
**Statement 1**은 코드 블록이 실행되기 전에 (한 번) 실행됩니다.\\
\\
**Statement 2**은 코드 블록을 실행하기 위한 조건을 정의합니다.\\
\\
**Statement 3**은 코드 블록이 실행된 후 (매번) 실행됩니다.\\
\\
<code javascript>
let text = "";
let i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</code>
\\
위의 예제에서 다음을 확인할 수 있습니다.\\
\\
Statement 1은 루프가 시작되기 전에 변수를 설정합니다 %%(var i = 0)%%.\\
\\
Statement 2는 루프를 실행할 조건을 정의합니다 (%%i%%는 5보다 작아야 함).\\
\\
Statement 3은 루프의 코드 블록이 실행될 때마다 값 (%%i ++%%)을 증가 시킵니다.\\

=====Statement 1=====
일반적으로 statement 1을 사용하여 루프에서 사용되는 변수를 초기화합니다 %%(i = 0)%%.\\
\\
항상 그런 것은 아니며, %%JavaScript%%는 신경 쓰지 않습니다. statement 1은 선택 사항입니다.\\
\\
statement 1 (쉼표로 구분)에서 많은 값을 시작할 수 있습니다.\\
\\
<code javascript>
let cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</code>
\\
그리고 loop가 시작되기 전에 값이 설정된 경우에는 statment 1을 생략할 수 있습니다.\\
\\
<code javascript>
let cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";

for (; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;   // Saab<br>Ford
</code>

=====Statement 2=====
statement 2는 초기 변수의 조건을 평가하는 데에 사용되곤 합니다.\\
\\
항상 그런 것은 아니며, %%JavaScript%%는 신경쓰지 않습니다. statement 2도 선택 사항입니다.\\
\\
statement 2가 true를 반환하면 루프가 다시 시작되고, false를 반환하면 루프가 종료됩니다.\\
\\
  statement 2를 생략하면, 루프 내부에 break를 제공해야 합니다. 그렇지 않으면 루프가 끝나지 않습니다. 
  사용중인 브라우저와 충돌합니다. 이 자습서의 뒷부분에서 중단에 대해 읽어보십시오.
\\
=====Statement 3=====
statement 3은 초기 변수의 값을 증가 시킵니다.\\
\\
항상 그런 것은 아니며, %%JavaScript%%는 상관하지 않으며 statement 3은 선택 사항입니다.\\
\\
statement 3은 음수의 증가 %%(i--)%%, 양수의 증가 %%(i = i + 15)%% 또는 기타 모든 작업을 할 수 있습니다.\\
\\
statement 3을 생략할 수도 있습니다 (예:루프 내에서 값을 증가시킬 때):\\
\\
<code javascript>
let cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let len = cars.length;
let text = "";

for (; i < len;) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</code>


{{tag>오션 Javascript For Loop}}