Hello, I'm getting back into web development after a 20+ year absence, and it's pretty scary because everything is so different! Your channel has been a big help. Thank you so much for your clear explanations and tight presentation. Very valuable!
How is it that I read so many array methods articles and couldn't wrap my head around them, but when I watched this video everything made perfect sense? You're amazing, thank you for making these tutorials!
My word thank you for showing this with multiple-property objects. Everyone does it with zero-property objects. You sir earned a sub 26 seconds into this video.
This video is one of the reasons that I preach people learning sth in this era wouldn't require taking particular courses and having high-paid pedagogues... THANKS SIR♥️♥️♥️♥️♥️♥️
Steven Griffith is a very good RUclipsr too, he has videos about almost anything you could think of in JavaScript, web dev simplified does help a lot, but sadly there few stuff he hasn't covered about JavaScript in his videos, and sometimes he simplifies things a lot, which is good if you are struggling to understand something, but some concepts is good to know a little deeper. I recommend watching web dev simplified as an introduction to a topic, and then searching the concept deeper by watching some other videos, like the videos Steven Griffith makes, except if the concept is already simple enough and doesn't have much else to learn, like the array methods we were taught in this video, there do are some stuff he didn't talk about, about reduce method for example I believe it also can take a third parameter, but this video pretty much covered everything about these array methods.
Very useful summary! But keep in mind that with the forEach method you don't have the option to skip an element or to break the loop, in those cases you still need the 'for' loop or the 'for...of' loop so you can use the 'continue' or 'break' keywords.
reduce() is seriously the best array method to know. It's useful whenever you want to generate a single value from the array's contents. Min, max, avg, std dev, whatever. The best part about it (and actually, all the other methods in this video) is that it turns the code from procedural to declarative. So instead of seeing a for loop, reading every line trying to understand what it's trying to do, a developer can simply read the first line, and whatever the code is trying to do is right there. The specific implementation is seldom important anyway. It makes the code so much cleaner and so much easier to maintain.
I watched a few videos of yours and was quickly convinced. I’m subscribed to your channel, your news letter, and checked out your “appearance” on the How to Code Well podcast. Really like your quick and to-the-point style of teaching, and you move quickly so I don’t get bored at all. I can always pause if I need to, but so many channels move too slowly. Thanks for all the help!
Thank you so much! I spend a lot of time trying to make sure my pace of explanation is a good mix of quick without being too fast. I generally live by the principle of explaining something really well once and then moving on since it is a video and not a live lecture you can always pause or rewind like you mentioned.
I watch your videos whenever I want to take a break from regular work and learn something new and interesting. All of these methods made perfect sense when you described them. I'm eager to play with a bunch of these now. Thank you so much for the clear and concise explanations! :)
This is (by far) the best explaination I've come across. I'm thinking that what probably makes array methods somewhat confusing in other explainations is that they usually introduce the concept of callbacks. It's much better to learn these ideas seperately. Before mentioning them as the array 'callback' methods.
I see a lot of possibilities with this methods, filtering menu or items in an e commerce store, adding up the total of a shopping cart, thanks for this, it is extremely useful
Thanks man, i'm glad that every time im entering to RUclips i see one new video of yours, made myself an habit to watch at least one a day to refresh my mind in some subjects that i might forgetting and sometime also get to know for the first time.
Another tip. You can also use item.filter(i=> i.name === "xxx") or item.find(i=> i.price > 1000) on most of the array commands instead of creating a new function. I find this approach less confusing and more clean.
We can also write the above with arrow function like this: const total = items.reduce((currentTotal, item) => item.price + currentTotal , 0) 0: is no the start index but the value for currentTotal very first time.
@@WebDevSimplified Was so good I watched it again :) Re .reduce() - that final zero - I was trying to think of a use case where you would have any other number than zero, but I couldn't! Any ideas?
@@najmantube the reduce function is used a lot to doing things other than just complex summing. For example it can be used to group an array of objects by a certain key which would mean the 0 would need to be an empty object {} instead. Also you may already have a subtotal that you then need to add in taxes and discounts so you would use the existing subtotal instead of a 0.
Correct. I generally keep those types of statements on one line, but in a video with my font so large I usually break things onto multiple lines to make it easier to read.
Such a clear and concise explanation of the subject matter. Keep up this good work! This is my first go-to channel whenever I need a lesson or need to gain understanding on a particular subject, no doubt.
@@mrinmoyghosh1749 when using reduce you have access to every item and also the reslult of the previous operation. So you could do map, filter, find, some, every. The only drawback is the possible performance difference and lesser code clarity.
Thanks. Coming back to JavaScript after using a lot of Ruby made me really happy that these methods were added to JavaScript, because they made Ruby so nice to work with. I remember the days when .indexOf was about the only way to do anything with array searching and it sucked, because it wouldn't even return null. Checking for -1 everywhere was no fun.
Great video. Refreshing. However sometimes we run into some issues with these functions such as: 1. skipping elements: if you want to loop through some elements (applying a function) while skipping some elements. map and reduce will refuse to skip the elements returning an array with the same size 2. combining the array methods: this can be annoying. e.g. you want to add, filter and apply a function to an array cant be done with one of these methods 3. using globals or applying multiple / external functions within map or reduce. (It would be nice to see a video on this)
You can skip elements by using if in your reduce function to skip past elements that do not meet a condition or by first filtering the array. You can also chain these methods very easily by doing .map(...).reduce(...) etc. Lasty I am not sure what you mean by using globalstar but inside these functions you can do whatever you want. It is just a function.
Honestly. If you don't have some sort of code academy course where you are making money from online courses you are making a huge mistake. I've got dyspraxia which makes being a coder really challenging. Not because code is hard but because practically every other dev out there likes to teach by assuming a ton of pre-existing knowledge, which my brain can't process quickly enough. Case in point, thanks to you, I now properly understand how .reduce() works. I've used it in the past but I've always had to use examples that match my use-case because I just couldn't get my head around it and too many tutorials have explained it in a way that just makes my brain seize up. So thank you for that. If you DO have an online course, please post the link as I'd probably buy it.
That is a very good tutorial. I found particularly interesting and well done the way the reduce method was explained, it was clearer than many other videos on the topic.
Filter - 0:22
Map - 2:00
Find - 2:55
Foreach - 3:43
Some - 4:32
Every - 5:53
Reduce - 6:28
Includes - 8:52
seenuvasan V before clicking this video, I knew this would be top comment +
Quicker than a 10 minutes video thx
What about sort?
Pop
Push
Shift
Unshift
This is the most simple, short, good quality and well explained tutorial I have ever seen.
Thank you so much!
Wow, the best 10 minutes used to learn how to deal with arrays, Thanks a lot :)
You're welcome!
I'm new to javascript and the guys at work were paying me out for using for loops. This was very helpful.
Check out lodash for similar tricks, although than one is a library
Please view my short funny vid on arrays ruclips.net/video/LEKx0L4ukhs/видео.html
Yeah, not a single second wasted !
Crisp video and right to the point!
Thank you. I'm glad you enjoyed it.
@@WebDevSimplified By the way he's a great Backend Engineer :D
@@KSmith-md7po ah, yes, the two greats of the RUclips tech world saying hi. :)
@@WebDevSimplified ya u waste zero time, great reference material
@@yashlearnscode5502 1M101¹
For C# developers, who know LINQ:
filter == Where()
map == Select()
find == FirstOrDefault()
some == Any()
every == All()
reduce == Aggregate()
includes == Contains()
you're welcome.
it is includes not include
Name methods in js are much more natural
The C# names are much better!
I swear this guy explains things better than anyone else on the planet
Hello, I'm getting back into web development after a 20+ year absence, and it's pretty scary because everything is so different! Your channel has been a big help. Thank you so much for your clear explanations and tight presentation. Very valuable!
20+years ago.. what we had was more like web design.. but i feel you bro.. welcome back🤗
How is it that I read so many array methods articles and couldn't wrap my head around them, but when I watched this video everything made perfect sense? You're amazing, thank you for making these tutorials!
I wish more people made tutorials like you.
Clean , Short , Simple.
subscribed , hoping for great content in the future.
Thank you so much! I'm really glad you resonate so well with my teaching style.
All these dudes are getting a pay day when I land my first job soon
additionally no 5 minutes "please subscribe" introduction
Agreed
@@ThatGuyDownInThe Did you get the job ? where's the pay day waiting for it mate
No fluff, straight to the point! I really thank you for this video!
My word thank you for showing this with multiple-property objects.
Everyone does it with zero-property objects.
You sir earned a sub 26 seconds into this video.
That may be a RUclips record :P
I'm really glad you enjoyed the video.
This video will deliver the expectations you expect from the title. Simple and straightforward
This video is one of the reasons that I preach people learning sth in this era wouldn't require taking particular courses and having high-paid pedagogues... THANKS SIR♥️♥️♥️♥️♥️♥️
The two great channels where I learned everything, web dev simplified & Traversy media
.
🤘
Brad is a beast
Steven Griffith is a very good RUclipsr too, he has videos about almost anything you could think of in JavaScript, web dev simplified does help a lot, but sadly there few stuff he hasn't covered about JavaScript in his videos, and sometimes he simplifies things a lot, which is good if you are struggling to understand something, but some concepts is good to know a little deeper. I recommend watching web dev simplified as an introduction to a topic, and then searching the concept deeper by watching some other videos, like the videos Steven Griffith makes, except if the concept is already simple enough and doesn't have much else to learn, like the array methods we were taught in this video, there do are some stuff he didn't talk about, about reduce method for example I believe it also can take a third parameter, but this video pretty much covered everything about these array methods.
Can't believe I just learned about all these methods under a 10 min tutorial. Man love & respect for you. 🙇♂🙇♂
You are the best!
Concise, no bs, no nonsense.
Please don't change.
And please don't add any silly bs in parenthesis like (as this, or as that...)
Very useful summary!
But keep in mind that with the forEach method you don't have the option to skip an element or to break the loop, in those cases you still need the 'for' loop or the 'for...of' loop so you can use the 'continue' or 'break' keywords.
Couldn't you just use an early return
reduce() is seriously the best array method to know. It's useful whenever you want to generate a single value from the array's contents. Min, max, avg, std dev, whatever.
The best part about it (and actually, all the other methods in this video) is that it turns the code from procedural to declarative. So instead of seeing a for loop, reading every line trying to understand what it's trying to do, a developer can simply read the first line, and whatever the code is trying to do is right there. The specific implementation is seldom important anyway. It makes the code so much cleaner and so much easier to maintain.
Funny how much more helpfully and clear this is about these methods over some tutorials that spend 30 to 45 on each method
The reduce method has been confusing me for a little bit as a is newbie. The way you explained it made so much sense! Thank you so much.
I was just planning on creating a video about array methods! Nice one! :)
Nice! Hopefully it goes well.
ruclips.net/video/NH_lCxa1hv8/видео.html
This tutorial has more knowledge than many 1hour+ tutorial videos. Well done!
It's probably incalculable how much time and mind power this video has saved me. I am so glad I came across it. Hero! Thank you :)
I'm so glad you went in-depth with explaining reduce. I just started learning software dev 2 weeks ago and couldn't wrap my head around it.
This is a really worth tutorial to watch for every newbie programmer. Finally started to understand the array methods. Thanks from Kyrgyzstan!
When learning Javascript you start to learn 10 percent then.... 5 years later you finish with the last 20 percent of knowledge.. Good stuff mate
Finally someone explained reduced() simply
This simplified so much of the confusion I had around these methods. Subbed!
Can't say how much I appreciate these videos. Straight-forward, simple, and most importantly, useful!
This video is only 10 minutes, but explained commonly used array methods so well! Ty for the great tutorial💯
Dang, if I had had the smarts of typing my problem into RUclips a couple hours earlier... you saved me dude! (just starting this JS journey)
I watched a few videos of yours and was quickly convinced. I’m subscribed to your channel, your news letter, and checked out your “appearance” on the How to Code Well podcast.
Really like your quick and to-the-point style of teaching, and you move quickly so I don’t get bored at all. I can always pause if I need to, but so many channels move too slowly.
Thanks for all the help!
Thank you so much! I spend a lot of time trying to make sure my pace of explanation is a good mix of quick without being too fast. I generally live by the principle of explaining something really well once and then moving on since it is a video and not a live lecture you can always pause or rewind like you mentioned.
U can use reduce to consume an array of promises step by step
await [1, 2, 3, 4].reduce(async (prevPromise, nextValue) => {
await prevPromise;
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('nextValue', nextValue)
resolve()
}, 200)
})
}, Promise.resolve())
Thx from Ukraine. You explain clearly, and even I understood
I watch your videos whenever I want to take a break from regular work and learn something new and interesting. All of these methods made perfect sense when you described them. I'm eager to play with a bunch of these now.
Thank you so much for the clear and concise explanations! :)
Superb explanations. Wish your channel to grow, you deserve it.
Thank you! I already feel like I have grown so much.
awesome tutorials. it' s so nice to watch a tutorial where they don't have a bunch of small talk in all areas of the video. just no nonsense.
i love that most of his videos are fast-forwarded it makes it a challenge to keep up sometimes XD
This is (by far) the best explaination I've come across. I'm thinking that what probably makes array methods somewhat confusing in other explainations is that they usually introduce the concept of callbacks. It's much better to learn these ideas seperately. Before mentioning them as the array 'callback' methods.
No bullshit, just pure explanation. Awesome!
Best video ever. Simple, easy to understand. Effective presentation. Looking forward to more videos.
Been binge watching your videos.
Thanks a ton..
Reduce is definitely my favourite Array method.
I see a lot of possibilities with this methods, filtering menu or items in an e commerce store, adding up the total of a shopping cart, thanks for this, it is extremely useful
I don't why this video had 200 dislikes. This type of videos are rare in RUclips . I like this video so much 👍👍👍👍👍👍👍👍
Thanks man, i'm glad that every time im entering to RUclips i see one new video of yours, made myself an habit to watch at least one a day to refresh my mind in some subjects that i might forgetting and sometime also get to know for the first time.
Man this was just amazing. You explain it with such simplicity without complicating and confusing the viewer. Thanks man
Efficient way of learning! Short, clear and easy to understand. Much appreciated. Keep up the good work.
This video explained for excel folks:
Arrays = Excel table
Filter = Filtering a table in excel or using an if function such as =if(A1
the most informative easy video on youtube about arrays
I've been working with firebase using for each without understanding it completely. Thank you for your insight and contribution!
Another tip.
You can also use
item.filter(i=> i.name === "xxx") or
item.find(i=> i.price > 1000)
on most of the array commands instead of creating a new function.
I find this approach less confusing and more clean.
This still creates a function it is just an arrow function instead of a normal function.
This man is doing such a great job , the way he explain things are great. Thank you for you contribution👏.
This is wholesome! Clean, Clear and Concise! Props
Seriously thank you. This helped me past a huge block I had developed. Such a simple solution. Thank you!
Finally understood how reduce actually works. Thanks man!
You're welcome!
Every video you make is gold. Never unsubscribing
You helped me a lot, i was strungling with this array methods and i can't thank you enough
We can also write the above with arrow function like this:
const total = items.reduce((currentTotal, item) => item.price + currentTotal , 0)
0: is no the start index but the value for currentTotal very first time.
Excellent !!! Each of your videos is answering many of the questions that I have in such a short time !!!! Thx and keep it up !!!
Thank you. I am glad you enjoy my videos. Hopefully my future videos are just as helpful.
Hi from Belarus, and thank you very much for the video! It was important and helpful for me to freshen up all array methods in my mind.
I've just found your channel and you're a great teacher! Thank you for sharing your knowledge. Thanks to you, now things started to get clearer! :)
Simple, but yet so accurate, and easy to understand!!👌
Clearest explanation I've come across - thanks!
You're welcome!
@@WebDevSimplified Was so good I watched it again :) Re .reduce() - that final zero - I was trying to think of a use case where you would have any other number than zero, but I couldn't! Any ideas?
@@najmantube the reduce function is used a lot to doing things other than just complex summing. For example it can be used to group an array of objects by a certain key which would mean the 0 would need to be an empty object {} instead. Also you may already have a subtotal that you then need to add in taxes and discounts so you would use the existing subtotal instead of a 0.
OK great thanks@@WebDevSimplified
Simply the best tutorial on array methods
Bro this is too easy, thank you for making this tutorial I learnt soooo much in such little time)) 🎉
thx bro, BTW in arrow function u don't have to write return and open bracket if u have one return.
example:
let i = (el) => el + 10;
Correct. I generally keep those types of statements on one line, but in a video with my font so large I usually break things onto multiple lines to make it easier to read.
It is a best practice
It's best practice to bracket them and put a return statement in there, makes it much easier to read.
Good, crisp, precise, and very understandable. Thank you so much. It was just what I needed.
thank you Kyle for helping us review array operation
Such a clear and concise explanation of the subject matter. Keep up this good work! This is my first go-to channel whenever I need a lesson or need to gain understanding on a particular subject, no doubt.
Reduce is really one of the most powerful array method, it could actually replace all other methods 😁
How? Plz explain it
@@mrinmoyghosh1749 when using reduce you have access to every item and also the reslult of the previous operation. So you could do map, filter, find, some, every. The only drawback is the possible performance difference and lesser code clarity.
Thought I was already subscribed...Glad I realized I wasnt and did the right thing. You are an absolutely excellent teacher
const items = [
{ name: 'Bike', price: 100 },
{ name: 'TV', price: 200 },
{ name: 'Album', price: 10 },
{ name: 'Book', price: 5 },
{ name: 'Phone', price: 500 },
{ name: 'Computer', price: 1000 },
{ name: 'Keyboard', price: 25 }
];
Thank you so much, buddy. I was struggling with this until I stumbled onto your video. Thanks a lot.
I'm glad I could help!
Your channel is one of my main go-tos for programming knowledge. Keep up the good work, my friend.
Thanks for explaining the reduce method in such an easy to understand way!
Nice, simple, clear and short to the point. Thanks for this.
DUDE!!!!! you cleared up soooo much for me, thank you man
I'm glad I could help
Easily one of the best channels for js, thank you so much , subscribed!
A thousand thanks for the poignancy of your explanations. I didn't know `reduce` took a second initial value parameter before 🙏🏿
Omg man! The fiilter i didnt know about! This solved a hell lot of issues! Thanks!!
I'm glad I could help! The array methods are awesome.
This video has made my day ! I learnt so much that I really wanted to have the exact explanation ! Thanks buddy.
Awesome...filter, map,find,forEach, every,some,reduce,includes.
we want and need more videos like this dude
These are so useful, great explanation :)
Thanks. Coming back to JavaScript after using a lot of Ruby made me really happy that these methods were added to JavaScript, because they made Ruby so nice to work with.
I remember the days when .indexOf was about the only way to do anything with array searching and it sucked, because it wouldn't even return null. Checking for -1 everywhere was no fun.
I really appreciate this tutorial! You were clear and consise in explaining these array methods.
You do explain complex stuff on a very dynamic way. Thanks.
You are very welcome! I'm glad you liked the video.
Straight forward, clean and clear, thanks a lot.
the best teacher in the world. tnks for every thing
just the best tutor anyone can have
Gem of a video man. Thanks a really lot
You're welcome.
Great video. Refreshing.
However sometimes we run into some issues with these functions such as:
1. skipping elements: if you want to loop through some elements (applying a function) while skipping some elements. map and reduce will refuse to skip the elements returning an array with the same size
2. combining the array methods: this can be annoying. e.g. you want to add, filter and apply a function to an array cant be done with one of these methods
3. using globals or applying multiple / external functions within map or reduce. (It would be nice to see a video on this)
You can skip elements by using if in your reduce function to skip past elements that do not meet a condition or by first filtering the array. You can also chain these methods very easily by doing .map(...).reduce(...) etc. Lasty I am not sure what you mean by using globalstar but inside these functions you can do whatever you want. It is just a function.
Helped me pass part of the entry challenge to the coding bootcamp I'm going for - thank you !
Awesome video Kyle. Your teaching style is great, thank you.
You're welcome!
Much better than other channels. Kudos!
Finally a simple and objective viedo
Honestly. If you don't have some sort of code academy course where you are making money from online courses you are making a huge mistake. I've got dyspraxia which makes being a coder really challenging. Not because code is hard but because practically every other dev out there likes to teach by assuming a ton of pre-existing knowledge, which my brain can't process quickly enough.
Case in point, thanks to you, I now properly understand how .reduce() works. I've used it in the past but I've always had to use examples that match my use-case because I just couldn't get my head around it and too many tutorials have explained it in a way that just makes my brain seize up.
So thank you for that. If you DO have an online course, please post the link as I'd probably buy it.
I actually have multiple courses. They are all at courses.webdevsimplified.com. Thanks for the support.
@@WebDevSimplified Nice! I'll be buying those :)
Very handy! Found an excellent resource before starting with my work for the day... Thanks for the good content!
You are very welcome. I'm really glad you enjoyed the video.
callback function of map takes three parameters 1. Item 2. Index 3. TotalArray
That is a very good tutorial. I found particularly interesting and well done the way the reduce method was explained, it was clearer than many other videos on the topic.
Clean and tidy explanations, love it.
I'm glad you enjoyed it!