JavaScript 배열 메소드 reduce() 쉽게 배우기 - 예시 코드 제공

JavaScript 배열 메소드 reduce() 쉽게 배우기 - 예시 코드 제공

 

 

JavaScript에서 배열을 조작하고 배열 요소들을 결합하거나 변환하는 강력한 배열 메소드 중 하나가 reduce()입니다. 이 글에서는 reduce() 메소드의 사용법과 예시 코드를 통해 이해해보겠습니다.

 

 

reduce() 메소드란?

 

reduce() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 누적하는데 사용됩니다. 이 메소드를 통해 배열 요소들을 결합하거나 합산하는 작업을 수행할 수 있습니다.

 

 

// 기본 문법
const result = array.reduce(function(accumulator, currentValue, index, array) {
    // 현재 요소를 누적 결과에 결합하여 새로운 누적 결과 반환
    return newAccumulator;
}, initialValue);

 

• accumulator: 누적된 값
• currentValue: 현재 반복 중인 요소의 값
• index: 현재 요소의 인덱스
• array: 원본 배열
• initialValue: 초기 누적 값 (선택 사항)

 

 

reduce() 메소드 사용 예시

 

이제 reduce() 메소드의 사용 예시를 통해 실제 동작을 살펴보겠습니다.

 

// 예시 배열
const numbers = [1, 2, 3, 4, 5];

// 모든 숫자의 합 구하기
const sum = numbers.reduce(function(accumulator, number) {
    return accumulator + number;
}, 0);

console.log(sum); // 15

 

위 코드에서 reduce()를 사용하여 numbers 배열의 모든 숫자를 누적하여 합을 구합니다.

 

 

reduce()를 사용한 배열 요소 합산

 

reduce() 메소드를 사용하여 배열 요소를 합산하는 예시를 살펴보겠습니다.

 

 

// 예시 배열
const expenses = [200, 100, 300, 150, 50];

// 모든 비용 합산하기
const totalExpense = expenses.reduce(function(total, expense) {
    return total + expense;
}, 0);

console.log(totalExpense); // 800

 

위 코드에서 reduce()를 사용하여 expenses 배열의 모든 비용을 누적하여 총 비용을 구합니다.

 

 

reduce()의 반환 값

 

reduce() 메소드는 누적된 최종 값 또는 결과를 반환합니다. 초기 누적 값 (initialValue)를 제공하지 않으면 첫 번째 배열 요소가 초기 누적 값이 됩니다.

 

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

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

console.log(sum); // 15

 

 

초기 누적 값의 활용

 

reduce() 메소드에서 초기 누적 값을 지정하는 경우, 더 다양한 계산을 수행할 수 있습니다. 예를 들어, 배열 요소 중 최대값을 찾는 작업을 해보겠습니다.

 

 

const numbers = [10, 5, 30, 8, 17];

// 최대값 찾기
const max = numbers.reduce(function(accumulator, number) {
    return Math.max(accumulator, number);
}, numbers[0]);

console.log(max); // 30

 

위 코드에서 초기 누적 값으로 배열의 첫 번째 요소를 사용하여 최대값을 찾습니다.

 

 

끝으로

 

reduce() 메소드는 배열 요소를 누적하거나 결합하는 데 유용한 배열 메소드입니다. 이를 통해 배열 요소들을 합산하거나 복잡한 계산을 수행할 수 있으며, 초기 누적 값을 활용하여 다양한 작업을 수행할 수 있습니다. reduce()를 활용하여 JavaScript 코드를 보다 효율적으로 작성하고 배열 요소를 다양하게 처리하세요.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 배열 메소드 filter() 쉽게 배우기 - 예시 코드 제공

 

JavaScript 배열 메소드 map() 쉽게 배우기 - 예시 코드 제공