썸네일은 같은 식에 대해 각각 reduce() 와 forEach()를 활용했을 때의 코드 길이 비교...

.reduce()💡

---

코딩테스트를 풀다 for문을 이용해 열줄가까이 길어졌던 코드가 reduce() 한방에 한 줄로 정리되는 것을 보고 알아보게 된 reduce() 함수입니다✍️

---

💛배열을 순회하며 누적값을 반환하는.reduce()

1. reduce()함수내에 callback함수와 초기값을 매개변수로 넣는다

	arr.reduce(callback, initialValue)

	//초깃값은 생략 가능
	arr.reduce(callback)

2. 콜백함수에는 누적값, 현재요소, 인덱스값과 배열이 매개변수로 주어진다

	arr.reduce((acc, cur, idx, arr) => {})

	acc(accumulator): 콜백의 계산식을 누적하여 반환하는 요소
    cur(current value): 처리할 현재 요소
    idx(index): 현재 요소의 인덱스 값
    arr(array): reduce()함수를 호출한 배열(본체)

2-1. index와 arr(reduce를 호출한 배열)은 optional한 값으로 생략이 가능하다

	arr.reduce((acc, cur) => {})

2-2. 초기값이 있는 경우 누적값(acc)에 할당된다

	arr.reduce((0, cur, idx) => {}, 0)

3. 콜백함수 내의 계산식을 실행하고 누적값(acc)을 반환한다

	let arr = [1,2,3,4]
    
    // arr배열의 모든 요소를 더한 누적값을 리턴하는 식
	arr.reduce((acc, cur) => acc + cur)

	// 1 + 2 + 3 + 4
    arr = 10;

위의 함수식을 표로 작성하자면

횟수(arr.length)	acc	+	cur	누적값
1	null	+	1	1
2	1	+	2	3
3	3	+	3	6
4	6	+	4	10

=> 최종적으로 10을 반환

*초깃값(initialValue)를 설정한 경우 null 자리에 할당

---

💛초기값을 활용한 응용법

초기값을 배열로 만들어 할당하면 reduce() 함수 하나로 .map()과 .filter() 등을 대신할 수 있다

	let arr = [1,2,3,4,5]
        
    //배열의 모든 요소를 2배 곱하여 리턴
	arr.reduce((acc, cur) => {
      acc.push(cur * 2)  
      return acc
    }, [])

	arr = [2,4,6,8,10]

	// 아래의 식과 같다
	arr.map((cur) => cur * 2)

위와같이 reduce() 함수를 잘만 활용하면 대부분의 배열메소드를 대신할 수 있다고 한다 !

---

마치며🙌

배열관련 메소드들을 언젠가 차근차근 공부해야겠다고 생각만 하고 실천한 적은 없었는데
코테문제를 풀다보니 하나씩 필요성을 느껴 어떻게든 시작하게 되는 것 같다..!