Frontend/javascript

[javascript] Array.reduce() + 예제

민57 2023. 12. 13. 04:29

 

배열 내 요소의 합을 구하는 문제를 풀다가 reduce의 자세한 문법을 몰라서 반복문을 이용했다.

풀이는 해결은 했지만, 그래도 이번 기회에 arrayreduce 메소드를 공부하며 알게 된 내용을 기록해본다.

 


 

Array.reduce()

각 요소에 대해 주어진 콜백(callback) 함수를 실행하여 배열을 단일 값으로 축소하는 배열 메서드.

즉, 배열을 반복하면서 원하는 로직을 적용하는 부분에서 이용할 수 있다.

 


 

 

기본 사용법

 

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

 


매개변수 종류

 

1. callback : 각 요소에 대해 실행할 함수로, 다음 네 개의 매개변수를 받는다.

- accumulator 누적된 값. 각 요소를 통과하며 값이 누적됨

- currentValue 현재 처리 중인 요소의 값

- index (옵션) 현재 처리 중인 요소의 인덱스

- arrray (옵션) reduce를 호출한 배열

 

2. initialValue (옵션) : callback 함수의 첫 번째 호출에서 사용할 초기값. (미지정 시 배열의 첫 번째 요소 사용)

 


 

 

Array.reduce() 예제 문제

 

1. 배열의 합 구하기

// 배열의 합 구하기

function sumArray(arr) {
  // 이곳에 코드를 작성
}

const arr = [1, 2, 3, 4, 5];
const result = sumArray(arr);
console.log(result); // 출력: 15

 

정답

 

function sumArray(arr) {
  return arr.reduce((acc, curr) => acc + curr, 0);
}

 

 

2. 배열의 최대값 찾기

// 배열의 최대값 찾기

function findMaxValue(arr) {
  // 이곳에 코드를 작성
}

const arr = [3, 7, 1, 9, 4];
const result = findMaxValue(arr);
console.log(result); // 출력: 9

 

정답

 

function findMaxValue(arr) {
  return arr.reduce((acc, curr) => Math.max(acc, curr), arr[0]);
}

 

 

3. 배열의 요소 문자열로 결합하기

// 배열의 요소 문자열로 결합하기

function mergeStringArray(arr) {
  // 이곳에 코드를 작성
}

const arr = ['Hello', ' ', 'World', '!'];
const result = mergeStringArray(arr);
console.log(result); // 출력: 'Hello World!'

 

정답

 

function mergeStringArray(arr) {
  return arr.reduce((acc, curr) => acc + curr, '');
}

 


 

 

더 자세한 설명은 mdn에 잘 나와 있다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

 

Array.prototype.reduce() - JavaScript | MDN

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

developer.mozilla.org

 

 

728x90