How I used JS Reduce function and adding it to Object.prototype.

This week when I was working on my javascript project, I faced an interesting task. I was need to get some information from the collection, to use reduce function for have one final summary value. The interesting part of this was that I wanted to do it by adding my methods to Object.prototype.

In first I had a data like this:

let birthdayParty = [ { name: "Easy Chicken Strips", ingredients: [ {name: "Flour", dose: 3, price: 5}, {name: "Crushed cornflakes", dose: 10, price: 3}, {name: "Skinless chicken", dose: 8, price: 5} ], output: 20, goal: 30 }, { name: "Taco Mac", ingredients: [ {name: "Cheese dinner mix", dose: 1, price: 4}, {name: "Pork sausage", dose: 5, price: 8}, {name: "Medium tomatoes", dose: 2, price: 2} ], output: 15, goal: 15 }, { name: "Berry Smoothie Milkshake", ingredients: [ {name: "Frozen mixed berries", dose: 5, price: 2}, {name: "Medium frozen banana", dose: 6, price: 1}, {name: "Low fat plain Yogurt", dose: 4, price: 2}, {name: "Low fat milk", dose: 1, price: 4} ], output: 10, goal: 30 }, ] That is all fake data, no worries.

It seems like we are going to have a birthday party and we are planing to calculate how much money we need for cooking. Also we would like to be able to calculate this all for the number of invited guests.

Here: output => estimated number of servings for a specific recipe;

goal => required amount of servings for a specific recipe

And output I was expect should be something like this:

recipe.totalPrice // 35 or recipe.totalPriceForParty // 55

Before I talk through my solution, I'd like to touch on the basics of using reduce method.

By MDN Web Docs Syntax for Array.prototype.reduce():https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

"

// Arrow function

reduce((previousValue, currentValue) => { /* ... */ } )

reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )

reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }) reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

// Callback function

reduce(callbackFn)reduce(callbackFn, initialValue)

// Inline callback function

reduce(function(previousValue, currentValue) { /* ... */ })

reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })

reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })

reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue) "

I am going to use first one. For better understanding I like this example from the internet:

const array = [15, 16, 17, 18, 19];

function reducer(previous, current, index, array) {

const returns = previous + current;

console.log(`previous: ${previous}, current: ${current}, index: ${index}, returns:${returns}`);

return returns;

}

array.reduce(reducer);

output:

previous: 15, current: 16, index: 1, returns: 31

previous: 31, current: 17, index: 2, returns: 48

previous: 48, current: 18, index: 3, returns: 66

previous: 48, current: 18, index: 3, returns: 66

The first step was to create the Object. I took one recipe from the collection and my solution:

const recipe = new Object({ name: "Taco Mac", ingredients: [ {name: "Cheese dinner mix", dose: 1, price: 4}, {name: "Pork sausage", dose: 500, price: 8}, {name: "Medium tomatoes", dose: 2, price: 2} ], output: 10,

}

now I have:

recipe.name // "Taco Mac"

recipe.ingredients // [ {name: "Cheese dinner mix", dose: 1, price: 4}, {name: "Pork sausage", dose: 500, price: 8}, {name: "Medium tomatoes", dose: 2, price: 2} ]

recipe.output // 10

The next step is adding functions to the object:

const recipe = new Object({ name: "Taco Mac", ingredients: [ {name: "Cheese dinner mix", dose: 1, price: 4}, {name: "Pork sausage", dose: 500, price: 8}, {name: "Medium tomatoes", dose: 2, price: 2} ], output: 10, totalPrice: function() { let total = this.ingredients.reduce(function(prev, curval) { return (prev + curval.dose * curval.price) },0); return total }, totalPriceForParty: function(goal) { if (goal <= this.output) {return this.totalPrice() } else if (goal > this.output) {return goal/this.output * this.totalPrice()} } })

Note: here we have to use this keyword for ingredients for make its visible inside the function

Excellent. Now we are available:

recipe.totalPrice() // output 32

recipe.totalPriceForParty(10) // output 32

recipe.totalPriceForParty(15) // output 48

And finally we can create new Object with prototype:

const chickenStripsRecipe = {

name: "Easy Chicken Strips",

ingredients: [ {name: "Flour", dose: 3, price: 5}, {name: "Crushed cornflakes", dose: 10, price: 3}, {name: "Skinless chicken", dose: 8, price: 5} ], output: 20 }

const chickenStrips = new Object(recipe)

chickenStrips.name = "Easy Chicken Strips"

chickenStrips.ingredients = [ {name: "Flour", dose: 3, price: 5}, {name: "Crushed cornflakes", dose: 10, price: 3}, {name: "Skinless chicken", dose: 8, price: 5} ]

chickenStrips.output = 20

chickenStrips.totalPrice() // output 85

chickenStrips.totalPriceForParty(30) // output 127.5

Don't worries, it is a not real prices ):