Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method

Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method

Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method

How to calculate total sum from values in array using javascript? Consider you are building a shopping cart in JavaScript or ReactJS. User adds few products in cart and goes to cart page. Shopping Cart page should show total price for the items he is ordering. In this tutorial, we will see how can we get total price of items from ‘Array’ and ‘Array Object’ by using JavaScript.

I am using a JavaScript file that is linked in an HTML page. Output will be displayed in developer tools console.

We created an ‘Array Object’ containing service names and their prices. First we declared variable ‘total’ that has 0 value. From start price is 0. We iterated through Array Object by using forEach method.

There is another way to get total number from Array as well. That is ‘Array Reduce’ method.

https://developer.mozilla.org/en-US/d…

We can use javascript reduce method to calculate sum of numbers from Array. This is fine, but in our example we have ‘Array Object’. We can also calculate sum of values / numbers in an ‘Array Object’.

Total is accumulator in our example and 0 is its initial value. Each value from Array will be added in accumulator to give us total number. This is how you can calculate sum of all values from ‘Array’ or ‘Array Object’ easily.

✅ How To Hide / Protect JavaScript Code - Techniques and Tools
   • How To Hide / Protect JavaScript Code…  
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS \u0026 JavaScript Debugging Fast
   • React JS UNDEFINED Solution | Reactjs…  
✅ Calculate Sum or Total from Values in Array \u0026 Array Object | Learn JavaScript | Reduce Method
   • Calculate Sum or Total from Values in…  
✅ Get URL Parameters in JavaScript | URLSearchParams
   • Get URL Parameters in JavaScript | UR…  
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS \u0026 Images Support)
   • DIV to PDF, Iframe to PDF using JavaS…  
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
   • How To UnMinify JavaScript Minified F…  
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
   • Toggle Class in Vanilla JavaScript | …  
✅ How to Execute a JavaScript File by using NPM
   • How to Execute a JavaScript File by u…  
✅ Get User’s Location (Country, State, City) with Free Unlimited API Access | PHP \u0026 JavaScript
   • Get User’s Location (Country, State, …  
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
   • Replace jQuery with Vanilla JavaScrip…  
✅ Toggle in Vanilla JavaScript
   • Toggle in Vanilla JavaScript | Pure J…  
✅ MINIFY JAVASCRIPT FILES \u0026 FOLDERS in Multiple Ways (Command Line \u0026 Code Editor)
   • MINIFY JAVASCRIPT FILES \u0026 FOLDERS in …  
✅ JavaScript vs jQuery | Difference between JavaScript and jQuery
   • JavaScript vs jQuery | Difference bet…  
✅ JavaScript Variable Redeclare \u0026 Reassign | VAR vs LET vs CONST | Practical Examples
   • VAR vs LET vs CONST | JavaScript Vari…  

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress
Twitter: https://twitter.com/webstylepress
GitHub: https://github.com/webstylepress
#array #javascript #reduce #js #object #programming #webdevelopment #webstylepress


Content

3.68 -> Welcome to webstylepress. Consider you are  building a shopping cart in JavaScript or  
8.64 -> reactJS. User adds few products in cart  and goes to cart page. Shopping cart page  
16.8 -> should show total price for the items he  is ordering. In this tutorial we will see  
23.44 -> how can we get total price of items from  Array and Array Object by using javascript.  
32.4 -> I am using a javascript file  that is linked in html page.
41.04 -> Output will be displayed in  this console in developer tools.
47.04 -> Let's create an Array containing service  names and their prices. const services
59.68 -> each service will have a name and price.
71.36 -> service,
76.24 -> wordpress,
79.2 -> price, let's say 600. This is one item for  this Array. Let's add a couple of more items.
125.44 -> services Array with five items in it. Here is  how we will iterate through items in Array to  
133.52 -> get total price for all services. We want to get  total of these numbers. let total, is equal to,  
146.32 -> zero. First we declared variable 'total' that  has 0 value, so from start total price is 0, then
160.96 -> services .forEach
166.4 -> item, fat arrow,
174.32 -> total, is equal to, total +
182.32 -> item.
186.48 -> price -
191.92 -> So from services Array, we are considering  that each line is an item and from this item  
202.8 -> we are extracting the price and then  we are adding that price in this total.
210.96 -> You can also write this line like this
218 -> total += item.price
225.36 -> now all we have to do is to use console.log
240.88 -> total, save, and here as you  can see 1800 is the result
251.76 -> change the price here, refresh, and now it's 1700.
262.56 -> So this is one way. There is another way  to get total number from Array as well  
269.84 -> that is Array reduce method. You can  read more about it at mdn web docs.
284.24 -> Here is how we take sum of  all values from an Array
293.76 -> let sum
299.6 -> This is our Array - 0 1 2 3 4 5
309.76 -> .reduce
313.04 -> function
313.44 -> previousValue
316.536 -> currentValue
319.412 -> return
320.96 -> previous value +
345.44 -> current value and initial value will be 0
353.84 -> Here 0 is initial value.
360.4 -> let's use console.log
374.24 -> and here is the result 15 -
385.28 -> This is fine but in our  example we have Object Array
391.44 -> not just Array, we have Object Array,
401.52 -> so let's comment this as well
407.44 -> we can calculate sum of values in  an Object Array like this const
415.68 -> total price is equal to
419.84 -> services
426.56 -> .reduce
432.8 -> total and item
437.6 -> fat arrow
446.72 -> return
450.64 -> total plus
459.12 -> item dot price
465.76 -> services item
469.6 -> services and this is one item. item dot price
483.52 -> then we will use 0 for initial value
489.28 -> save. total is accumulator  here and 0 is its initial value
500.16 -> each value from Array will be added  in accumulator to give us total number
511.84 -> console.log
515.2 -> total price
520.08 -> refresh
523.44 -> here's the total price
529.12 -> so this is how you can calculate sum of all  values from Array or Array Object. I hope  
537.12 -> you liked this video. Hit like, share, subscribe  to channel and I will see you in the next video

Source: https://www.youtube.com/watch?v=Xw7G2b80dDg