Learn JavaScript Array Reduce In 10 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ก.ค. 2024
  • JavaScript Simplified Course: javascriptsimplified.com
    By far the most difficult JavaScript array method to learn is the reduce method. It combines together many concepts from other array methods, but also acts in a completely different way. In this video I will be going in depth over everything you need to know about this method so you can start using it in your next project.
    📚 Materials/References:
    JavaScript Simplified Course: javascriptsimplified.com
    Reduce Array Method Article: blog.webdevsimplified.com/202...
    🌎 Find Me Here:
    My Blog: blog.webdevsimplified.com
    My Courses: courses.webdevsimplified.com
    Patreon: / webdevsimplified
    Twitter: / devsimplified
    Discord: / discord
    GitHub: github.com/WebDevSimplified
    CodePen: codepen.io/WebDevSimplified
    ⏱️ Timestamps:
    00:00 - Introduction
    00:45 - Basics of reduce
    04:50 - Second reduce example
    07:17 - Advanced reduce features
    #ReduceArray #WDS #JavaScript

ความคิดเห็น • 384

  • @rosseaton990
    @rosseaton990 ปีที่แล้ว +65

    This was the most simple and straight forward example of reduce I've seen. Thank you!

  • @STUPIDYOUTUBE_HIDINGMSGS
    @STUPIDYOUTUBE_HIDINGMSGS ปีที่แล้ว +8

    What I love about Kyle's teaching style and videos is he first writes the code in another familiar way then converts it into the topic he's about to discuss. Whenever I want to learn something quickly and clearly without fuzz, like Recursion, his videos are my go-to learning material! He breaks it down step-by-step full of detailed explanations. Amazing!

  • @Vibestr
    @Vibestr 2 ปีที่แล้ว +12

    Another good reason to set the second parameter on the reduce is if you are totaling price on an object (like in your example) and you didn't set this parameter to 0, then total would represent the object (the first item in the array) and your code would error out. Thank you for this video Kyle.

  • @ademlayes9116
    @ademlayes9116 ปีที่แล้ว

    I've watched this video twice, once before ~5 months and now after forgetting what "reduce" does... and im so thankful every time! Thank you!

  • @kelseymovies
    @kelseymovies 2 ปีที่แล้ว +6

    Thank you for this! I just took a whole course about it and got even more confused. Your video broke it down to a point where it clicks.

  • @MrGodman1981
    @MrGodman1981 3 ปีที่แล้ว +33

    Last week I was struggling with aggregate of object attributes in an array of objects due to the missing intiial value of 0 and I learned it the hard way. Also I had the groupby use case well. Thanks for simplying groupBy.

  • @NaroTaro
    @NaroTaro ปีที่แล้ว

    I've been stuck on understanding reduce for 2 days now. This video cleared everything up. Thanks!

  • @pugazhonline
    @pugazhonline 3 ปีที่แล้ว +1

    I have used reduce() many times. but clearly understand now. Thanks Kyle.

  • @elie8181
    @elie8181 2 ปีที่แล้ว +3

    very good explanation of the reduce method, it is clear and simple.
    I'm a french developper in training and I understood everything, thank you and good continuation for your TH-cam channel

  • @kp2947
    @kp2947 2 ปีที่แล้ว

    Man, you helped me solve a problem that's been kicking my butt for a LONG time. THANK YOU!

  • @alirezashahmoradi7648
    @alirezashahmoradi7648 2 ปีที่แล้ว +4

    I cant believe how you made it that simple. Thank you!!

  • @MrLiquitorleaveit
    @MrLiquitorleaveit 2 ปีที่แล้ว +2

    Incredibly well explained! Thanks so much! 🙏

  • @johnjoyce
    @johnjoyce 3 ปีที่แล้ว

    best explanation of reduce in javascript that i have ever seen. be cautious saying amunnuh when you mean “I’m going to”. that can be difficult for non native listeners

  • @nabilelidrissi8541
    @nabilelidrissi8541 ปีที่แล้ว

    I've watched a fair few videos on reduce, but you have explained this wayyyy better.

  • @_boza
    @_boza 2 ปีที่แล้ว +1

    I think you said the best definition of reduce ever. "Reduce, all it does. It takes array of values whatever that is and reduces it down to one single value"

  • @scratchercatcher6760
    @scratchercatcher6760 3 ปีที่แล้ว

    Thank you VERY MUCH! All CLEAR NOW FOR ME and you made video without any extra "bloggers show off". My like to you and subscription.

  • @donotlook6048
    @donotlook6048 2 ปีที่แล้ว

    This guy really uploaded this video 2 weeks ago and today I needed to use reduce and didn't know it worked, now i do thanks man. Whenever I need to understand something new I just type the concept + webdevsimplified and watch ur video lol

  • @SiddhantaPaul80
    @SiddhantaPaul80 ปีที่แล้ว

    That's an impressive straight forward explanation!
    Really liked the analogy with forEach Loop.

  • @TheDanthelion
    @TheDanthelion ปีที่แล้ว

    While I understood how reduce worked, I didn't quite get why I kept hearing how powerful it was - your object example made it very clear in a short amount of time!

  • @rajat4002
    @rajat4002 3 ปีที่แล้ว

    I was looking for resources to learn about `reduce` method. Your video came in as a rescue Kyle.. 😍
    You are a saviour!!

  • @beepybeepy4903
    @beepybeepy4903 ปีที่แล้ว

    Thank you so much! This is so much clearer than other tutorails using acc, cur….

  • @mayowasunusi9161
    @mayowasunusi9161 6 หลายเดือนก่อน

    Thank you Kyle, I saw .reduce in a TS tutorial, i had no idea how to do it, your video was straightforward

  • @mr__info___
    @mr__info___ ปีที่แล้ว

    You truly simplify the web. thank you!

  • @Sun-gk8fc
    @Sun-gk8fc ปีที่แล้ว

    7 the video on reduce in the last 40 mins and this is as simple as you can get...superb. A like and a subscribe from me.

  • @shvideo1
    @shvideo1 ปีที่แล้ว

    Perfect content coverage on reduce. You are amazing! Thank you for sharing.

  • @simple8810
    @simple8810 3 ปีที่แล้ว

    reduce is like different and complex from other array methods,but you made clear that for us thanks

  • @snansahmarov1524
    @snansahmarov1524 3 ปีที่แล้ว +2

    Thank you Kyle. You are great !

  • @tanvirhasanmonir1627
    @tanvirhasanmonir1627 ปีที่แล้ว

    Thanks Kyle for your simplified explanation with useful example

  • @pcchamikara
    @pcchamikara ปีที่แล้ว

    you REDUCED my effort of understanding the "reduce" function. 👌

  • @filipcza2
    @filipcza2 ปีที่แล้ว

    Thanks man! Been hating the tasks which force you to use reduce so far.. feels like you randomly try until it somehow works. I really don't get why this feels so awkward to use or understand but your examples were extremely clear and helpful. Perhaps now I can stop dreading the reduce method. 😅

  • @VenkateshMogili
    @VenkateshMogili 3 ปีที่แล้ว

    Thank you kyle, got more clarity on Reduce method now❤😊😊👍

  • @YannMetalhead
    @YannMetalhead 2 ปีที่แล้ว +1

    Simple and direct, great explanation.

  • @EdisonSeas
    @EdisonSeas 11 หลายเดือนก่อน

    Very well explained, crystal clear. Thanks for this content!

  • @encapsule2220
    @encapsule2220 ปีที่แล้ว

    best explanation. my scalp is starting to regrow hair follicles thanks to u

  • @cfhall54
    @cfhall54 2 ปีที่แล้ว

    Much appreciated! This can definitely be a time saver

  • @MiSt3300
    @MiSt3300 2 ปีที่แล้ว

    This is a perfect explanation, thank you!

  • @Kae201
    @Kae201 2 ปีที่แล้ว

    This video was really helpful and clear. Thank you!

  • @JamesJon1187
    @JamesJon1187 ปีที่แล้ว +1

    4:12

  • @galihhad
    @galihhad 9 หลายเดือนก่อน

    Thank you, I understand it much better now!

  • @themanshaper
    @themanshaper 2 ปีที่แล้ว

    Dude your explanations are so good. Thank you!

  • @vinicius2336SP
    @vinicius2336SP 2 ปีที่แล้ว +1

    Dude... you're amazing! Thanks a lot! You're so much better than my teacher LOL
    Thanks for your content! I'll be buying your course soon. :)
    Have a nice day!

  • @darklord8684
    @darklord8684 ปีที่แล้ว +1

    after your explanation this is my fav method

  • @elkhanhamet2561
    @elkhanhamet2561 ปีที่แล้ว

    Amazing explanation. Thank you Kyle!!!🙂

  • @InsertYourself1
    @InsertYourself1 ปีที่แล้ว +2

    10 minutes of this is so much better than 1,000 hours of understanding the docs

  • @bartoszsowa5140
    @bartoszsowa5140 2 ปีที่แล้ว

    you made it clear, thank you

  • @dasten123
    @dasten123 3 ปีที่แล้ว +18

    I like the reduce function. But many people use it on occasions where a simple `forEach` loop would be more appropriate, and that gives the `reduce` a bad reputation, because it seems to make things unnecessarily complicated. I think you should always be aware of that whenever you are about to use it.

  • @Ranjithkumar-ll5rb
    @Ranjithkumar-ll5rb ปีที่แล้ว

    you are my life saver! Thank you🙏

  • @2pacgamer
    @2pacgamer 3 หลายเดือนก่อน

    very clear, thx for this one !!

  • @iooosef6006
    @iooosef6006 3 ปีที่แล้ว +18

    I'm looking forward for more videos about array, string, and object methods.
    Your explanations are so great.

  • @tijanisylla1348
    @tijanisylla1348 2 ปีที่แล้ว

    Im always learning from Kyle ! This is an amazing !!!!

  • @Scrappycoco
    @Scrappycoco 3 ปีที่แล้ว

    Thank you for your videos!

  • @travel2react567
    @travel2react567 2 ปีที่แล้ว

    Thanks a lot for such a detailed video.

  • @andzisimabaso5622
    @andzisimabaso5622 2 ปีที่แล้ว

    This is just awesome! Finally, I get it.

  • @tomgu1809
    @tomgu1809 2 ปีที่แล้ว

    reduce doesn't only apply for total, total from your addition statement. If you change + to -. it will deduct from initial value by each item .

  • @odilanmaevidence9545
    @odilanmaevidence9545 ปีที่แล้ว

    All i gotta say is Thank you mate, you're awesome!

  • @stylesg7818
    @stylesg7818 2 ปีที่แล้ว

    Thank you so much! It's make so much sense now.

  • @hayfachouchene1285
    @hayfachouchene1285 2 ปีที่แล้ว

    amazing explanation ! good job

  • @musaamuhsen
    @musaamuhsen 2 ปีที่แล้ว

    Dude this just saved me. Thanks!

  • @xiampiii
    @xiampiii ปีที่แล้ว

    Thank you for a great and easy to understand explanation

  • @fatimazboujrar
    @fatimazboujrar 7 หลายเดือนก่อน

    thank you so much , you've covered everything 🤩

  • @pechupechaairukkattum6986
    @pechupechaairukkattum6986 ปีที่แล้ว

    simply awesome. thanks a lot

  • @jssecrets
    @jssecrets 2 ปีที่แล้ว

    Thank you Kyle!

  • @dr__ey
    @dr__ey ปีที่แล้ว

    thanks so much for this explanation!!! it really helped

  • @codingwithkenny6492
    @codingwithkenny6492 3 ปีที่แล้ว +6

    You are awesome, Kyle! Your videos have helped me learn so much about Javascript👍

  • @jeremey__
    @jeremey__ ปีที่แล้ว

    thanks, good explanation!

  • @The1stKing
    @The1stKing 3 ปีที่แล้ว +1

    Haha, just what i needed. 😆 I literally just youtube-ed how to use reduce function.

  • @chandrachurmukherjeejucse5816
    @chandrachurmukherjeejucse5816 ปีที่แล้ว

    As always a great lecture. Thanks a lot

  • @namlulu7230
    @namlulu7230 3 ปีที่แล้ว

    고마워요! Thank you so much!

  • @vivekmodi3165
    @vivekmodi3165 10 หลายเดือนก่อน

    The concept of reduce method is very well explained because it was difficult to understand the concept of this in the documentation.
    Thanks.

  • @ramonmaximiliano3557
    @ramonmaximiliano3557 2 ปีที่แล้ว

    Excellent video!

  • @Unknown-so7qv
    @Unknown-so7qv ปีที่แล้ว

    Nice video bro, i finally have understood how to filter objects by a key with reduce thx man .

  • @ngyang5113
    @ngyang5113 3 ปีที่แล้ว

    u are amazing, all ur video is concise and easy to understand

  • @loumeroj
    @loumeroj 2 ปีที่แล้ว

    I'm at least watching the ads cause this guy explained reduce briefly and concisely :) and nice hair btw

  • @princecharles-amachree7329
    @princecharles-amachree7329 3 ปีที่แล้ว +1

    Was legit looking for this today and my man ends up making a video on it. Coincidence? I think not

  • @avi12
    @avi12 3 ปีที่แล้ว +82

    The reduce method is a double-edged sword, as explained by a Google Developers video: th-cam.com/video/qaGjS7-qWzg/w-d-xo.html
    On the one hand, the reduce method is handy
    On the other hand, it might reduce the readability (see the pun?)

    • @parahumanoid
      @parahumanoid 2 ปีที่แล้ว +3

      I wonder if we should name the object "vague" and the parameter -- "readability":
      const x = vague.reduce((overall, readability)=>{ ....}, 0)

  • @mattplaygamez
    @mattplaygamez 3 ปีที่แล้ว +2

    You deserve more subscribers

  • @nirmesh44
    @nirmesh44 3 ปีที่แล้ว

    exactly what i was looking for

  • @yahelsasson
    @yahelsasson 11 หลายเดือนก่อน

    Awesome 🎉 thank you

  • @johnadriandodge
    @johnadriandodge 10 หลายเดือนก่อน

    Shalom Mr. K, outstanding explanation!
    Thank you
    Shalom

  • @freudinsky
    @freudinsky 11 หลายเดือนก่อน

    LOL - after googling for HOURS(!!!) I finally got it - after just 3min into this video. Damn good explanation! Thank you sooo fkn much!!!

  • @meysamrezania54
    @meysamrezania54 2 ปีที่แล้ว

    That was pretty cool explanation

  • @soniablanche5672
    @soniablanche5672 3 ปีที่แล้ว +1

    The reason why you receive the array as 4th parameter is because the callback function might be inside another file or might or be outside the scope of the array, so you can't reference it in any way. AFAIK all array methods have a callback function that pass the array as an argument.

    • @maelstrom57
      @maelstrom57 3 ปีที่แล้ว

      that's exactly right

  • @re.liable
    @re.liable 2 ปีที่แล้ว

    I feel lucky that I was able to intuitively understand reduce for the most part. Except that second parameter. That tripped me up hard quite a bit.

  • @JuanPablodelaTorre
    @JuanPablodelaTorre 3 ปีที่แล้ว +14

    I love the _reduce_ method. I use it for everything. I would brush my teeth with it if I could. If you ever _map-filter-map-find_ anything, do everyone a solid and just use _reduce._

  • @j8ge
    @j8ge 2 ปีที่แล้ว

    clear and helpful

  • @lamargtv2572
    @lamargtv2572 3 ปีที่แล้ว

    Diamond explanation, thanks

  • @eugene4296
    @eugene4296 4 หลายเดือนก่อน

    This is amazing, and really helpful. I have immediately subscribed. And I think I love you sir. :)

  • @johnwellgroup
    @johnwellgroup 8 หลายเดือนก่อน

    Thank you very muh for really breaking this topi. you are the best

  • @nazeefpeerzade6378
    @nazeefpeerzade6378 3 ปีที่แล้ว

    thank u soo much kyle

  • @yusker1994
    @yusker1994 3 ปีที่แล้ว

    Thank you!

  • @kunalmaloo8806
    @kunalmaloo8806 3 หลายเดือนก่อน

    best explaination i used for loop each time but now onwards i am shifting to reduce

  • @pawandabi6367
    @pawandabi6367 3 ปีที่แล้ว

    Good explanation
    Keep posting 💥

  • @UmarAlFarooq
    @UmarAlFarooq 3 ปีที่แล้ว

    Awesome video!

  • @michelaveline
    @michelaveline 3 ปีที่แล้ว

    YOU ARE THE BEST!!!!

  • @mayankchavda6839
    @mayankchavda6839 2 ปีที่แล้ว

    thank you so much your this vdo helps me a lot thank you so much

  • @nickchauhan
    @nickchauhan 3 ปีที่แล้ว

    Thanks 🙏🏽

  • @learnsmart1812
    @learnsmart1812 3 ปีที่แล้ว

    Thanks Kyle. Cool one

  • @Raubritterr222
    @Raubritterr222 3 ปีที่แล้ว +2

    Kyle, I love your videos! You are a great teacher and a superb developer!

  • @wastingtime1111
    @wastingtime1111 2 ปีที่แล้ว

    finally! I kind of uderstand it now!

  • @sfox-j
    @sfox-j 3 ปีที่แล้ว +104

    I love how this guy doesn't say bad words. (you can still say brainfuck)

    • @pictzone
      @pictzone 3 ปีที่แล้ว +1

      Hahaha, noticed that too

    • @jamesthelivingplanet
      @jamesthelivingplanet 3 ปีที่แล้ว +3

      Is that common in tech videos?

    • @sfox-j
      @sfox-j 3 ปีที่แล้ว +1

      @@jamesthelivingplanet yes but there are lots of channels where people do say bad words.

    • @douglascounts4634
      @douglascounts4634 3 ปีที่แล้ว +4

      Actually he does where the context make sense. Like in this video link, but he does bleep them. th-cam.com/video/xDsS-zUGDfQ/w-d-xo.html

    • @shivamsahil3660
      @shivamsahil3660 3 ปีที่แล้ว +2

      @@douglascounts4634 🤣 lol