[JS] 배열을 순회하는 반복문, 함수 (for, for ... of, map(), filter(), forEach(), reduce()) 비교

JS 코딩테스트에서 상황별로 유리한 반복문과 함수에 대한 내용을 다룹니다.

 

시간복잡도

O(n)으로 동일하다.

 

---

 

for

for (let i = 0; i < 배열.length; i++) { /* ... */ }

• 반복 시작점, 끝점, 증분 커스텀 가능
• return제어 O

 

---

 

for ... of

for (const item of 배열) { /* ... */ }

• 배열에서 값만 취할 때 사용
• return제어 O
• forEach와 다르게 iterable 객체면 다 순회가능

cf. for...in 은 객체를 순회 or 인덱스값이 필요할 때 용이 (배열도 객체이긴 하지만, key인 index값만 가져올 수 있기 때문에 배열에서는 for...of가 유리하다)

 

---

 

map

const arr = ['1', '2', '3'];
const numberArr = arr.map((num) => +num);

• callback으로 새로운 배열 만들 때 사용
• return제어 X

 

---

 

filter

const arr = [2, 100, 29, 37];
const result = arr.filter((word) => word > 30);

• 조건문으로 새로운 배열 만들 때 사용
• return제어 X

 

---

 

forEach

arr.forEach(() => { /* ... */ });

• 새로운 배열을 만들지는 않지만 callback 함수를 반복하고 싶을 때
• return제어 X

 

---

 

reduce

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

arr.reduce((acc, cur, idx) => {
  console.log(acc, cur, idx);
  return acc + cur;
}, 0);

• 배열을 순회하면서 특정 값을 업데이트 해야할 때 사용
• return제어 X

 

---

결론

• 기존 배열을 가공한 새로운 배열이 필요할 때는 map(함수), filter(조건문)
• 배열을 순회하는 도중의 리턴값이 필요할 때는 for, for...of
• 반복조건을 조작하고 싶을 때는 for
• 단순 값만 취할 때는 for...of
• 배열을 순회하며 함수를 실행하고 싶을 때는 map, forEach