자바스크립트 .reduce()

자바스크립트의 배열 메소드 중 하나이다.

배열 내 요소들을 하나의 값으로 축소하는데 사용된다. 

주로 배열 내 모든 요소들을 더하거나 곱하는 등의 계산에 사용된다.

 

reduce 메소드의 구조

배열.reduce(callback, initialValue)

배열은 말 그대로 메소드를 사용할 배열을 말한다.

callback은 각 요소에 대해 호출되는 함수이다. 아래 4개의 인자를 받는다.

- accumulator: 누적된 결과 값

- currentValue: 현재 처리 중인 배열 요소

- currentIndex: 현재 처리 중인 배열 요소의 인덱스

- array: reduce가 호출되는 배열

 

initialValue는 초기 누적값으로 사용할 값이다.

선택사항이며 지정하지 않으면 배열의 첫번째 요소가 초기값으로 사용된다.

 

 

사용법 1. 배열 내 모든 요소를 곱함

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

// reduce 메소드를 사용하여 배열 내 모든 요소를 곱함
const result = numArray.reduce((accumulator, currentValue) => {
  return accumulator * currentValue;
}, 1); // 초기 값을 1로 설정

console.log(result); // 결과 출력: 120

초기값 설정 부분을 생략해도 된다.

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

// reduce 메소드를 사용하여 배열 내 모든 요소를 곱함
const result = numArray.reduce((accumulator, currentValue) => {
  return accumulator * currentValue;
});

console.log(result); // 결과 출력: 120

 

이때 accumulator, curretValue 등은 매개변수의 이름이기 때문에

반드시 이 이름를 사용할 필요는 없다. 

 

 

사용법 2. 배열 내 각 요소에 2를 곱합

function solution(numbers) {
    return numbers.reduce((a, b) => [...a, b * 2], []);
}

console.log([1, 2, 3, 4, 5]); // [2, 4, 6, 8, 10]
console.log([1, 2, 100, -99, 1, 2, 3]); // [2, 4, 200, -198, 2, 4, 6]

진행 순서

1. a의 초기값으로 배열 ([])을 설정한다.

2. 배열 numbers의 각 요소를 b에 담고 순회하면서, 배열 a에 b*2 값을 추가한다.

3. 배열 number를 순회할때마다 배열 a는 업데이트 된다. 

4. 순회가 끝나면 reduce 메소드는 배열 numbers의 각 요소에 2를 곱한 배열 a를 반환한다.

 

화살표 함수로 작성하면 아래와 같이 쓸수도 있다.

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

const result = numArray.reduce((a, b) => {
  return a * b;
});

 

 

사용법 3. 배열 내 모든 요소의 평균값

function solution(numbers) {
    var answer = numbers.reduce((a,b) => a+b, 0) / numbers.length;
    return answer;
}

console.log(solution([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // 5.5
console.log(solution([89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]); // 94.0

진행 순서

1. 첫번째 인자 a는 누적된 값을 저장할 곳이고, 두번째 인자 b는 배열의 각 요소가 들어간다.

2. a의 초기값은 0으로 설정한다. (덧셈이기에 초기값 설정은 생략이 가능하다. 곱셉이면 생략하면 안된다.)

3. 배열 numbers의 각 요소와 a를 더한다.

4. reduce 메소드가 끝나면 배열 numbers의 각 요소를 더한 값을 반환한다.

5. 4.에서 반환받은 결과물을 배열 numbers의 길이로 나눔으로써 배열의 모든 요소의 평균값을 구한다.

 

화살표 함수로 작성하면 아래와 같다.

const solution = (numbers) => {
    const sum = numbers.reduce((a, b) => a + b, 0);
    return sum / numbers.length;
};

 

 

사용법 4. reduce 안에 삼항연산자 안에 삼항연산자

배열 arr의 각 원소의 값이 50보다 크거나 같은 짝수라면 2로 나눈다.

원소의 값이 50보다 작거나 홀수라면 2를 곱하고, 1을 더한다.

let arr = [1, 2, 3, 100, 99, 98];

console.log(
  arr.reduce((result, v) => {
    if (v >= 50 && v % 2 === 0) {
      result.push(v / 2);
    } else if (v < 50 && v % 2 === 1) {
      result.push(v * 2 + 1);
    } else {
      result.push(v);
    }
    return result;
  }, [])
);