[React] reduce 메서드

리액트를 처음 배우고 있는 와중.. 나에게 totalSum을 구하라는 과제를 줬다..
total은 amount*price임.. 예를들어 이런 표가 있을때, 저 total의 총합을 구하는것,,

reduce는 JavaScript의 배열 메서드 중 하나로, 배열의 각 요소를 순회하면서 하나의 값으로 "축소"하는 데 사용됩니다. 이 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과를 누적하여 단일 값을 반환

array.reduce((accumulator, currentValue, index, array) => {
    // 누적 결과를 계산하는 로직
}, initialValue);

• accumulator: 누적된 결과 값. 함수가 실행될 때마다 업데이트됩니다.
• currentValue: 현재 처리 중인 배열 요소.
• index (선택적): 현재 요소의 인덱스.
• array (선택적): reduce가 호출된 배열.
• initialValue: 누적기의 초기값 (선택적).

예시

1. 배열의 합 계산 :

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 초기값 0
console.log(sum); // 15

2. 객체로 변환하기 :

const fruits = [
    { name: 'apple', quantity: 2 },
    { name: 'banana', quantity: 3 },
    { name: 'orange', quantity: 1 }
];

const totalQuantity = fruits.reduce((acc, fruit) => acc + fruit.quantity, 0);
console.log(totalQuantity); // 6

3. 배열을 객체로 변환하기 :

const items = ['a', 'b', 'c'];
const result = items.reduce((acc, item) => {
    acc[item] = item.toUpperCase(); // 키-값 쌍 생성
    return acc;
}, {});

console.log(result); // { a: "A", b: "B", c: "C" }

4. 객체 배열에서 특정 키로 객체 만들기 :

const products = [
    { id: 1, name: 'Laptop', price: 1000 },
    { id: 2, name: 'Phone', price: 500 },
    { id: 3, name: 'Tablet', price: 300 }
];

// id를 키로 하고, 각 제품 객체를 값으로 하는 새로운 객체 생성
const productMap = products.reduce((acc, product) => {
    acc[product.id] = product; // id를 키로 사용
    return acc;
}, {});

console.log(productMap);
/*
결과:
{
    1: { id: 1, name: 'Laptop', price: 1000 },
    2: { id: 2, name: 'Phone', price: 500 },
    3: { id: 3, name: 'Tablet', price: 300 }
}
*/