Array Iteration: 8 Methods - map, filter, reduce, some, every, find, findIndex, forEach
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- Learn eight methods to iterate through an array in JavaScript! Methods include: forEach, map, filter, reduce, some, every, find, findIndex.
Code:
🔗 codepen.io/beau...
More info:
🔗 gist.github.co...
Beau Carnes on Twitter: / carnesbeau
⭐JavaScript Playlists⭐
▶ES6: • ES6 - Beau teaches Jav...
▶JavaScript Basics: • JavaScript Basics Course
▶Design Patterns: • Design Patterns - Beau...
▶Data Structures and Algorithms: • Data Structures and Al...
▶Clean Code: • Clean Code - Beau teac...
-
We're busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.
Join our community at freecodecamp.com
Follow us on twitter: / freecodecamp
Like us on Facebook: / freecodecamp
Follow Quincy on Quora: www.quora.com/...
❤️ Support for this channel comes from our friends at Scrimba - the coding platform that's reinvented interactive learning: scrimba.com/fr...
The simplest, shortest and best array iteration tutorial ever
Exactly. Great video.
Yeeap, finally i clear up those methods
1 month ago this looked like magic, now I can mostly grasp the ideas, not too fast but still progress y0l0
I’m sure you’re a pro now!
I'm expecting to hear that you now have atleast 2 YOE as a SWE
I paused this video in the last minute just to comment. Your tutorials are so amazing and straightforward. I dont know how to appreciate this better
Yeah maan exactly
The simplest, shortest and best array iteration tutorial ever
after 1 year trying finally i understand it , i can't believe
I was scratching my head trying to understand what sorcery are these methods doing. Your tutorial is the best thing I've come across on TH-cam in some time thanks keep making these videos keep growing!!!
Thank you for this tutorial, out of millions of tutorial on google, this is the simplest way of iteration I've ever understand... Thank you so much!!!
Hi!! Just wanted to say that your videos are the best! Came to this one from the Javascript beginners video and both had helped me a lot. Everything you explain is so clear! Thank you very very much! And hope you can keep working on more videos!!
Best TH-cam Channel to Learn coding I have ever watched !!!!!
I've been looking everywhere for the .find function to actually work..and yours is the only one that worked and made complete sense....THANK YOU!
This is cleared my life about array iterators, thx for the video!
Very well done. I truly appreciate these videos alongside FCC's tutorials.
Absolutely excellent tutorial on these higher order functions. Thanks for making these videos.
Typo in the description, `sum` instead of `some`. Ironically what made me watch the video was a: "wait there's a method called sum? And here I was typing reduce((a,b)=>a+b)". I was glad to learn about `some, every, find and findIndex`.
Fixed! Glad it got you to watch. 😃
second time you helped me understand sth i was struggling with for hours
Same! I was studying this type of code for hours and still didn't make complete sense. But this video made it very clear
Same !
The simple short and best array iteration explanation ❤👍 I will make an app for it!
Thanks a lot! That saved a lot of our time
Thank you. Was having a difficult time with these but this was short, and clear and helped me understand.
U r the best, this is the easiest explanation. I am learning JS now, so this is very very helpful.
Very simple and straightforward
Awesome! Best video i found on TH-cam about this topic ;)
Thanks for these clear examples!
simpler than the course am following . thanks
Oh my God! Your lesson is awnsome. even my English is suck but this is so easy to understand for me. Thanks
Thank you for sharing these video's! Very clear explanation with simple examples.
Good short video to be used for future references purposes.
Thx for this great summary!
Wow needed this!
Great Man. Short and Sweet.
Thanks, great video and loved the quick pace of it.
thanks man! this was crisp.
"...so it's either all or nothing with this one."
Relatable!
Great short video!
.reject() exactly opposite of .filter() || thank you for the video
sounds good, except it doesnt exist in vanilla js
This was an awesome video, thank you!
You did an awesome job, thank you. Put a smiling photo :)
Thank you :)
I will use my code for good.
Super helpful. Thank you
Thanks, this video is awesome!
Honestly If you see his face turn serious
It’s mean this Video is Worth watching for Sure😂❤️
Im your bigFan Beau
.some() and .every() methods are cool. Thank you.
i love you i really need this kind of explanation
Very helpful reminder!
Very useful video !! I really learned something from you :)
People seem to have a hard time understanding that the functions map and filter return copies of the array with each element transformed element-wise by the callback function. Think about the difference between map and forEach and why you would use one over the other to solidify this. I'm going to start sending this video to anyone struggling with this.
This guys is smooth
Pro tip: if you're looking for practice with arrow functions, take the codePen code and make all of them arrow functions. If you're taking notes, it saves space to write them as arrow functions, too.
Yes! Arrow functions looks way cleaner and cooler,
Very Nicely Explained (y)
reduce@ 2:29
I must say i normally never comment on videos but this one was truly amazing. Super straight and understandable.
But where exactly is the difference between FIND and FILTER. For me FILTER is just the more versatil FIND am I right or am i missing something?
Find method returns the found value in the array, if an element in the array satisfies the provided condition or undefined if not found.
Filter method creates new array and add every element which satisfies the provided condition and after that returns the whole array. If there is no elements that satisfy the condition it returns empty array.
The other comment is solid. It leaves out one tiny detail. Find will stop iterating early. If there are 10,000 elements and the third element meets requirements it stops iterating. This makes it faster than filter in most situations.
Very helpful
Thank you so much
great explenation!
it was great explaination.
short and nice
Thank you
Helpful video
Believe me, this 6 minutes save my 6 hours.
Thanks soo much bro
Awesome!
Thanks a lot man
I'm not quite understanding the seemingly random nature of the function parameters... like in the last examples of 'find' where you put in item... are there a list of keywords that are tied to arrays in JS?
wow..that was so easy, u must be @ MIT
thank you soooo much
Could this map explanation contain an error? Map doesn't return the result into the original array as it seems to be suggested here. Instead, map creates a new array and places the results in it. Which ends up having 2 arrays: three and double, respectively containing [1,2,3] and [2,4,6]. To verify this, simply add console.log(array) after console.log(double).
awesome
goo job ,i appreciate u
OMG. I didnt know about all these. Thanks! And also, I just realized I have been abusing map() when I should have done forEach() .. smh..
does the => operator work for forEach as well btw?
it's called arrow function and you can use it for any user defined functions. Just search on web...it's cool.
Definitely spend time to learn about ES6 syntax. Since about 2017 it’s been the standard for how to write JavaScript. It’s called an arrow function or a fat arrow function. MDN has the explanation you want.
Thank u..
Variable names matter. For reduce when you have an accumulator you wouldn’t call it result. That’s not very descriptive. Accumulator is standard, or acc for short. But, for this purpose sum is most descriptive and brief.
arr.reduce(sum, currNum) => sum + currNum);
With reduce there is a default value provided. So, the 0 that you start with is implied and not needed.
sum is a solid variable for a thing that sums. Result tells you it gets returned, but not what it is doing.
currNum defines a variable as the current number. Element, or ele for short would technically be ok. But, those are too general. Num by itself would be perfectly fine.
HI, great tutorials. Howver, it seems i found a mistake, or maybe i dont understand. In all these cases, if you print the orignal array you start with, the values are not changed in that array. Howver, the value you use in the assignment, that becomes the new array wiht the values returned by the callback function. So forexampe in 2nd example, three retains [1,2,3] and doubled the value used in the assignment, becomes [2,4,6]
cool viedeo, just a question: why are the good olds "for (var i in array) {...}" and for (var i = 0;i < array.length;i++){...} missing? are they not good to use anymore?
The videos are kind of out of order but will eventually be a complete JavaScript course that can be watched all the way through. Here is a video that is supposed to be before this one that covers for loops on arrays: th-cam.com/video/24Wpg6njlYI/w-d-xo.html
This video covers array methods. In some cases these are cleaner than writing by hand. Array methods like this do get abused in some cases though.
Using the filter function, is it possible to move items to another array when they are clicked? If yes, how is it done please?
findIndex @ 5:30
find@ 4:42
joss awesome
i guess where i get confused is when should i used map over foreach?
Depends on what you’re going to do. ForEach is much more general. Map can only be used to perform actions on an array while returning an array. You don’t have to do anything with the array it returns.
So, if you had an array of people and you want to run a greet function for each. Then, forEach would be preferred.
guests.forEach(greet)
If you did that with map you would waste the time and space to create an array that wasn’t used.
some@ 3:37
... it "returns a new array"!! stop saying it put's elements back!!
what do you mean by...... use your code for good............. ?
hi can you make a video on recursion
Done! th-cam.com/video/vPEJSJMg4jY/w-d-xo.html
every@ 4:11
map() returns a new array not modify the array itself
Hey You must be teaching @MIT
You kept saying the iterators replace the values in the original array, AND IT WAS DRIVING ME MAD!!!! You literally stored the iterated values in a new array. The original one remains unchanged!!!!
reduce was painful lol
I still don't understand reduce 😭. Understood the rest
@@haha-comments 1. forEach = loops through them.
2. map = creates a new array from an array.
3. filter = creates a new array based on condition.
4. reduce = excutes a reducer function on each element of the array,
resulting in a single output value.
5. some = its like: does any item in the entire Array meet this condition?
@@haha-comments th-cam.com/video/s1XVfm5mIuU/w-d-xo.html watch this vid it may help u :)
Thank you very much. Clearer and I'll use this for reference
@@haha-comments anytime 🙏
Your map terminology will hurt not help, map does not change, put back or replace.
['a','b','c'].forEach((item,index)=>{ console.log(item,index);});
This was way too quick of an explanation!
While going through these, I made some notes to make it easier to understand. Feel free to grasp the ideas faster: codepen.io/adriancodestech/pen/GRQYZMb