[자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법

 

 

 

 

 

 

 

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기

---

 

배열 join() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/254

[자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법

 

 

배열 map(), forEach() 인기있는 메서드 사용법에 대해 알아보기

https://cometruedream.tistory.com/253

[자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점

 

 

활용가치가 좋은 every(), some() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/250

[자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법

 

 

🤷‍♂️ reduce 함수란?

---

javascript의 reduce() 내장함수는 배열의 요소들을 순차적으로 처리하여 하나의 값을 얻을 수 있는 함수입니다.

이 함수는 배열의 순회하면서 각각의 요소에 콜백 함수를 실행하여 콜백 함수의 반환값은 다음 요소에 대한 콜백 함수 실행 시 전달되는 “누적값”이 됩니다.

 

reduce() 메서드에 대해 자세히 이해하면

💡 reduce 내장함수는 배열의 요소를 순차적으로 순회하며 숫자, 배열, 객체를 하나의 값으로 줄여 반환하는 함수입니다.
즉 배열을 기반으로 하나의 값을 도출할 때 많이 사용됩니다. 

 

 

🤷‍♂️ reduce 함수의 기본 문법

---

reduce() 함수는 다음과 같은 형태로 사용됩니다.

arr.reduce(callback(accumulator, currentValue, index, array), initialValue);
// 배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값);

1. accumulator: 이전에 콜백 함수에서 반환된 누적값 (최초 실행 시 initialValue 전달됩니다 없으면 array[0] 전달됩니다.)
2. currentValue: 현재 인데스 배열의 요소
3. currentIndex: 현대 배열의 인덱스 (선택사항)
4. array: 원래 배열 (선택사항)

reduce() 함수의 중요한 4가지 콜백 인자 값들에 대해서 알아보았습니다.

currentIndex와 array 인자 값은 선택적으로 사용할 수 있습니다.

저는 주로 accumulator과 currentValue 인자 값으로 다양한 결과물을 도출하는 데 사용합니다.

 

 

 

1. reduce() 많이 사용되는 활용 예시?

 

숫자 배열의 합 구하기

const arr = [1, 2, 3, 4, 5]
  
// accumulator, currentValue, currentIndex 인자값은 acc, cur, idx 줄여서 많이 사용합니다.
arr.reduce(function (acc, cur, idx) {
  console.log(acc, cur, idx);
  return acc + cur;
}, 0); //초기값 0 셋팅

// 결과값 15

 

브라우저 개발자 모드에서 위에 코드를 실행시 자세하게 코드의 로직을 알려줍니다.

 

• accumulator: 배열의 요소를 순회하면서 축적된 값
• currentValue: 현재 배열의 요소에 값
• currentIndex: 현재 배열의 index 값

 

 

 

배열 안에 객체의 나이의 총합 구하기

const users = [
  { name: "철수", age: 26 },
  { name: "민지", age: 35 },
  { name: "현아", age: 10 },
  { name: "희수", age: 64 },
  { name: "은수", age: 29 },
];

const totalAge = users.reduce((accumulator, currentValue) => {
  return accumulator + currentValue.age;
}, 0);

// 결과값 164

 

배열 안에 객체의 총합을 reduce() 내장함수를 사용해서 쉽게 구할 수 있습니다.

개발자들은 for 문을 사용하는 것을 지양하려고 노력합니다.

그래서 reduce() 사용해서 성능과 가독성과 코드 수를 줄일 수 있습니다.

 

2. reduce() 많이 사용되는 활용 예시2?

숫자 배열의 최대값 구하기

const numbers = [10, 3, 20, 15, 7, 100];
numbers.reduce((accumulator, currentValue) => {
  return Math.max(accumulator, currentValue);
}, numbers[0]); //numbers 배열에 첫번째 값을 초기값으로 셋팅

// 결과값 100

 

배열을 순회하면서 최대값을 찾을수 있습니다.

 

배열안에 문자열의 등장 횟수 구하기

const words = ["apple", "banana", "apple", "orange", "banana", "orange", "apple"];

words.reduce((accumulator, currentValue) => {
  accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
  return accumulator;
}, {}); //초기값은 빈객체로 셋팅

//결과값 {apple: 3, banana: 2, orange: 2}

 

배열을 순회하면서 배열안에 문자열의 등장 횟수를 구할수 있습니다.

 

🤷‍♂️ 마지막으로

---

다양한 예제를 통해서 reduce() 함수의 사용법을 공부했습니다.

지금 저는 함수 형태로 예시를 들었지만 최신 문법 화살표 함수를 사용해서 더 간결한 코드로 구성할 수도 있습니다.

reduce() 내장함수의 4가지 인자 값을 활용해서 다양한 작업은 효율적이고 코드를 간소화해서 작업을 할 수 있습니다.

또한, 이 함수는 배열의 요소들을 순회하면서 원하는 형태의 결과값을 도출하는데 아주 유용하며 개발자들에게 편리함을 제공합니다.

 

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리