자바스크립트 기본 문법 – 배열 – 배열 메서드 – 3 – reduce

작성자 wooah

자바스크립트 기본 문법 – 배열 – 배열 메서드 – 3 – reduce

소제목: 배열의 reduce 메서드란?

배열의 reduce 메서드는 배열 요소들을 순차적으로 하나의 값으로 줄여주는 기능을 제공합니다. 이 메서드는 배열의 모든 요소를 반복하면서 각 요소에 대해 지정된 콜백 함수를 실행하고, 콜백 함수의 결과를 누적시켜 최종 결과값을 반환합니다. 다른 배열 메서드들과 달리 reduce 메서드는 누적된 값을 반환하기 때문에, 배열의 요소들을 가공하거나 합치는 등의 작업에 유용하게 사용됩니다.

예시: 배열의 요소들의 합 구하기

아래 예시를 통해 reduce 메서드를 이해해보겠습니다. 우리는 배열에 있는 숫자들의 합을 구하고 싶습니다.

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 출력 결과: 15

위 코드에서 reduce 메서드는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 누적된 값을 저장하는 변수인 accumulator입니다. 두 번째 매개변수는 현재 처리 중인 요소의 값인 currentValue입니다. 초기값으로 0을 전달하였기 때문에 accumulator는 0부터 시작합니다.

reduce 메서드는 배열의 첫 번째 요소부터 마지막 요소까지 반복하면서 콜백 함수를 실행합니다. 콜백 함수에서는 accumulator와 currentValue를 더한 값을 반환하고, 이 값은 다음 순회 때의 accumulator로 사용됩니다. 이렇게 모든 요소를 반복하고 나면 reduce 메서드는 최종적으로 누적된 값인 합계를 반환합니다.

비유적인 표현

배열의 reduce 메서드는 마치 당신이 여러 가지 재료를 가지고 요리를 만들 때와 비슷합니다. 당신은 한 번에 한 가지 재료만 사용하며, 그 재료를 이전에 만든 요리에 추가하여 계속해서 요리를 만들어나갑니다. 최종적으로 당신은 모든 재료들이 결합된 최고의 요리를 얻게 됩니다.

자세한 설명

reduce 메서드의 콜백 함수는 네 개의 매개변수를 받을 수 있습니다. 위의 예시에서는 두 개의 매개변수만 사용했지만, 다음과 같이 사용할 수 있습니다.

arr.reduce((accumulator, currentValue, currentIndex, array) => {
  // 콜백 함수의 내용
}, initialValue);
  • accumulator: 누적된 값을 저장하는 변수입니다. 콜백 함수의 결과를 이 변수에 계속해서 누적시킵니다.
  • currentValue: 현재 처리 중인 요소의 값입니다. 배열을 순회하면서 차례대로 콜백 함수에 전달됩니다.
  • currentIndex (선택적): 현재 처리 중인 요소의 인덱스입니다.
  • array (선택적): reduce 메서드가 호출된 배열 자체입니다.
  • initialValue (선택적): reduce 메서드가 최초로 호출될 때 accumulator에 할당할 초기값입니다. 이 값을 생략하면 배열의 첫 번째 요소가 초기값이 됩니다.

주의해야할 점

  1. reduce 메서드를 사용할 때는 초기값(initialValue)을 명시하는 것이 좋습니다. 초기값을 설정하지 않으면 배열이 비어있을 때 TypeError가 발생할 수 있습니다.
  2. reduce 메서드는 원본 배열을 변경하지 않습니다. 하지만 콜백 함수 내에서 부작용이 발생할 수 있으므로 주의해야 합니다.
  3. reduce 메서드는 빈 배열에 대해서도 동작합니다. 초기값이 주어진 경우 초기값이 반환되고, 초기값이 주어지지 않은 경우 TypeError가 발생하지 않고 undefined가 반환됩니다.
  4. reduce 메서드는 반복문 대신 사용할 수 있으며, 코드를 간결하게 작성하는 데 도움을 줍니다. 그러나 적절한 사용처를 고려하여 사용해야 합니다. 다른 배열 메서드들과 마찬가지로 의도를 명확히 표현하는 것이 중요합니다.

이제 자바스크립트의 배열 메서드 중 하나인 reduce에 대해 상세하게 알게 되었습니다. 배열을 다룰 때 reduce 메서드는 매우 유용한 도구입니다. 요소들을 합치거나 가공하는 등의 작업을 할 때 적절히 활용해보세요!

답글 남기기