부끄럽지만 현업에서 거의 쓴 적이 없어 이번에 잘 기억해두려고 메모함!

기록에 앞서 reduce의 뜻을 짚고 넘어가야 좀 더 이해가 빠를 것 같다.

무언가의 사이즈를 더 작게 만드는 것이라고 한다.

---

reduce()함수란?

MDN에서는 reduce()메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다고 적혀있다. reducer함수는 reduce() 메서드에 전달되는 콜백 함수이다. 이 함수는 배열의 각각의 요소에 대하여 실행되며, 배열의 내용을 하나의 값으로 축소(reduce)하는 역할을 한다.

조금 쉽게 풀어 설명하자면, reduce는 배열의 각 요소에 대해 주어진 함수를 순차적으로 적용한다. 이 함수는 누적값(accumulator)과 현재 요소를 인자로 받아, 새로운 누적값을 리턴하게된다. 초기 누적값은 reduce의 두 번째 인자로 넘기면 된다.

글로 적은 것 보단 코드가 더 직관적일 것 같으니 코드를 보자.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((a, b) =>[...a, b * 3] , []);

1. numbers.reduce((a, b) => ...)
reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행한다.

2. (a, b) => [...a, b * 3]
여기서 a는 누적값(accumulator)이고, b는 현재 처리 중인 배열의 요소이다.
[...a, b * 3]는 새로운 배열을 만든다.

• ...a는 스프레드 연산자로, 기존 누적값 a(배열)의 모든 요소를 새 배열에 넣는다.
• b * 3는 현재 요소의 값에 3을 곱하여 새 배열의 마지막에 추가한다.

3. []

• 이는 reduce의 초기값으로, 빈 배열을 제공한다.

코드의 동작

그래서 위 코드를 단계적으로 뜯어본다면 이렇게 동작한다.

1. a = [],       b = 1  =>  [...[], 1*3]     = [3]
2. a = [3],      b = 2  =>  [...[3], 2*3]    = [3, 6]
3. a = [3, 6],   b = 3  =>  [...[3, 6], 3*3] = [3, 6, 9]

함수형 프로그래밍의 불변성 원칙을 따르면서, 배열의 각 요소를 변환하여 새로운 배열을 만드는 방법이다.

Spread 문법

...a를 사용하는 이유는

• 이전 단계의 결과를 유지하기 위해서
• 새 배열을 생성하여 불변성을 유지하기 위해서
• 배열의 모든 요소에 대해 원하는 변환(여기서는 3배)을 적용하기 위해서
  이다.

이렇게 하면 원본 배열은 그대로 유지되면서, 모든 요소가 변환된 새로운 배열을 얻을 수 있다.

결론

오늘의 결론 쓰던것만 쓰니 리셋되는 느낌. 다른 표준 내장 메서드도 다시 훑어봐야겠다.