JS 자바스크립트 반복문(Loop) / for in, for of 차이점

반복문 종류

• for: 코드 블록을 반복
• forEach: 배열의 각 요소에 대해 콜백함수를 호출
• for in: 객체의 속성을 순회할 때사용 
• for of: 반복 가능한(iterable) 객체를 순회할 때 사용

---

for문:

가장 기본적인 순회 방법입니다.

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

 

 

forEach 메서드:

배열의 각 요소에 대해 지정한 함수(콜백 함수)를 호출합니다. 이 메서드를 사용하여 반복적인 루프 코드를 간결하게 작성할 수 있습니다. 

array.forEach(value => {
    console.log(value);
});

array.forEach((value, index) => {
    console.log("index: " + index + " value: " + value);
});

 

for...in:

객체의 속성을 반복할 때 사용되며, 꼭 객체가 아니더라도 배열의 속성도 반복할 수 있습니다. 단, 순서가 보장되지 않기 때 때문에 예상 순서대로 접근하지 못할 수 있습니다. 만약 순서를 보장하고 싶은 경우  for문, for/of, Array.forEach()를 사용하는 것을 권장합니다.

const memberArr = ["kim", "male", 25];
const memberObject = { name: "kim", gender: "male", age: 25 };

// 배열 접근
for (let index in memberArr) {
  console.log(memberArr[index]);
}

// 객체 접근
for (let index in memberObject) {
  console.log(memberObject[index]);
}

 

 

for...of:

ES6에 추가된 구문으로, 배열, 문자열, 맵, 세트 등 iterable한 컬렉션에 사용하기 좋은 반복문입니다. 이 반복문은 요소의 값을 직접 제공하며 인덱스를 숨깁니다. 반복 가능하지 않은객체에 대해 for...of문으로 접근 시 오류가 발생합니다. 

for (const value of arr) {
    console.log(value);
}

 

for...in과 for...of

for...in은 객체의 속성을 순회할 때 사용하고, for...of는 iterable한 속성을 가지는 컬렉션을 순회할 때 사용합니다.
for...in은 객체의 속성을 순회하기 때문에, 배열의 속성이자 key에 해당하는 index를 반환하며 순회하고, 
for...of는 iterable한 배열의 요소를 순회하기 때문에, 요소의 값(value)을 직접 순회합니다.