======JavaScript Loop For In======
<WRAP left notice 70%>
  * description : JavaScript Loop For IN
  * 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_forin.asp|JavaScript Loop For In]]\\
\\
%%JavaScript%% ''%%for/in%%'' 스테이트먼트는 오브젝트의 속성을 반복합니다.\\

====Syntax====
<code javascript>
for (key in object) {
  // code block to be executed
}
</code>
\\

<code javascript>
let txt = "";
let person = { fname: "John", lname: "Doe", age: 25 };
let x;
for (x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;  // John Doe 25
</code>

\\
====예제 설명====
  * **for in** 루프는 person 오브젝트를 반복합니다.
  * 각 반복은 **키(x)**를 반환합니다.
  * 키는 키 값에 액세스하는 데 사용됩니다.  
  * 키의 값은 person[x]입니다.

=====For/In Over Arrays=====
%%JavaScript%% ''%%for/in%%'' 문은 배열의 속성을 반복할 수도 있습니다.\\

====Syntax====
<code javascript>
for (variable in array) {
  code
}
</code>
\\

<code javascript>
let txt = "";
let numbers = [45, 4, 9, 16, 25];
let x;
for (x in numbers) {
  txt += numbers[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;  // 45<br>4<br>9<br>16<br>25
</code>
\\

  인덱스 **순서**가 중요한 경우에는 배열에 대해 **%%for in%%**을 사용하지 마세요.
  인덱스 순서는 구현에 종속적이고, 배열의 값은 예상 순서대로 액세스하지 못할 수 있습니다.
  인덱스 순서가 중요한 경우, **for** 루프, **for of** 루프, **Array.forEach()**를 사용하는 것이 좋습니다.
\\

=====Array.forEach()=====
''%%forEach()%%'' 메서드는 각 배열 요소에 대해 한 번씩 함수 (콜백 함수)를 호출합니다.\\
\\

<code javascript>
let txt = "";
let numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt = txt + value + "<br>";   // 45<br>4<br><br>9<br>16<br>25<br>
}
</code>
\\

상기 함수는 3 개의 인수(arguments)를 취합니다.\\
\\
  * The item value
  * The item index
  * The array 자체

위의 예제에서는 value 매개변수 만 사용합니다. 예제는 다음과 같이 다시 작성할 수 있습니다.\\
\\
<code javascript>
let txt = "";
let numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt = txt + value + "<br>";   // 45<br>4<br><br>9<br>16<br>25<br>
}
</code>



{{tag>오션 Javascript For Loop In}}