map()함수와 비슷하지만 배열을 반환하는 map과 다르게
배열의 모든 요소를 순회하여 하나의 결과물에 누적시키는 함수입니다.
⇒ 누적시킬때만 사용하는것이 아닌 배열을 반환할 수도 있습니다.
reduce 메서드는 배열의 요소를 왼쪽에서 오른쪽으로 순회하면서 콜백 함수를 적용합니다.
예시 1.
var numlist = [1,2,3,4,5];
const sum = numlist.reduce((a,b) => a + b); // 배열의 모든 값을 더합니다.
const min = numlist.reduce((a,b) => a - b); // 배열의 모든 값을 뺍니다.
console.log(sum); // 15
// 1+2+3+4+5
console.log(min); // -13
// 1-2-3-4-5
// ※주의할점은 -1-2 에서 시작하는게아닌 +1-2입니다.예시 2.
// 문제 설명
정수 배열 numbers가 매개변수로 주어집니다.
numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요.
// 제한사항
-10,000 ≤ numbers의 원소 ≤ 10,000
1 ≤ numbers의 길이 ≤ 1,000
// 입출력 예
numbers result
[1, 2, 3, 4, 5] [2, 4, 6, 8, 10]
[1, 2, 100, -99, 1, 2, 3] [2, 4, 200, -198, 2, 4, 6]
// 주어진 함수
function solution(numbers) {
var answer = [];
return answer;
}
// 풀이
function solution(numbers) {
var answer = numbers.map(item => item * 2);
return answer;
}
// reduce를 사용한 풀이도 가능합니다.
function solution(numbers) {
return numbers.reduce((a, b) => [...a, b * 2], []);
// 두번째 요소로 []를 사용해 누적값을 배열로 받겠다고 선언
}예시 3. 초기값 설정의 필요성
// 문제
정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 return하도록 solution 함수를 완성해주세요.
// 입출력 예1
n = 1234;
result = 10;
// 입출력 예2
n = 930211;
result = 16;
// 초기값을 설정하지 않았을 때
function solution1(n) {
answer = n.toString().split("").reduce((a, b) => a + Number(b));
return answer;
}
// 초기값을 설정하였을 때
function solution2(n) {
answer = n.toString().split("").reduce((a, b) => a + Number(b), 0);
return answer;
}
// 결과
console.log(solution1(1234); // 결과: '1234'
console.log(solution2(1234); // 결과: 10이 solution2코드에 보이는 두번째 인자 0은 reduce함수의 초기값입니다.
※ toString에 의해 1,2,3,4는 전부 문자열로 이루어져 있습니다.
초기값을 선언해 주지 않는다면
solution1에서 초기 연산은 "a" +Number(b)가 됩니다.
따라서 문자열 덧셈이 이루어져서 1+2 = 3이 아닌 "1"+2 = "12"가 되어버립니다.
첫 번째 연산
초기값 a = "1"
초기값 b = 2
"1" + 2 = "12"
두 번째 연산
"12" + 3 = "123";
이후 같은 식으로 문자열을 합치는 방식으로 덧셈이 이루어져 원하는 값을 출력할 수 없습니다.
따라서 초기값을 선언해 주는것이 좋습니다.
초기값을 선언해준다면
solution2에서 초기 연산은 0 + 1이 됩니다.
첫 번째 연산
초기값 a = 0
초기값 b = 1
0 + 1 = 1
이후 두 번째 연산부터 a 는 Number 데이터 형식으로 고정됩니다.
두 번째 연산
초기값 a = 1
초기값 b = 2
1 + 2 = 3
이런식으로 reduce함수의 계산이 이루어지고 최종적으로 10을 출력합니다.
Number를 설정해주는 방법도 있습니다.
function solution1(n) {
answer = n.toString().split("").reduce((a, b) => Number(a) + Number(b));
return answer;
}
function solution2(n) {
answer = n.toString().split("").reduce((a, b) => Number(a) + Number(b), 0);
return answer;
}
console.log(solution1(1234); // 결과: 10
console.log(solution2(1234); // 결과: 10이렇게 하면 초기값을 설정하지 않아도 문자열 합치기가 발생하지 않아 같은 값을 출력합니다.
예시 4. reduce에서 index요소
// 문제 설명
어떤 정수들이 있습니다.
이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와
이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다.
실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.
// 제한사항
absolutes의 길이는 1 이상 1,000 이하입니다.
absolutes의 모든 수는 각각 1 이상 1,000 이하입니다.
signs의 길이는 absolutes의 길이와 같습니다.
signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을,
그렇지 않으면 음수임을 의미합니다.
// 입출력 예
absolutes signs result
[4,7,12] [true,false,true] 9
[1,2,3] [false,false,true] 0
// 입출력 예 설명
입출력 예 #1
signs가 [true,false,true] 이므로, 실제 수들의 값은 각각 4, -7, 12입니다.
따라서 세 수의 합인 9를 return 해야 합니다.
입출력 예 #2
signs가 [false,false,true] 이므로, 실제 수들의 값은 각각 -1, -2, 3입니다.
따라서 세 수의 합인 0을 return 해야 합니다.
// 주어진 함수
function solution(absolutes, signs) {
var answer = 0;
return answer;
}
// reduce함수로 계산해봅시다.
function solution(absolutes, signs) {
var answer = absolutes.reduce((a, b, i) => a + (b * (signs[i] ? 1: -1)), 0)
return answer;
}여기서 첫번째 인자 a는 누적된 값을
두번째 인자 b는 현재 처리할 요소값을 의미합니다.
i는 현재 요소의 인덱스를 나타내며,
reduce 함수의 두번째 인자로 넘겨주는 초기값으로부터 시작합니다.
즉, reduce 함수가 수행될 때,
a는 초기값(0)이며 b는 absolutes의 첫번째 요소 값(4)이고, i는 0입니다.
현재 요소(signs[i])를 체크하여 false면 -1을 곱해줍니다.
현재 요소의 값(b)를 부호에 따라 -1 또는 1을 곱한 값과 이전 누적 값(a)을 더해 다음 요소의 처리를 진행합니다.
4번째 요소?
첫 번째 인자는 누적 값,
두 번째 인자는 처리할 요소의 값,
세 번째 인자는 현재 요소의 인덱스 번호를 나타냅니다,
그러나 reduce에는 4번째 인자까지 존재합니다.
reduce의 4번째 인자는 참조한 배열 입니다
const arr = [1, 2, 3, 4];
const result = arr.reduce((acc, cur, idx, src) => {
console.log("Source array:", src);
return acc + cur;
}, 0);결과
