map(), reduce()

map()

• 매핑(mapping): 수학용어로 사상(寫像)이라고도 하는데, 간단히 말하면 어떤 집합 A의 각각의 원소를 다른 집합 B의 원소에 대응시키는 것
  • 수학의 함수 개념을 추상화한 것이라고 함. 혹시라도 더 자세히 알고 싶다면 위키페디아나 블로그의 글을 참고해보자...
• JavaScript의 매핑함수 map()은 어떤 배열의 각 요소에 특정함수 관계로 대응시킨 원소들을 갖는 배열을 리턴하는 함수
• 배열.map(콜백함수(요소[, 인덱스[, 배열]]))의 형태로 사용
• 배열의 각 요소에 순서대로 콜백함수를 적용하여 리턴된 값을 순서대로 갖는 새로운 배열이 리턴됨
• 기존 배열은 그대로 유지됨 (단, 콜백함수에 의해 변형될 수는 있음)
• 쉽게 생각하면(옳은 말은 아니지만), function(array) { ...; return newArray; } 같은 느낌 (애초에 매핑은 함수의 추상개념이다)

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

reduce()

• reduce()는 map()과 굉장히 유사하지만, 기본적으로 배열을 리턴하는 것이 아니라 누적값을 리턴한다는 차이가 있음
  • '기본적으로'라는 말은, 잘 가공하면 map()처럼 사용할 수도 있다는 의미
• 배열.reduce(콜백함수(누적값, 요소[, 인덱스[, 배열]]) [, 초기값])의 형태로 사용
  • 초기값을 제공하지 않으면 알아서 0번 요소를 초기값으로 설정하고 1번 요소부터 콜백함수를 적용
• 영단어 reduce의 기본 의미는 "줄이다"인데, "간단하게 정리하다"라는 의미도 있어서, 말하자면 어떤 배열을 요약(?)해서 값 하나로 정리한다는 의미로 이런 이름이 붙은 게 아닐까...

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

요약

• map()은 배열의 각 요소에 콜백함수를 적용(=매핑)시킨 요소들을 갖는 새로운 배열이 리턴된다.
• reduce()는 기본적으로 매핑된 요소들을 누적시킨 값을 리턴하지만, 활용하기에 따라서는 map()과 마찬가지로 배열, 심지어는 object 등의 객체도 리턴할 수 있다.
  

참고한곳

• map, reduce 활용하기 @ zerocho
• Array.prototype.map() @ MDN
• Array.prototype.reduce() @ MDN