[JavaScript] The .reduce() Method

안녕하세요. 동기 여러분! 오늘은 .reduce() 메서드에 대해 알아보도록 하겠습니다. 문과 출신에 요리가 직업이었던 저에겐 상당히 이해하기 어려운... 메서드였습니다. 문과의 입장에서 쉽게 풀어보겠습니다!

 

The .reduce() Method

.reduce() 메서드는

1. 리턴한 결괏값을 하나의 값으로 줄여줍니다. 무엇을 줄여줄까요?
2. 우리가 만든 배열의 객체를 하나의 값으로 줄여줍니다.

 

---

 

생김새

// JavaScript

const numbers = [1, 2, 3, 4, 5];

const initialValue = 0;

const summedNums = numbers.reduce((accumulator, currentValue, index) => {
	return accumulator + currentValue
}, initialValue);

console.log(summedNums);

// Output : 15

 

영어로 써놓으니 엄청 복잡해 보이고 어려워 보입니다.

 

뽀로롱

 

// 자바스크립트

const 숫자들 = [1, 2, 3, 4, 5];

let 초깃값 = 0;

const 합계된수 = 숫자들.reduce((누적값, 현재값, 인덱스) => {
	return 누적값 + 현재값               // <- 이부분은 우리가 정하는 부분(빼기 곱하기 등등 마음대로)
}, 초깃값);

console.log(합계된수);

// 출력 : 15

• 누적값은 누적값 더하기 현재값 입니다.  (숫자들 배열의 객체 수만큼 반복됩니다) 
• 현재값은 인덱스 번호에 대한 값입니다. 만약 인덱스가 1이 들어가 있다면 현재값이 2, 인덱스가 4라면 현재값은 5가 됩니다.
• 초깃값은 .reduce() 메서드가 처음 시작될 때의 누적값을 정해줄 수 있습니다. 만약 아무것도 정해주지 않고 공백으로 둔다면 초깃값은 인덱스 0번에 있는 값으로 시작합니다. (여기서는 인덱스 0이 1)

 

---

 

예제라기보단 뜯어봅시다.

오늘은 파이썬튜터라는 사이트를 소개해드리겠습니다. 디버깅을 하는데 굉장히 유용한 사이트입니다. 링크는 https://pythontutor.com/visualize.html#mode=edit

 

● 초깃값을 설정 안 함

 

step 1

step 2

• 초깃값(initial value)을 설정하지 않았기 때문에 누적값은 인덱스 0번의 1부터 시작합니다. 
• 현재 값은 인덱스 1번의 2가 들어갔습니다.

step3

• 리턴 값은 누적값 더하기 현재값( 1 + 2 )이라서 3으로 나왔습니다. 그렇다면 다음 누적값은 3이 나올 것입니다.

step 4

• 누적값이 3이 나왔네요. 그리고 인덱스 2가 들어올 차례니까 현재값이 3이 들어오는 것을 확인할 수 있습니다. 
• 이제부터는 다음 누적값이 뭐가 올지 예상이 되지요? 누적값(3) 더하기(+) 현재값(3)이니까 6이 나올 것입니다.

step 5

• 리턴 값이 6이 나옴. 이제 이 코드가 인덱스 4까지 반복되면 우리가 summedNums의 값이 나옵니다.

the last step

 

---

오늘의 느낌

상당히 복잡한데, 제가 추천해드린 사이트를 사용해서 한번 해보시길 바랍니다. 한번 해보면 이해가 쉽더라고요 ㅎㅎ