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!
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.
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!
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.
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 TH-camr 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.
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.
Thanks man, i'm glad that every time im entering to TH-cam 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.
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! :)
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
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.
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.
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 have always wondered what performance gain there will be if instead of arr.every(... x < y) -- which will require going through the entire array to determine the case you use !arr.some(... x > y) -- will only need to find one that breaks the case - worst scenario is, the last entry is the breaker - best case the first is the breaker. Notice the negation for 'some' and the reversal of the operator < to > or > to
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.
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.
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.
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.
Thank you. My dev environment is actually really straight forward. I have a windows computer and I use visual studio code with the live server extension to auto refresh my page. Other than that pretty much everything is default since it makes it easier for people to follow along. Do you have any other questions about my setup?
Thanks so much bro. I watch your videos a lot, mostly for entertainment and motivation but this helped me out a ton. Currently doing The Odin Project and this helped me understand array methods much better. Thanks for your content. Hope you beat Kevin P next time 😂
Love it, simples! Also I like that this guy doesn't use semi colons; Though I get caught out not using them sometimes; The benefits outway the risks; Ops; I subscribed :)
Good point. In general you shouldn't use break or continue with these methods because it will not work and these methods imply you want to loop through the entire array. The only array method where breaking out makes sense is forEach and you can just use a normal for loop if you need to break out early.
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!
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
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🤗
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 th-cam.com/video/LEKx0L4ukhs/w-d-xo.html
Yeah, not a single second wasted !
No fluff, straight to the point! I really thank you for this video!
Can't believe I just learned about all these methods under a 10 min tutorial. Man love & respect for you. 🙇♂🙇♂
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'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.
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 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.
This tutorial has more knowledge than many 1hour+ tutorial videos. Well done!
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!
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
Funny how much more helpfully and clear this is about these methods over some tutorials that spend 30 to 45 on each method
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 TH-cam tech world saying hi. :)
@@WebDevSimplified ya u waste zero time, great reference material
@@yashlearnscode5502 1M101¹
Can't say how much I appreciate these videos. Straight-forward, simple, and most importantly, useful!
Superb explanations. Wish your channel to grow, you deserve it.
Thank you! I already feel like I have grown so much.
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 :)
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♥️♥️♥️♥️♥️♥️
Finally someone explained reduced() simply
The two great channels where I learned everything, web dev simplified & Traversy media
.
🤘
Brad is a beast
Steven Griffith is a very good TH-camr 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.
Best video ever. Simple, easy to understand. Effective presentation. Looking forward to more videos.
Been binge watching your videos.
Thanks a ton..
This video will deliver the expectations you expect from the title. Simple and straightforward
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 TH-cam record :P
I'm really glad you enjoyed the video.
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...)
Dang, if I had had the smarts of typing my problem into TH-cam a couple hours earlier... you saved me dude! (just starting this JS journey)
i love that most of his videos are fast-forwarded it makes it a challenge to keep up sometimes XD
Thanks man, i'm glad that every time im entering to TH-cam 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.
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
This video is only 10 minutes, but explained commonly used array methods so well! Ty for the great tutorial💯
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())
Man this was just amazing. You explain it with such simplicity without complicating and confusing the viewer. Thanks man
I don't why this video had 200 dislikes. This type of videos are rare in TH-cam . I like this video so much 👍👍👍👍👍👍👍👍
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 simplified so much of the confusion I had around these methods. Subbed!
This is a really worth tutorial to watch for every newbie programmer. Finally started to understand the array methods. Thanks from Kyrgyzstan!
I've been working with firebase using for each without understanding it completely. Thank you for your insight and contribution!
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! :)
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
You helped me a lot, i was strungling with this array methods and i can't thank you enough
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.
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.
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.
Thx from Ukraine. You explain clearly, and even I understood
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 was just planning on creating a video about array methods! Nice one! :)
Nice! Hopefully it goes well.
th-cam.com/video/NH_lCxa1hv8/w-d-xo.html
Reduce is definitely my favourite Array method.
the currentTotal is lil bit confusing but you explained it very good.. thanks dude.
Simple, but yet so accurate, and easy to understand!!👌
I have always wondered what performance gain there will be if instead of
arr.every(... x < y) -- which will require going through the entire array to determine the case
you use
!arr.some(... x > y) -- will only need to find one that breaks the case - worst scenario is, the last entry is the breaker - best case the first is the breaker.
Notice the negation for 'some' and the reversal of the operator < to > or > to
Every video you make is gold. Never unsubscribing
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.
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.
Efficient way of learning! Short, clear and easy to understand. Much appreciated. Keep up the good work.
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.
No bullshit, just pure explanation. Awesome!
the most informative easy video on youtube about arrays
Helped me pass part of the entry challenge to the coding bootcamp I'm going for - thank you !
Your channel is one of my main go-tos for programming knowledge. Keep up the good work, my friend.
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.
Easily one of the best channels for js, thank you so much , subscribed!
This man is doing such a great job , the way he explain things are great. Thank you for you contribution👏.
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.
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.
This is wonderful Kyle! Can you share the setup of your development environment?
Thank you. My dev environment is actually really straight forward. I have a windows computer and I use visual studio code with the live server extension to auto refresh my page. Other than that pretty much everything is default since it makes it easier for people to follow along. Do you have any other questions about my setup?
Thanks so much bro. I watch your videos a lot, mostly for entertainment and motivation but this helped me out a ton. Currently doing The Odin Project and this helped me understand array methods much better. Thanks for your content. Hope you beat Kevin P next time 😂
Thanks for explaining the reduce method in such an easy to understand way!
This is wholesome! Clean, Clear and Concise! Props
I was seriously thinking of the number 7 during your "includes" section :O
DUDE!!!!! you cleared up soooo much for me, thank you man
I'm glad I could help
the best teacher in the world. tnks for every thing
thank you Kyle for helping us review array operation
Seriously thank you. This helped me past a huge block I had developed. Such a simple solution. Thank you!
Nice, simple, clear and short to the point. Thanks for this.
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!
great explanation of array methods in a simple, understandable way. Thank you!
Thanks man. One of the best tutorial I even seen. Please make videos on Js, Node, Vue, Express and making full stack projects with them. Thanks again!
I have a full stack Node.js series that covers all these topics except Vue.
Bro this is too easy, thank you for making this tutorial I learnt soooo much in such little time)) 🎉
A thousand thanks for the poignancy of your explanations. I didn't know `reduce` took a second initial value parameter before 🙏🏿
Simply the best tutorial on array methods
We should talk about the ASMR from the keyboard... Great tutorial, btw :)
Love it, simples!
Also I like that this guy doesn't use
semi colons;
Though I get caught out not using them sometimes;
The benefits outway the risks;
Ops;
I subscribed :)
Finally understood how reduce actually works. Thanks man!
You're welcome!
This is a very good video! I was so scared that the five methods would be pop, push, shift, unshift and length
Short and good. Maybe do a follow up of using break and continue inside those functions as they act different as in 'normal ' loops.
Good point. In general you shouldn't use break or continue with these methods because it will not work and these methods imply you want to loop through the entire array. The only array method where breaking out makes sense is forEach and you can just use a normal for loop if you need to break out early.
You do explain complex stuff on a very dynamic way. Thanks.
You are very welcome! I'm glad you liked the video.
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.
Good, crisp, precise, and very understandable. Thank you so much. It was just what I needed.
This video has made my day ! I learnt so much that I really wanted to have the exact explanation ! Thanks buddy.
Thank you, may the student teach the master a useful tip?
console.table() instead of console.log()
I always forget about the amazing logging features of console. I really need to be more mindful of them when coding.
Awesome...filter, map,find,forEach, every,some,reduce,includes.
Thank you web dev for such an easy explaination. I hate reading mdn so please make more of such videos. Kudos👍👍👍👍
Beautful super awesome ... you are so clear, concise and to the point ... have come across many tutors but you explain it the best 👍
So simple yet helpful, thank you!!
great tutorial. makes me wonder what else .reduce() can be used for.
this just really nicely done, calm, simple and very well explained. thank you very much...
very good video. while practicing found out that 'return' statement is implicit in 'map' function when its a single line operation.
This is actually because of how arrow functions work. You can checkout my arrow function video for a more in depth explanation on the topic.
Straight forward, clean and clear, thanks a lot.