JavaScript Loop For In

JavaScript for/in 스테이트먼트는 오브젝트의 속성을 반복합니다.

for (key in object) {
  // code block to be executed
}

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

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

JavaScript for/in 문은 배열의 속성을 반복할 수도 있습니다.

for (variable in array) {
  code
}

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

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

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

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>
}

상기 함수는 3 개의 인수(arguments)를 취합니다.

• The item value
• The item index
• The array 자체

위의 예제에서는 value 매개변수 만 사용합니다. 예제는 다음과 같이 다시 작성할 수 있습니다.

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>
}