for...of, for...in 그리고 forEach 에 대한 정리

자꾸 생각없이 사용하다가 헷갈려서 제대로 정리하고 가려고 한다.

for...of 구문

• Map, Set과 같은 이터러블(iterable,반복가능한) 객체의 값을 반복하는데 사용

• 예제

const array = [1, 2, 3, 4, 5];

for (const value of array) {
  console.log(value); // 출력: 1, 2, 3, 4, 5
}

---

for...in 구문

• 객체의 속성 또는 배열의 인덱스 같은 enumerable(열거가능한) 속성을 반복하는데 사용

• 예제

const user = {
  name: 'Alice',
  age: 25,
  country: 'USA'
};

for (const key in user) {
  console.log(`${key}: ${user[key]}`); 
  // 출력: name: Alice, age: 25, country: USA
}

---

주요 차이점

특징	for...of	for...in
주요용도	이터러블객체의 값 반복	객체의 속성(key) 반복
반복대상	배열, 문자열, Map, Set 등	객체의 속성
값 또는 키	값을 반환	키를 반환
순서보장	순서를 보장	객체의 속성순서는 보장되지 않음
문법	for (const value of iterrable)	for (const key in object)

---

예외 및 주의사항

• 배열의 경우 for...of를 사용해야 함 for...in을 사용한다면 인덱스 값을 반환함

const array = [10, 20, 30];

for (const index in array) {
  console.log(index); // 출력: 0, 1, 2
}

for (const value of array) {
  console.log(value); // 출력: 10, 20, 30
}

---

forEach

• 배열에만 사용된다.
• 각요소에 특정 작업을 하는데 유용하게 사용된다.

const array = [10, 20, 30, 40, 50];

array.forEach((value, index) => {
  array[index] = value * 2;
});
console.log(array); //[ 20, 40, 60, 80, 100 ]

// 새로운 배열 생성
const newArray = array.map((value) => value*2)
console.log(newArray); //[ 20, 40, 60, 80, 100 ]