Press "Enter" to skip to content

Reduce basics – Part 3 of Functional Programming in JavaScript


hello in this series we are learning

function appropriate JavaScript if you

have not watched the two previous

episodes you should do so first before

watching this one can do so by clicking

there ish in this episode we will learn

about yet another higher-order function

read dupes so why should you learn

reduce for me learning about reduce was

one of those no holy moments in

programming I had heard about reduce I

heard the word I kinda sorta thought it

was something that you could doing

databases no sequel databases and when I

finally learned it oh my god I can use

this everywhere then you do your

interview should so what is reduce

before we talk about that let’s recap

what we learned in previous videos we’ve

learned about a couple of higher-order

functions map filter and reject what all

these have in common is that they

transform a list into something else

map will take an array and transform

that into an array of the same length

but with each individual item transform

filter transforms an array into a

smaller array we also briefly learned

about reject which does the same thing

as filter but inverted another example

that I haven’t mentioned is find which

does the same thing as filter but only

returns the first item so that

transforms an array into a single item

there are lots of array transformations

like this on the array object but what

to do if you can find one that fits that

is where reduce comes in

map filter reject and find are all list

transformations they turn your list into

something else but they are all pretty

specific reduce is not reduce is the

multi tool on list transformations it

can be used to express any list

transformation in fact you can use

reject to implement functions like math

further reject or find or any other list

transformation reduce is the super list

transformation that you can fall back on

if you can’t find a prebuilt

list transformation that fits your

problem and now we have done three

minutes without code which means that

you guys have died of boredom and I’m

talking oh oh okay

pause the video do some stretching oh my

god it’s cool have a look at this ring

our mission is to summarize or the

amounts I’m going to show you how to do

this use reduce but first let me make a

for loop let’s have a look at this we

create a variable called total amount

and we loop through the orders and for

every order here we take the amount and

add it to total mom says console.log

run it and it gives us this up its

reimplemented s using reduce I will

comment out the for loop so that it can

compare them here we go so just like map

or filter reduce is a function on the

array object and just like math and

filter it takes a callback function

but unlike map and filter it wants an

object you can think of this object as a

starting point for our sum it’s going to

be zero and this sum is going to be

passed as the first argument to the

reduce code just like map and filter

reduce will also receive the iterated

item but it’s going to be the second

argument now what we going to do is that

we’re going to take the sum that we

received the initial value and we’re

gonna add the order amount to it so this

is going to be take the first order and

add zero point and return and this

return value will in turn be passed as

the sum in the next situation which in

turn will add its amount to it and

return that and so on until we are

finished so if we save and run it will

give us the same amount as the for loop

let me place a console dot log inside

hello where we echo out the Sun and the

order that we’re getting in and we run

it the first situation we are receiving

the first object in the array and we’re

also getting the starting value that we

are passing in as a second argument to

reduce we return a value here which will

be zero plus 250 which will be passed on

to the second iteration of reduce which

we see here so the return value is

passed in as a sum along with the second

item in the array and we’re adding on

400 to 250 and we’re returning that to

the next iteration of the loop which be

what will be 650 and it will get the

third item and so on until we have

iterated all the items in the array and

then the final return value will be

returned and that will be our self let’s

compare this to the board will remove

the consult long non-supportive doesn’t

happen also look long if we look at the

for loop it is 97 characters if you look

here down in the lower left corner and

when I select the reduce function you’ll

see that it’s 88 characters it is

slightly shortened the difference is not

quite as dramatic as between the for

loop and map and filter when you can use

those because they are very specific and

very tailored to their job so you have

to give reduce some slack because it’s a

lot more generic and to do a lot more

work in I could talk about it can do any

array transformation which we will look

at later but reduce is still

shorter than the the for-loop and

especially remember that we talked about

arrow functions new format for functions

you’ll see that it is a lot so in this

video I talked about how reduce fits

into your toolbox how math and filter

and reject and find are all list

transformations and how reject is the

multi tool of list transformations which

you can use if you can find a pre-built

transformation that fits your purposes

I’ve also showed you a super basic

example of what you can use reduce for

however the example that I showed you is

extremely basic and really doesn’t

showcase the extreme power of this

function so I want to spend the next

episode on reduce as well talk about how

reduce combines with other list

transformations I want to talk about how

reduce can create much more complex and

interesting objects than just the sum

that I showed you in the example I am

going to sell you on how powerful this

function is do not mess it follow me on

twitter at MP Jamie or just simply

subscribe by clicking there why can’t I

point correctly this is me doing

post-production pointing there there

there this subscription is there see you next Monday until then stay curious

Please follow and like us: