Video Title: JavaScript Array Reduce
Once again with our array of numbers let’s say we want to calculate the sum of all these numbers in this array this would be similar to calculating the total cost of all the items in a shopping cart so each numbers here could represent the price of an item in a shopping cart of
Course we wouldn’t have a negative number there but you got the point so here’s a very simple algorithm for calculating the sum of all the numbers in this array we start with declaring a variable called sum and we initialize it to zero next we loop over this array get each
Element or each number and add it to some something like this for let n of numbers now we’re going to add n to sum so we can write an expression like this sum equals sum plus n or a better way is to use the addition assignment operator
So you can exclude the second sum so this is exactly like the statement we had before and finally we display sum on the console so we get 5 now there is a cleaner and more elegant way to write the same code using the reduce method in arrays so all these arrays have this
Reduce method and with this method we can reduce all these elements in an array into a single value that single value can be a number it can be a string it can be an object it can be anything in this example we want to reduce all these elements into a single number that
Is the sum of all the numbers in this array so let’s see how we can use the reduced method this method takes a callback function with two parameters accumulator and current value so here I’m using an arrow function like this this accumulator parameter here is exactly like this song we have here it’s
Something that we initialize and then this callback function is executed multiple times each time this current value will be set to one element in this array okay so in each call we want to get this current value and add it to an accumulator so we simply return the sum
Of accumulator plus current value now internally this reduce method will get this result and store it in the accumulator you will see that in a second now one last thing we need to do here is to initialize this accumulator to zero so as the second argument to the reduce method we pass zero
Note that this reduce method has two arguments the first argument is a callback function and the second argument is the initial value for the accumulator finally we get the result as a single value in this case some now we don’t need this code anymore and finally let’s bring let’s consult our log here
Save the changes you can see we get the same result five but let’s see what exactly is happening here so initially we said accumulator to zero so I’m going to set a equals zero in the first round current value will be set to the first
Number so C equals one now we add this together so we get one and a will be set to one after this callback function is executed so as a result a will be one now in the second round a is one current value will be set to
The second number in this array so minus one now once again we add them together so a will be zero after the second call now the third call so a is zero the current value is going to be set to the third element in this array so – and
As a result a will be two and finally in the last call we start with a set to two and current value will be three okay so the result will be five and that’s why we saw five on the console so essentially with this reduce method we
Start with an accumulator then we loop through this array and convert all these elements into a single value which is in this case accumulator or the sum of all the numbers in this array now we can make this code even shorter we can exclude the initialization of the accumulator and with this accumulator
Will be set to the first element so let me show you what will happen a will initially be set to 1 and current value will be set to minus 1 that is exactly like our second call here right so as a result a will be set to zero now in our
Second round a will be zero and current value will be 2 because in the previous call current value was here so now we’re here so current value will be 2 and as a result a will be 2 and finally in the last call a will be 2 and current value
Will be 3 the last element in this array and once again we get fine so if this supply an initial value we’ll have one more call if we don’t the first element in this array will be used as the initial value so this is how the reduce
Method works and finally to make this code a little bit shorter we can get rid of this return keyword because we have a single line and we are simply returning a value so remove the return the semicolon and the curly braces put everything on a single line like this
So with this single line of code we reduce the numbers array and this is how our reduction algorithm works we simply get the current value and add it to accumulator this is far cleaner and more elegant than declaring a song and then looping over this array like let n
Of numbers and then add and to the sum that’s a very old way of writing code hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if
You’re an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of
These exercises are questions that come up in technical programming interviews so if you’re pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this
Course with a discount using the link in the video description click the link to find out more about the course and in row
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Thanks Bro
wow just wow
😐
This is very clear and simple explanation!! Thank you very much 😊
why current value won't be 1 when a=1. why it is -1?
6:39 I felt that
This is just the simplest of reduce function it is far more complicated than this. It is the most complicated array method and using it for sum is not really the objective.
best coding teacher 🙂
Thank you Mosh. This is one of the best explanations about how to use reduce, that I could find on YouTube.
bro u are pro 😅😅
Omg I wouldn't learn it without this video. Still I think for loop is easier 😉 I think reduce is fancy way of coding 😀 I don't like it but that's the way you see people code in real job 😀
https://youtu.be/a_Bfu1XWGmI
So much good content buddy! Very didactic!
Thank you so much brother,your explanation was very simple and clear
You are a king in easy explaining
this is soooo helpful
Best code videos I ever watched. Thank you brother!
I feel like the for loop looks alot cleaner than the reduce() method.
this thing was making me pull my hair out, thanks mosh
Wow this guy is simply the best and you cannot dispute that
Excellent and simplified. Is this method not called object deconstruction?
This is a better description than coding academy.
Please check – using array reduce method to count frequency of elements – https://www.youtube.com/watch?v=5wFl4NRDxNA&ab_channel=Codebuddyz
This made my brain hurt a lot less than the lesson I was reading. Thank you!
The first tutorial that made me understand reduce method. Thanks.
Lovely explaination and lovely Mosh.
We Love You Mosh, From Iran.
useful
awasom very good explanation
one of the best explaination I ever watched
This helped me so much, thank you!!!
Very well explained!
Hi Mosh, great video! Could you make a similar one explaining array sort?
ok so i must know how the second version of code is "easier" i counter 44 key strokes of code on the first method and over 50 on line 10 alone. am i missing something?
讚
Which theme he is using?
very helpful
thank you so much
Thank you mosh you explained it perfectly
thanks Mosh
thanks Mosh
Having it explained in video form is so much easier for me than reading it. Thank you!