[.map과 .reduce란 무엇인가]

.map( )

arr.map(callback(currentValue[, index[, array]])[, thisArg])
배열.map((요소, 인덱스, 배열) => { return 요소 });

• callback : 새로운 배열 요소를 생성하는 함수
• 콜백 함수는 다음 세 가지 인수를 가진다.
  • .currentValue : 처리할 현재 요소
  • .index (Optional) : 처리할 현재 요소의 인덱스
  • .array (Optional) : map()을 호출한 배열
  • .thisArg (Optional) : callback을 실행할 때 this로 사용되는 값.

주어진 배열의 값을 재정의할 때 사용하는 방법으로, ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 콜백함수를 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다" 라고 정의되어 있다.

• 음 간단히 설명하면
  • 주어진 배열을 가지고 새로운 배열을 만들 때 쓰는 메서드이다.
  • 배열의 아이템에 함수를 실행하게해주는 메서드
  • 그리고 나서 그 함수의 결과 값으로 새로운 배열을 만드는 메서드

 

• 간단한 예시
  • days.map : days에 있는 모든 요일에 function을 실행한다는 것
  • 그리고 그 함수에서 나온 값을 저장해서 새로운 배열을 만드는 것
  • days.map()은 return한 값으로 이루어진 배열을 return한다

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

const smilingDays = days.map(potato => (potato));

console.log(smilingDays); // 실행하면 다음과 같음
["Mon", "Tue", "Wed", "Thurs", "Fri"]
-------

onst smilingDays = days.map((potato, index) => `#${index + 1} ${potato}`);

console.log(smilingDays); // 실행하면 다음과 같음
[ '#1 Mon', '#2 Tue', '#3 Wed', '#4 Thurs', '#5 Fri' ]

 

• 조금 어려운 예시 (프로그래머스 답변 중)

function sumMatrix(A,B){
    return A.map(function(v,i){
    return (typeof(v)=="object")? sumMatrix(v,B[i]):v+B[i];
  });
}

• 배열 두개로 새로운 배열을 만드는 코드다. (자세한건 프로그래머스 코딩테스트 게시판에 써놨다.)

 

.reduce( )

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

.reduce(acc, cur, idx, src) : acc는 누적 값, cur은 현재값, idx는 인덱스, src는 원본배열

• map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형합니다.(reduce라는 이름은 이 메서드가 보통 배열을 값 하나로 줄이는 데 쓰이기 때문에 붙었다)

 

• 예시

function solution(absolutes, signs) {
return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0); }

 위의 코드 뜯어서 설명하면 다음과 같다.

absolutes배열의 reduce 함수 실행 (아래 설명 칸은 백틱을 쓰겠음) // 함수의 파라미터는 (acc`누적값`, val`현재값`, i`인덱스` => acc`누적값` + (val`현재값` * (sign[i]`부호` ? 1 : -1)), 0`src 혹은 initialValue);

 

 

참고자료

노마드코더 https://www.youtube.com/watch?v=vUB3TfLWzL0 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

http://reduce.surge.sh/   (reduce 함수를 시각화해서 잘 보여주는 사이트)