본문 바로가기
Programming/Javascript

자바스크립트 Reduce사용법

by Wilkyway 2023. 6. 17.
반응형

reduce 함수는 자바스크립트에서 배열 또는 리스트 안의 요소들을 정렬하거나 특정 조건에 부합하면 합계나 평균 등을 계산하는데 사용되는 함수입니다.  개인적으로 자주 쓰지는 않지만 잘 알고있으면 많이 유용하게 쓸 수 있을것 같아서 정리해놓겠습니다.

 

1. 기본사용법

result = my_array.reduce((acc, cur, i) => {
    return (acc~연산~cur);
}, acc초기값);

- acc: accumulate(누적값)

- cur: current(현재값)

- acc초기값: 누적하기 전에 시작값을 지정

const my_array = [1,2,3,4,5]
const result = my_array.reduce((acc, cur, i) => {
  console.log(acc, i);
  return acc + cur;
}, 0);

console.log(result);

reduce함수는 주로 누적합 또는 누적곱을 구할때 많이 씁니다. 위 예제도 가장 기본적인 누적합을 나타내고 있습니다. acc초기값에 0을 주면 누구나 예상하는 배열의 누적값을 구하게 되고, 거기에 다른 값을 주게 되면 0이아닌 다른 시작값을 갖고 더해나간다고 보시면 되겠습니다.

 

2. 홀짝 구분하기

const my_array2=[1,2,3,4,5,6,7]

const result2 = my_array2.reduce((acc, cur, i) => {
  acc.push(cur % 2 ?'홀수' : '짝수');
  return acc;
},[])

console.log(result2);

// ['홀수', '짝수', '홀수', '짝수', '홀수', '짝수', '홀수']

짝수만 Filter 

const my_array3=[1,2,3,4,5,6,7]

const result3 = my_array3.reduce((acc, cur, i) => { 
     if(i%2){
       acc.push(cur);
     }
     return acc; 
 },[]);
console.log(result3);

// [ 2, 4, 6 ]

 

3. 객체 다루기

- 나이에 3을 곱한 새로운 배열을 생성하는 예

const obj_array=[
  {
    name: "one",
    age: 1,
  },
  {
    name: "two",
    age: 2,
  },
  {
    name: "three",
    age: 3,
  }
]

const result = obj_array.reduce((acc, cur,i)=>{
  acc.push(cur.age*3)
  return acc;
},[])
console.log(result);

//[ 3, 6, 9 ]

위의 예제는 map함수와 비슷하게 사용이 가능합니다. 이처럼 reduce를 사용하면 map이나 filter, sort, find 등 다양한 함수들을 reduce로 직접 구현해서 사용할 수 있습니다.

 

Reduce함수에 대해 간단한 사용법 몇가지를 알아보았습니다.

 

반응형

댓글