[Javascript] Array 메서드(map, reduce, flatMap)

1. reduce

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

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// output: 10

 

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

1. 누산기 (acc)

2. 현재 값 (cur)

3. 현재 인덱스 (idx)

4. 원본 배열 (src)

 

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

 

 

 

구문

    arr.reduce(callback[, initialValue])

 

 

매개변수

callback

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

  accumulator

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

  currentValue

    처리할 현재 요소

  currentIndex(Optional)

    처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.

 

array(Optional)

  reduce() 를 호출한 배열.

 

initialValue(Optional)

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

 

반환 값

누적 계산의 결과 값

 

 

---

 

 

2. map

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

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

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// output: Array [2, 8, 18, 32]

 

 

구문

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

 

매개변수

callback

  새로운 배열 요소를 생성하는 함수이다. 다음 세가지 인수를 가진다.

  currentValue

    처리할 현재 요소.

  index(Optional)

    처리할 현재 요소의 인덱스

  array(Optional)

    map()을 호출한 배열.

 

thisArg(Optional)

  callback을 실행할 때 this로 사용되는 값

 

 

반환 값

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

 

 

---

 

3. flatMap

flatMap() 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화한다. 이는 깊이 1의 flat이 뒤따르는 map과 동일하지만, flatMap은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적이다.

 

 

구문

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

 

 

매개변수

callback

  새로운 배열의 엘리먼트를 생성하는 함수. 3개의 argument를 갖는다.

  currentValue

    배열에서 처리되는 현재 엘리먼트

  index(Optional)

    배열에서 처리되고 있는 현재 엘리먼트의 인덱스

  array(Optional)

    map이 호출된 배열

thisArg(Optional)

  callback 실행에서 this로 사용할 값

 

 

 

반환 값

각 엘리먼트가 callback함수의 결과이고, 깊이 1로 평탄화된 새로운 배열

 

 

 

 

 

---

#Reference

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

JavaScript 참고서 - JavaScript | MDN