Array reduce with object as initial value

Question

Can anyone explain what's going on with reduce function in the below example, I have an object with keys and empty arrays as the initial value for reduce method, I would like to have step by step explanation inside reduce method

 initExercises = { shoulders: [], chest: [], arms: [], back: [], legs: [] } exercises = [ { id: "overhead-press", title: "Overhead Press", description: "Delts exercise...", muscles: "shoulders" }, { id: "dips", title: "Dips", description: "Triceps exercise...", muscles: "arms" }, { id: "barbell-curls", title: "Barbell Curls", description: "Biceps exercise...", muscles: "arms" }, { id: "bench-press", title: "Bench Press", description: "Chest exercise...", muscles: "chest" }, { id: "pull-ups", title: "Pull Ups", description: "Back and biceps exercise...", muscles: "back" }, { id: "deadlifts", title: "Deadlifts", description: "Back and leg exercise...", muscles: "back" }, { id: "squats", title: "Squats", description: "Legs exercise...", muscles: "legs" } ]; console.log( exercises.reduce((acc, curr) => { const { muscles } = curr; acc[muscles] = [...acc[muscles], curr] //what's happening here? return acc; }, initExercises) )

Answer 1

Your reduce function explained:

exercises.reduce((acc, curr)=>{ /*...*/ }, initExercises)

...will...

• put initExercises into acc , and exercises[0] into curr
• then put the prevoius iteration's return value into acc and the current element to curr
• finally, it returns the last iteration's return value.

This snippet:

const {
    muscles
} = curr;

...extracts the muscles property from the object curr (which is an element of the exercises array) to the constant muscles .

Then, this:

acc[muscles] = [...acc[muscles], curr]

...creates a new array, spreads ( ... syntax) the previous one for the same muscle (located in the acc umulator object's property pointed by the (just destructured) muscles variable) into it, and appends the curr ent object at the end; and finally replaces the old array in acc[muscles] (the property pointed by muscles ) with that new array.

Lastly, it return s the acc umulator, to keep it for the next iteration.

So the function returns an object, in which the array's elements are grouped by their muscles property.

---

Iterations in detail:

# | acc           | curr                         | muscles       | [...acc[muscles], curr]                           | return value
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
0 | initExercises | {id: "overhead-press", ... } | "shoulders"   | [{id: "overhead-press", ... }]                    | {shoulders: [{id: "overhead-press", ... }], chest: [], arms: [], back: [], legs: []}
1 | return of #0  | {id: "dips", ... }           | "arms"        | [{id: "dips", ... }]                              | {shoulders: [{id: "overhead-press", ... }], chest: [], arms: [{id: "dips", ... }], back: [], legs: []}
2 | return of #1  | {id: "barbell-curls", ... }  | "arms"        | [{id: "dips", ... }, {id: "barbell-curls", ... }] | {shoulders: [{id: "overhead-press", ... }], chest: [], arms: [{id: "dips", ... }, {id: "barbell-curls", ... }], back: [], legs: []}
...

Answer 2

Spread syntax , acc[muscles] = [...acc[muscles], curr] equal to acc[muscles] = acc[muscles].concat(curr) , eg adding curr ent exercise to group with key muscles