JavaScript Array Reduce Method Practice in 5 Minutes

Learn to use the Reduce() function to convert an array of items to one output (ex. sum of items in an array).
Arrays are an essential part of JavaScript. If you want to get better at JavaScript, you have to know how to effectively use arrays, especially the built-in array methods like map, reduce, filter, sort, every, some, etc. In this series, we'll cover the JavaScript array methods you need to know to become a web developer.
Array Worksheet - bit.ly/jqq-array-practice
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...

Пікірлер: 90

  • @SunnyVakil
    @SunnyVakil3 жыл бұрын

    Love the third use case 😻

  • @boemanuel1273

    @boemanuel1273

    2 жыл бұрын

    instaBlaster

  • @bar8393gm
    @bar8393gm3 жыл бұрын

    Just what i'm looking for. Great work. I'm a looooonnnnng time SQL programmer and new to javascript (which is my new retirement hobby). I was always wondering how in javascript to do a simple "Select EyeColour, count(*) from Characters group by EyeColor". This has opened my eyes! (Which are blue by the way if you need to add that to the data set. 😁)

  • @KieCodes
    @KieCodes3 жыл бұрын

    5 minutes well spent. Great video. Concepts from functional programmers should be in every developer's toolbox! Thank you for making this! 🙏

  • @drkgumby
    @drkgumby3 жыл бұрын

    Excellent video. Suggestion 1: Turn off vs code intellisense so the popup does not cover your code. Suggestion 2: Put the terminal on the right Suggestion 3: run 'nodemon worksheet.js -q' to hide nodemon status and clean up the console

  • @my_j.a.r.v.i.s.
    @my_j.a.r.v.i.s.3 жыл бұрын

    Thanks for making these short videos. They're very helpful.

  • @aaronlinton-chambers
    @aaronlinton-chambers3 жыл бұрын

    I love the way your simplify difficult topics in a manageable way

  • @ianhancock3414
    @ianhancock34142 жыл бұрын

    Flawless explanations! thank you

  • @theoglossa
    @theoglossa3 жыл бұрын

    Great stuff! I'll always go back to this playlist!

  • @RhoTrepaan
    @RhoTrepaan3 жыл бұрын

    This was quicker than ‘looking it up’ thanks 👍

  • @davidjohansson2372
    @davidjohansson23722 жыл бұрын

    Great series on the JS array methods, thanks!

  • @GabrielMazzoleni
    @GabrielMazzoleni2 жыл бұрын

    The eye color example was really good, thanks

  • @dlongodesign7026
    @dlongodesign70262 жыл бұрын

    The best video I found with Reduce() examples. THANK YOU SO MUCH!!

  • @JamesQQuick

    @JamesQQuick

    2 жыл бұрын

    Yayy!

  • @MYount
    @MYount3 жыл бұрын

    Thank you for explaining this so clearly and concisely.

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Glad you enjoyed it!

  • @tripvida
    @tripvida Жыл бұрын

    Well explained thanks.

  • @jaydenmoon1165
    @jaydenmoon11652 жыл бұрын

    First time watching your vids - this was an easy sub for me - really love your vids and explanations - it has been helpful - thank you

  • @bradpeters9511
    @bradpeters95112 жыл бұрын

    I gave you a thumbs up. The video is mostly clear. I wish you would have explained why you started with an empty object. With that being said I have seen several examples of using the reduce method with objects and this is one of the more clear explanations even though I do not understand why you start with an empty object.

  • @haroldlittlejohn4307
    @haroldlittlejohn4307Ай бұрын

    Thank you so much sir💯

  • @olivierdeplanques708
    @olivierdeplanques7083 жыл бұрын

    Very interesting, good video, thanks a lot

  • @JimKernix
    @JimKernix2 жыл бұрын

    This and the map vieo were helpful - thanks! I forgot to sub to your channel when I saw your video on Brad Traversy's channel.

  • @chubbyBunny94
    @chubbyBunny942 жыл бұрын

    Back again for a refresher; by far the most extensive tutorial on this topic

  • @JamesQQuick

    @JamesQQuick

    2 жыл бұрын

    Yasssss!!!

  • @robinstahlwarelius1845
    @robinstahlwarelius1845 Жыл бұрын

    Great videos! Thx man :) PS color theme do you use?

  • @phickman7872
    @phickman78723 жыл бұрын

    Yet another awesome video!! Love the explanations because they are so easy to follow.

  • @mocococo2877
    @mocococo2877 Жыл бұрын

    Greetings from Bulgaria. Thank you for your time and efforts to put those wonderful tutorials. Please, tell me in the case of eye colors, how that object got miraculously arranged into those exact key value pairs, since nowhere you specified that ? Thank you.

  • @sateeshnaidu900
    @sateeshnaidu9003 жыл бұрын

    Hi James Q Quick , your tutorials are simply awesome, In reduce function example the output of totalMass producing incorrect result(0497784136) , we have to apply parseInt to curr.mass i.e characters.reduce((acc, cur) => acc + parseInt(cur.mass),0). so that we will get correct result(346). Thanks for your Great Tutorials.

  • @milburngomes7372

    @milburngomes7372

    3 жыл бұрын

    Helpful, thanks!

  • @hawkeye904

    @hawkeye904

    11 ай бұрын

    parseInt() or Number()

  • @amandoktorcanimkuzumdoktor5193

    @amandoktorcanimkuzumdoktor5193

    6 ай бұрын

    Thank you man, I was struggling with that number.

  • @DhanByCode
    @DhanByCode3 жыл бұрын

    My English is not very good but I really understand it with your explanation, I like your style in explaining and the font used is quite pleasing to the eye with an explanation and a font size that is very suitable and comfortable to see and hear, awesome .. I hope you explain more in detail like this and more tutorials about javascript on your channel cz this tutorial is great!

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    So glad to hear that :)

  • @doniaelfouly4142
    @doniaelfouly4142 Жыл бұрын

    Thanks

  • @IkraamDev
    @IkraamDev3 жыл бұрын

    I remember back in August I couldn't get my head around this.

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Is it making more sense now? :)

  • @IkraamDev

    @IkraamDev

    3 жыл бұрын

    @@JamesQQuick Yes, I fully understand the Array functions after going on Codewars!

  • @ayodejijoseph6864
    @ayodejijoseph68642 жыл бұрын

    I wonder the people giving thumbs down for this lovely easy to understand video 🤔, can we see something better from you lots giving thumbs down then.

  • @JamesQQuick

    @JamesQQuick

    2 жыл бұрын

    Lol thanks for the support!

  • @kirilvedmidskiy
    @kirilvedmidskiy2 жыл бұрын

    if you downloaded array from github, you should convert mass from string to number for it to work: +acc + +cur.mass

  • @user-js3nt7dk8v
    @user-js3nt7dk8v5 ай бұрын

    🤯🥳🥳🥳 eye color example ,and yes am a beginner

  • @NavilRodrigues
    @NavilRodrigues3 жыл бұрын

    Wow! Thanks a ton. Can you please make a video on how you've customized your VS code and zsh?

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    I’ve got a video covering vs code. Terminal comes from the command line power user course by Wes bos

  • @glitchedbyte747
    @glitchedbyte7473 жыл бұрын

    Thanks. I'd like to see more advanced stuff in js :D

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Any specific suggestions?

  • @majdeddinebentahar5434

    @majdeddinebentahar5434

    3 жыл бұрын

    @@JamesQQuick closures maybe??

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    @@majdeddinebentahar5434 Ooooh that's a tricky one. I'll think about that one! lol

  • @ridl27
    @ridl273 жыл бұрын

    ty

  • @snapdeus
    @snapdeus Жыл бұрын

    nice, the biggest "aha" moment for me was realizing you can set the initial value to be an empty object

  • @dand4485
    @dand44852 жыл бұрын

    Ditto.... Sorry to sound like a broken record. But another great video ;)

  • @prudhvichinnam1488
    @prudhvichinnam14883 жыл бұрын

    Please do classes constructor function functions,factoryfunctions

  • @rahmansheikh4781
    @rahmansheikh47813 жыл бұрын

    Can you please make video on generators function

  • @nested9301
    @nested9301 Жыл бұрын

    how can i find more challenges ? thank you!

  • @driftwood13
    @driftwood13 Жыл бұрын

    Can you show how to sort an array of strings case sensitive? e.g. Luke, leila, Darth, yoda

  • @shubhsagar6234
    @shubhsagar62343 жыл бұрын

    thank you so much but i have a doubt , instead of ""curr.mass'" can we write it using destructuring if yes then how?

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Sure. const {mass}= cur;

  • @henrikschmidt8178
    @henrikschmidt81783 жыл бұрын

    is there a reasone not to use syntax like: arr["index"] = (arr["index"]||0) +1; to handle initialization of unused indexes to skip the if else?

  • @ravitejadesai

    @ravitejadesai

    3 жыл бұрын

    You can. But not easily readable.

  • @richcaro3132
    @richcaro31322 жыл бұрын

    niced

  • @user-ix6jx1wt3e
    @user-ix6jx1wt3e11 ай бұрын

    do u have an explanation for react plz??

  • @ctx4241
    @ctx42412 жыл бұрын

    map and reduce are such bizarrely named functions...

  • @emediongidemeto
    @emediongidemeto Жыл бұрын

    What's the name of your font sir?

  • @TheNamesJT
    @TheNamesJT3 жыл бұрын

    I don't understand the eye color " if (acc[color]) " this if statement checks if color exists right? I don't understand how it decides to count the same color and don't understand the false statement either if color doesn't exist then you set color to true? this if statement is confusing.

  • @mitchell4217
    @mitchell42173 жыл бұрын

    Wondering if you can return values as arrays and don't return duplicates: { eye_color: ["brown","blue","green"] }

  • @daytonmux

    @daytonmux

    3 жыл бұрын

    Should be simple enough. Would be easiest/fastest to just use a set that stores colors as the accumulator, but you could do it with an array using similar logic to what he did in the video, just checking the color array in the accumulator and adding the color if it doesn't exist yet

  • @user-xz3ws9lz1o
    @user-xz3ws9lz1o Жыл бұрын

    need more class

  • @emediongidemeto
    @emediongidemeto Жыл бұрын

    What's the name of your theme sir?

  • @ripplesr5655
    @ripplesr56553 жыл бұрын

    Hey,i have put every bit of effort to figure out what am i doing wrong, but i am getting this number as total of mass .I have rechecked countless times, i have the exact same code but with different number.

  • @zenguitarankh

    @zenguitarankh

    Жыл бұрын

    Same....

  • @REET911
    @REET911 Жыл бұрын

    Can anyone clarify why acc[cur.eye_color] works but same with dot notation acc.cur.eye_color doesn't work??

  • @JamesQQuick

    @JamesQQuick

    Жыл бұрын

    acc[cur.eye_color] -> something like acc["brown"] so it's getting the value associated with the key of "brown" where as acc.cur.eye_color just becomes the color itself.

  • @kagishophahlamohlaka2306
    @kagishophahlamohlaka23063 жыл бұрын

    I LIKE YOU PJ'S!!!!! if they are pj's

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Haha not pjs but I appreciate it

  • @nathanboeger978
    @nathanboeger9782 жыл бұрын

    Dude, over 10k views but only 579 likes? That dog won't hunt.

  • @josesilva2614
    @josesilva26143 жыл бұрын

    I just have a problem, my values are concatenate. I try with Math but nothing =(

  • @uchichaobito607

    @uchichaobito607

    3 жыл бұрын

    Use parseInt() or Number() eg: const totalMass = characters.reduce( (acc,curr) => { return parseInt(acc)+ parseInt(curr.mass); },0);

  • @josesilva2614

    @josesilva2614

    3 жыл бұрын

    @@uchichaobito607 Thank you

  • @John-nr8vu
    @John-nr8vu3 жыл бұрын

    Fuck no dislikes yet 🙄😯 is it a sign to hope in humanity again?😁

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Hahahah maybe so!

  • @chubbyBunny94
    @chubbyBunny94 Жыл бұрын

    Me again, I forgot it all :D

  • @guythesavage2908
    @guythesavage29083 жыл бұрын

    I was the 69th like, nice

  • @JamesQQuick

    @JamesQQuick

    3 жыл бұрын

    Bahahaha

  • @TheLuksas
    @TheLuksas3 жыл бұрын

    to difficult for me.. :/

  • @zenguitarankh
    @zenguitarankh Жыл бұрын

    Not sure if maybe something in JS has changed since this video but for totalMass, I kept getting 0771364984 so I knew it was being concatenated as strings so I tried commenting out 'use strict' and also tried taking quotes off the numbers in the characters array but the only fix was wrapping cur.mass in Number() in the return. I'm sure parsint etc probably works too Just incase someone else has this problem and is spinning their wheels.

  • @kesraouimohamed9611

    @kesraouimohamed9611

    Жыл бұрын

    in the code the typof mass is string, you should use + before curr

  • @ombhosale8090
    @ombhosale80902 жыл бұрын

    The Array Worksheet - github.com/jamesqquick/javascript-array-functions-practice

  • @JamesQQuick

    @JamesQQuick

    2 жыл бұрын

    Thanks for grabbing that

  • @urbanebachelor
    @urbanebachelor10 ай бұрын

    Theres a great chance that things have changed in the 2 years since this video posted, but when I try to work along, I get a long string of numbers instead of the sum total: const totalMass = characters.reduce((acc, cur) => acc + cur.mass, 0); console.log(totalMass); 0771364984

  • @JamesQQuick

    @JamesQQuick

    10 ай бұрын

    I think that means that one of your inputs is actually a string. Are you sure cur.mass is a number and not a string?