[JavaScript | Array] .reduce() / .fill() / .map()

Array.prototype.reduce()

• reduce() 메소드는 배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환
• 각각의 배열 요소에 콜백함수를 실행하고  결과를 누적한 최종 답이 필요할 때 유용함 (e.g.배열 요소의 전체 합을 구할 때)  

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);
// expected output: 10

리듀서 함수(콜백함수)의 인자 4개

-optional 은 자주 안쓰임 특히 원본배열은 거의 안 쓰이는 듯, 필요할 때 콜백함수의 인자로 넘겨주면 된다.

-optional 은 말만 옵션이지 넣어주는 쪽이 좋음 

 

🌞누산기 (acc)

• accumulator(누산기) - 콜백의 반환값을 누적한다. 콜백의 이전 반환값 or 콜백의 첫 번째 호출이면서 initialValue를 제공하는 경우에는 initialValue의 값이다. 
• 맥락상 이전 값이라고 생각하면 된다. previous value(하지만 이제 첫번째를 빼면 누적이 된 이전 값..)

🌞현재 값(curr)

• 처리할 현재 요소 
• 맥락상 현재 처리할 값이라고 생각하면 된다. current value 

🌞현재 인덱스(idx) optional 

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

🌞원본 배열(src) optional 

 

🌚초기 값(initialValue) optional 

• 얘는 콜백의 인자가 아님 콜백함수의 초기값임 그렇기 때문에 아래와 같이 작성

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

• 콜백의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다)인덱스 0을 초기값으로 세팅) .
• 초기값을 제공하지 않으면 reduce()는 인덱스 1부터 시작해 콜백함수를 실행하고 첫 번째 인덱스는 건너 뛴다. 
• 보통은 초기값을 주는 것이 더 안전하다.

주의❗ 빈 배열에서 초기값 없이 reduce() 를 호출하면 오류 발생 

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

arr.reduce(callback[, initialValue])

 

reduce( )활용 예시

🔽중첩 배열 펼치기 

const flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(accumulator, currentValue) {
    return accumulator.concat(currentValue);
  },
  []
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

 

//이어서 정리