for문과 for...of/for...in/forEach 정리

for문은 알다시피 반복문이다.

1. for...in : 객체에 가능한 for문

객체는 이터러블하지 않아서 순회가 불가능하다. 하지만 for...in을 쓰면 객체의
키값에 대해 순회할 수 있다.

const apple = {
  name : 'apple',
  color : 'red',
  price : 2000
}
for(const key in apple){
  console.log(`${key} : ${apple[key]}`);
}
//"name : apple"
// "color : red"
// "price : 2000"

다음 나오는 forEach, for...of는 이터러블(순회가능한 객체)에만 사용이
가능한 메소드 이다. 즉, 일반 객체에는 사용이 불가능하다.

2. for...of : 배열에 유용한 for문

for...of는 반드시 모든 요소를 순회하나, 요소의 값만 필요할 때 유용하다.
객체에는 사용이 불가능하다.

const fruits = ['apple','orange','pear'];
for(let ele of fruits){
  console.log(ele);
}
//"apple" "orange" "pear"

forEach : 배열 메소드

forEach는 콜백함수를 인자로 받으며 모든 요소를 순회한다.
for...of은 index에 접근할 수 없기 때문에 배열에서 각 요소에 접근하면서, 인덱스가 필요한 경우 forEach를 쓴다.
다음은 forEach의 index를 사용한 예제이다.

const arr = ['apple', 'kiwi', 'grape', 'orange'];

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

일반 for문

for문은 증감식과 범위 설정이 가능한 반복문이다. 위의 문법들은 모든 요소에 대해 돌아야 하나, for문은 범위를 정할 수 있다. 범위 설정이나 증감식을 조작해야 할때 일반 for문이 적합하다.