JavaScript - for, foreach, filter, map, reduce 기능

자바스크립트에서 map(), filter(), reduce() 메소드는 배열 요소를 나열하거나, 특정 조건에 맞게 보여줄 때 자주 쓰인다.

 

해당 메소드들의 동작 원리를 알아보고자 해당 메소드들이 for문으로 어떻게 돌아가는지 작성하려 한다.

 

const listData = [
  {
    id: 1,
    text: 'hello',
  },
  {
    id: 2,
    text: 'everyone',
  },
  {
    id: 3,
    text: 'welcome',
  },
  {
    id: 4,
    text: 'to',
  },
  {
    id: 5,
    text: 'my blog',
  },
]

공통으로 사용되는 데이터

 

1. filter

var newArr = arr.filter(function(v, i, arr) {
  return condition;
});

filter의 가장 큰 특징은 boolean형태의 return값을 갖는다. return값이 true일경우, 그 요소를 반환하고 false일경우, 반환하지 않는다. 기본값은 false이다. 예를 들어보자.

 

특징

• 빠른편이다.
• Array객체에서 사용이 가능하다.
• chainable하다.
• 빈 배열 요소를 반환하지 않는다.
• 대용량 배열 처리시 메모리 overflow 가능성이 있다.
• return값은 true/false이며, 요소를 반환한다.

2. map

var newArr = arr.map(function(v, i, arr) {
  return condition;
});

filter와 다른점이라고 하면, filter는 return값으로 true/false만 쓸 수 있으며, 요소를 반환하지만, map의 경우 요소가 아닌 새로운 값을 만들어서 return할 수 있다.

 

특징

• 빠른편이다.
• Array객체에서 사용이 가능하다.
• chainable하다.
• 대용량 배열 처리시 메모리 overflow 가능성이 있다.
• return값 자체를 반환한다.

3. reduce

var arr = [1, 2, 3, 4, 5];
var newArr = arr.reduce(function(acc, v, i, arr) {
  return acc + v;
});
// 15

educe의 가장 큰 특징으로는 첫번째 인자인 accumulator 이다. accumulator 는 return값을 누적하는데, 계속해서 전달받아서 사용할 수도 있다.

 

4. for loop

• 가장 빠르고 단순하다. 그래서 효율적이다.
• 모든 자료형에 대해 사용이 가능하다.
• 중간에 loop 건너뛰기나 종료가 가능하다. (continue or break)
• 반복범위 컨트롤이 가능하다. (i++, i–, i+=2*i 등)
• 변수를 활용할 수 있다. (var i 값을 사용할 수 있다)

5. forEach

가독성이 좋다는 것은 개발에서 엄청난 차이를 가져온다. forEach는 복잡한 객체를 처리하는데 있어서 유리하다.

 

• 빠른편이다.
• Array객체에서 사용이 가능하다.
• 일반 for문보다 가독성이 좋고, 객체형을 다루기가 쉽다.
• for문과 다르게 중간에 끊을 방법이 없다. (return으로 skip가능)
• return값을 받지 못한다.