[JS] 배열 요소를 하나로 합치는 방법 | reduce 메서드

reduce 메서드

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

참고로! reduce 라는 이름은 배열들을 하나의 값으로 줄이는데 쓰이기 때문에 붙혀졌다.

배열에 들어있는 숫자를 모두 더하거나 평균을 내는 것은 배열을 하나의 값으로 줄이기 위한 동작들이다.

 

기본 형태

arr.reduce()

인수로 함수를 받음

(누적 계산값, 현재값) => { return 계산값 };

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

const result = arr.reduce((prev, cur) => {
	return prev + cur;
}, 0);

console.log(result); // 10

위 예에서 매개변수 prev에는 현재까지 누적된 계산값이 들어간다.그리고 cur에는 현재 더할 계산값이 들어간다고 보면된다.초기값은 0으로 설정해줬는데, 초기값은 선택사항이기 때문에 굳이 안써줘도 상관은 없다.초기값을 0으로 넣게 되면 0+1+2+3+4 이렇게 0부터 계산할 뿐이다.초기값을 안쓰면 1+2+3+4 이렇게 원 값에서 누적해서 더해버게 된다.

 

로직

- 처음 실행시 초기값이 0이므로 prev는 0, cur에는 1이 들어가서 누산값 1이 된다 (0 + 1)

- 두번째 실행시 prev는 1이 들어오고, cur은 2가 들어와서 누산값 3이 된다 (1 + 2)

- 세번째 실행시 prev는 3이 들어오고, cur은 3이 들어와서 누산값 6이 된다 (3 + 3)

- 네번째 실행시 prev는 6이 들어오고, cur은 4가 들어와서 누산값 10이 된다 (6 + 4)

- 다섯번째 실행시 prev는 10이 들어오고, cur은 5가 들어와서 누산값이 15가 된다 (10 + 5)

 

(1) 배열 요소가 숫자인 경우

하나의 '숫자'로 합쳐지게 된다.

let arr = [1,2,3,4,5];

let result = arr.reduce((prev,cur) => {
    return prev + cur;
}, 0)

console.log(result); // 15

 

(2) 배열 요소가 문자인 경우

하나의 '문자'로 합쳐지게 된다.

let arr = ["a","e","d","b"];

let result = arr.reduce((prev,cur) => {
    return prev + cur;
})

console.log(result) // aedb

 

 

* 이해에 도움이 됐던 강의 출처 : https://www.youtube.com/watch?v=RW25tEAMC9w