Reduce함수에 대해서

reduce

한마디로 정의하자면 reduce함수를 사용하면

map,filter등의 배열함수들을 동시에 사용하는 효과를 내며

반환값을 자유롭게 설정하기때문에 유연하게 사용가능하다



단순히 누적기능만 있는 배열함수라고 생각했지만 같은 팀동료가 사용하는것을 보고 놀랐다

filter와 map기능을 동시에 사용할수있는등의 자유로운 사용이 가능했기때문이다

또한 반환타입또한 객체나 배열등 자유롭게 가질수있기 때문에 굉장히 유용하였다

동작방식으로는 reduce의 callback함수에 축적가능한 변수가 있는데 이를 이용한 방식이다

동작 순서는 아래의 예제의 1~5번순서이다


const data = [2,3,4,5,6];

const result = data.reduce((acc, currentValue) => { // 2. acc는 1에서 설정한 초기값 공백배열을 받는다
  if (currentValue % 2 === 0) { // 3. data배열의 첫번째 요소인 2가 currentValue에 할당되며 if절을 true를 만족하므로 통과한다
    acc.push(value * value);    // 4. 공백배열 acc에 첫번째 요소인 2를 연산(2*2)해서 결과값(4)을 acc에 push한다
  }
  return acc; // 5. 4의 결과값인 [4]를 반환한다. 이 결과는 해당 reduce함수가 다음 루프로 이동되며 축적되어 다시 2번으로 루프될때 acc의 초기값이 축적된값 [4]로 시작된다
}, []); // 1.reduce에서 첫번째 acc로 사용될 값을 설정한다 ( 즉 반환값으로 사용될 타입을 정의한다 )

console.log(result); // [4,16,36]


Reduce함수 사용이유

  1. 유연성

    배열의 요소를 하나씩 순회하며 축적하는 방식으로 동작한다

    그렇기 때문에 map, filter, find, some, every 등 여러 배열 메서드의 기능을 reduce 하나로 구현할 수 있다

  2. 반환값의 다양한 타입 설정

    반환값을 다양한 타입으로 타입 ( 배열,객체,문자열,숫자 )으로 받을수있다

  3. 값을 누적해서 구할수 있음


사용법

arr.reduce(callback[, initialValue])

첫번째 인수인 callback함수는 아래의 인수를 가진다 (필수)

  1. accumulator - accumulator는 callback함수의 반환값을 누적합니다.

  2. currentValue - 배열의 현재 요소

  3. index(Optional) - 배열의 현재 요소의 인덱스

  4. array(Optional) - 호출한 배열


두번째 인수인 initialValue (선택)

  • 최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용한다


반환값

  • 각 callback함수를 실행한 누적값


예제1

reduce로 map과 filter기능을 사용한 예제

(사용한 방식으로써는 초기값인 빈배열에 값을 push해가며 값을 누적하고 마지막에 반환하는 방식이다)

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

// map과 filter를 동시에 사용하여 짝수인 숫자를 제곱하는 예시
const result = data.reduce((acc, value) => {
  if (value % 2 === 0) { // 이 부분에서 filter를 사용
    acc.push(value * value); 
  }
  return acc;
}, []); // 배열을 순회하며 계산할 값을 배열형태로 반환하기때문에 map을 사용한다고 볼수있다  

console.log(result); // [4, 16]


예제2

반환값으로 객체를 사용하는 예제

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

// 요소를 키로, 제곱 값을 값으로 하는 객체 생성
const result = data.reduce((acc, value) => {
  acc[value] = value * value;
  return acc;
}, {});

console.log(result); // {1: 1, 2: 4, 3: 9, 4: 16, 5: 25}


반환값으로 문자열을 사용하는 예제

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Dave', age: 40 }
];

// age가 30 이상인 사용자들의 이름을 콤마로 연결한 문자열 생성
const result = users.reduce((acc, user) => {
  if (user.age >= 30) {
    acc.push(user.name);
  }
  return acc;
}, []).join(', ');

console.log(result); // 'Bob, Dave'



참조

reduce에 대해서


May 25, 2024 Views 102