[JavaScript] map, reduce 메소드

 

💻 map() 메소드

---

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

 

매개변수

callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

            -currentValue : 처리할 현재 요소

            -index(optional : 사용해도 되고 안해도 되고) : 처리할 현재 요소의 인덱스

            -array(optional : 사용해도 되고 안해도 되고) : map()을 호출한 배열

            -thisArg(optional : 사용해도 되고 안해도 되고) : callback을 실행할 때this로 사용되는 값

반환값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.

 

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 

간단한 예로 주어진 배열의 요소들을 곱하기 2 하여 반환하는 예제를 들어보겠습니다.

 

const array = [1, 4, 9, 16];

const map = array.map(function(currentValue, /* index, array */){
    return currentValue*2;
});
//ES6의 화살표 함수로 표기하게 되면
//const map = array.map(currentValue => currentValue*2);

console.log(array);
//[1, 4, 9, 16]
console.log(map);
//[2, 8, 18, 32]

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다.

map은 호출한 배열의 값을 변형하지 않습니다. 단, callback 함수에 의해서 변형될 수는 있습니다.

 

 

ex1) map을 활용해 배열 속 객체를 재구성하기

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){ 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray
//[{1:10}, {2:20}, {3:30}]

// kvArray
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

 

ex2) map을 포괄적으로 사용하기

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) {
			//charCodeAt은 주어진 index에 해당하는 유니코드 값을 리턴하는데 
			//이 값은 unicode가 지원되는 모든 시스템에서 동일한 문자를 가르킨다.
			return x.charCodeAt(0); 
		});
//[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

 

 

ex3) map을 포괄적으로 사용하기 (querySelectorAll)

querySelectorAll을 사용해서 수집된 객체들을 순회 처리하는 법을 보여줍니다.

이번 경우 체크한 옵션 박스를 콘솔에 프린트합니다.

var elems = document.querySelectorAll('select option:checked');
var values = [].map.call(elems, function(obj) {
  return obj.value;
});

 

 

💻 reduce() 메서드

---

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형합니다. reduce라는 이름은 이 메서드가 보통 배열을 값 하나로 줄이는 쓰이기 때문에 붙었습니다. 예를 들어 배열에 들어있는 숫자를 더하거나 평균을 구하는 것은 배열을 값 하나로 줄이는 동작입니다. 하지만 reduce가 반환하는 값 하나는 객체일 수도 있고, 다른 배열일 수도 있습니다.

 

리듀서 함수는 네 개의 인자를 가집니다.

1. 누산기accumulator (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

arr.reduce(callback[, initialValue])

매개변수

callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다

            -accumulator : 누산기accmulator는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째                                    호출이면서 initialValue를 제공한 경우에는initialValue의 값입니다.

            -currentValue : 처리할 현재 요소.

            -currentIndex(optional : 사용해도 되고 안해도 되고) : 처리할 현재 요소의 인덱스. initialValue를 제공한

                                                                                   경우 0, 아니면 1부터 시작합니다.

            -array(optional : 사용해도 되고 안해도 되고) : reduce()를 호출한 배열.

initialValue(optional : 사용해도 되고 안해도 되고) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

 

반환값

누적 계산의 결과 값.