[Java Script]map, filter, reduce 동작 원리 알아보기

자바스크립트에서 map(), filter(), reduce() 메소드는 배열 요소를 나열하거나, 특정 조건을 보여주는데 많이 사용된다.

이번 글에서는 해당 매서드들의 동작원리는 자세하게 알아보려고 한다.

// 아래 예제에서 모두 해당 데이터를 사용한다
const dataList = [
  {
    key: 1,
    text: 'hello',
  },
  {
    key: 2,
    text: 'everyone',
  },
  {
    key: 3,
    text: 'welcome',
  },
  {
    key: 4,
    text: 'to',
  },
  {
    key: 5,
    text: 'my blog',
  },
];

map()

// Array.prototype.map()
arr.map(callback(currentValue[, index[, array]])[, thisArg])

const mapResult = dataList.map((list) => list.text);
console.log(mapResult);
// output: ["hello", "everyone", "welcome", "to", "my blog"]

map() 매서드를 for문을 이용해 직접 구현하면 아래와 같이 구현할 수 있다.

const mapResult = (list) => {
  let result = []; // map()은 새로운 배열을 반환
  for (const i of list) {
    result.push(i.text);
  }
  return result;
};

const result = mockMap(dataList);
console.log(mapResult);
// output: ["hello", "everyone", "welcome", "to", "my blog"]

filter()

// Array.prototype.filter()
arr.filter(callback(element[, index[, array]])[, thisArg])

filter()와 map()의 구조는 거의 비슷하다.

const filterResult = dataList.filter((list) => list.text !== 'everyone');
console.log(filterResult);
// output: [
//   {
//     key: 1,
//     text: 'hello',
//   },
//   {
//     key: 3,
//     text: 'welcome',
//   },
//   {
//     key: 4,
//     text: 'to',
//   },
//   {
//     key: 5,
//     text: 'my blog',
//   },
// ]

filter()는 해당 조건에 만족하는 값을 출력한다.

const mockFilter = (list) => {
  let result = []; // filter() 역시 새로운 배열을 반환
  for (const e of list) {
    if (e.text !== 'everyone') {
      result.push(e); // 해당 조건에 맞는 객체를 push
    }
  }
  return result;
};

const result = mockFilter(dataList);
console.log(result);
// output: [
//   {
//     key: 1,
//     text: 'hello',
//   },
//   {
//     key: 3,
//     text: 'welcome',
//   },
//   {
//     key: 4,
//     text: 'to',
//   },
//   {
//     key: 5,
//     text: 'my blog',
//   },
// ]

reduce()

// Array.prototype.reduce()
arr.reduce(callback[, initialValue])

reduce() 메서드는 첫 번째 callback 함수에서 reducer() 함수를 실행하고 하나의 결과 값을 반환한다.

reducer() 함수는 네 개의 인자를 받는다.

1. 누산기accumulator (acc): initialValue가 있을 경우 initialValue이며, 없을 경우 콜백의 반환값을 누적
2. 현재 값 (cur)
3. 현재 인덱스 (idx): initialValue가 있을 경우 0, 아니면 1부터 시작
4. 원본 배열 (src)

const array1 = [1, 2, 3, 4];
const resultOfReducer = array1.reduce((accumulator, currentValue, currentIndex, array) => {
  console.log('accumulator', accumulator); // output: 10 11 13 16
  console.log('currentValue', currentValue); // output: 1 2 3 4
  console.log('currentIndex', currentIndex); // output: 0 1 2 3
  console.log('array', array); // output: [1, 2, 3, 4]
  return accumulator + currentValue;
}, 10);
console.log(resultOfReducer); // output: 20

// console로 확인해보자면 이와 같다
const reduceResult = array1.reduce((accumulator, currentValue, currentIndex, array) => {
  console.log('accumulator', accumulator);
  // output: 10 11 13 16
  // 두 번째 인자의 initialValue가 10이기 때문에 10에서 시작한다
  console.log('currentValue', currentValue);
  // output: 1 2 3 4
  // array1의 값을 하나씩 반환한다
  console.log('currentIndex', currentIndex);
  // output: 0 1 2 3
  // 현재의 index를 하나씩 반환 한다
  console.log('array', array);
  // output: [1, 2, 3, 4]
  // array1을 반환한다
  return accumulator + currentValue;
  // 두개의 값이 더한 채로 accumulator에 누적된다
}, 10);
console.log(reduceResult); // output: 20

reduce()로 문자열을 출력하면 아래와 같다.

const reduceResult = dataList.reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator + currentValue.text + ' ';
}, '');
console.log(reduceResult);
// output: "hello everyone welcome to my blog "

이를 for문으로 돌리면 아래처럼 작성할 수 있다.

const mockReducer = (list) => {
  let result = '';
  for (const data of list) {
    result += data.text + ' ';
  }
  return result;
};
console.log(mockReducer(dataList));
// output: "hello everyone welcome to my blog "