[Javascript] for vs for…in vs forEach() vs vs for…of 정리

공부한 내용들을 정리하였습니다. 출처는 하단에 있습니다. 문제 있을 시 알려주시면 조치하도록 하겠습니다!

 

for

• es1부터 있었음.
• 배열의 index, value 순회할 수 있다.
• 비교적 구문이 번거롭지만 시작점을 지정할 수 있다는 점은 매우 유용.
• 속도가 제일 빠르다는 결과가 많다.

const arr = [1, 2, 3, 4, 5]
for(let i = 0; i < arr.length; i ++) {
	console.log(i, arr[i]);
}
// 0 1
// 1 2
// 2 3 ...

 

for - in

• ES1부터 존재. 모든 enumerable(열거 가능한)한 key를 순회한다.

const arr = ['a', 'b', 'c']
arr.prop = 'prop'

for (const key in arr) {
  console.log(key, typeof key, arr[key])
}

// 0 string a
// 1 string b
// 2 string c
// prop string prop

• 배열을 순회하는 데 쓰는 건 별로 좋지 못하다. key 값만 가져올 수 있기 떄문.
• 배열 뿐 아니라 객체에도 사용 가능. 일반적으로 Object를 제외한 객체에는 사용하지 않는 것이 좋다. 왜냐하면 for in으로 순회를 하게 되면 해당 요소 뿐 아니라 prototype chain을 따라 확장 속성들도 함꼐 순회하기 때문이다.

const object = {
  a: 1,
  b: 2,
  c: 3
};

Object.prototype.foo = function() {
  return 0;
};

for (const key in object) {
  console.log(key, object[key]);
}

// a 1
// b 2
// c 3 
// foo [Function (annonymous)]   => Object 속성 뿐 아니라 prototype chain으로부터 상속받은 속성들에 대해서도 반복

• object의 요소 뿐 아니라 Object의 prototype으로 만들어놓은 foo 함수까지 함께 순회한다. 그렇기 때문에 for in은 object의 key를 순회하기 위해 불가피하게 사용하는 것이 아니라면 권장하지 않음.
• 키-값 쌍이 선호되는 데이터의 경우나 특정 값을 가진 키가 있는지 확인하려는 경우에는 for in이 유용하다.
• for..in의 경우 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없으므로 순서가 중요한 경우에는 for, forEach(), for..of 사용을 권장.

forEach

Array.prototype.forEach()

• ECMAScript5(ES5)에서 소개된 Helper Method.
• forEach는 Array의 prototype을 상속받은 객체가 사용할 수 있는 ‘함수’이다.
• Array, Map, Set 객체에서 사용 가능.
• foreach()인자로 콜백 함수가 오고, 배열의 각 요소들이 반복될 때 이 콜백 함수가 호출된다. 콜백 함수에서 인덱스와 배열의 요소에 접근 가능.

const arr = [1, 2, 3, 4, 5];
	//매개변수 arr2는 해당 어레이 자체
arr.forEach(function (item, index, arr2) {
  console.log(item, index, arr2[index + 1]);
});
// 1, 0, 2
// 2, 1, 3
// 3, 2, 4 ...
// 5, 4, undifined 

	//화살표 함수로도 가능
arr.forEach((item, index, arr2) => {
	...
});

• 배열의 요소와 인덱스에 모두 접근 가능
• undefined를 반환하기 때문에 break, continue, return 구문을 사용해서 함수를 벗어날 수 없다. forEach 대신 some을 사용하면 탈출할 수 있음.
• await를 루프 내부에서 쓸 수 없다.

for…of

• ES6에서 추가됨
• await와 함께 사용 가능 => for-await-of
• break, continue를 사용할 수 있다.
• 키만 접근하거나 혹은 키&값 모두 접근하는 것이 가능.

const arr = ['a', 'b', 'c']

for (let i of arr) {
	console.log(i);
}
// a
// b
// c

for (const key of arr.keys()) {
  console.log(key, typeof key)
}
// 0 "number"
// 1 "number"
// 2 "number"

const arr = ['a', 'b', 'c']
for (const [key, value] of arr.entries()) {
  console.log(key, value)
}
// 0 "a"
// 1 "b"
// 2 "c"

const m = new Map().set(1, 1).set(2, 2).set(3, 3)
for (const [key, value] of m) {
  console.log(key, value)
}

// 1 1
// 2 2
// 3 3

• 배열을 포함한 iterable한 객체(순회 가능한)라면 사용 가능하다. Array만 반복 가능한 forEach와는 다르게 내부에 [Symbol.iterator]를 가진 객체라면 순회 가능.

Object.prototype.objCustom = function () {};// Object 프로퍼티에 객체 생성
Array.prototype.arrCustom = function () {}; // array 프로퍼티에 객체 생성

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}
//기본 js 내장함수에 프로퍼티를 추가해서 프로퍼티까지 모두 출력됨

for (var value of iterable) {
  console.log(value); // 3, 5, 7 => 순회 가능한 배열의 값들만 출력.
}

결론

• for in은 Object의 key를 순회하기 위해 사용되는 반복문. 단, 확장 속성까지 함께 순회한다는 점 고려해야함
• forEach는 Array를 순회하는 데 사용되는 Array의 메소드. 콜백함수를 가진다.
• for of는 이터러블한 객체를 모두 순회할 수 있는 강력한 반복문. 다른 순회문에서 할 수 있는 모든 것을 할 수 있다.
• for in, for of, map, reduce 같은 방법보다 클래식한 for loop가 가장 빠른 성능을 보여주는 결과들이 많다.

 

출처

https://n-log.tistory.com/39

https://kimyejin.tistory.com/entry/배열-순회-구문-비교-for-vs-for-in-vs-forEach-vs-for-of

https://velog.io/@bining/javascript-for-in-for-of-forEach-차이점

https://yceffort.kr/2021/06/best-solution-for-looping-over-array

https://dydals5678.tistory.com/66

https://medium.com/sjk5766/foreach-for-in-for-of-특징-및-성능-비교-47a77464b034