for in, for of, forEach의 차이

  • forEach

forEach 는 Array 자료형의 prototype이다. 따라서 NodeList와 같은 유사 배열 자료형에 forEach를 사용하기 위해서는 배열로 바꾸는 작업이 필요하다. 인자로 callback을 받는다. Array의 각 element를 callback 함수의 인자로 하나씩 넘겨준다.

1
2
3
4
5
6
const arr = [1, 2, 3];

arr.forEach((element) => console.log(element * 2));
// 2
// 4
//6
  • for … in

for in 은 객체에서 string 형식의 key로 이루어진 요소들에 접근할 때 사용한다. 일반 배열에도 사용할 수 있지만 이 경우 배열의 prototype으로 지정한 메서드들도 함께 접근하므로 key에만 접근하고 싶다면 keys() 메서드로 key만 접근하도록 해야한다. 하지만 객체 데이터에만 사용하는게 제일 좋다.

1
2
3
4
5
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) console.log(key, obj[key]);
// a 1
// b 2
// c 3
  • for … of

for of는 iterable한 객체를 순회할 때 사용된다. 그렇기 때문에 일반 객체는 순회할 수 없다.
iterable 객체에는 String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set,user-defined iterables 이 있다.

1
2
3
4
5
const array1 = ["a", "b", "c"];

for (const element of array1) {
  console.log(element);
}

Reference