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 RUclips in some time thanks keep making these videos keep growing!!!
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!!
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`.
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.
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.
This video is nice, however it is good to mention that .find() will return the FIRST element that meets the condition only. It will not return all elements that meet the condition.
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.
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?
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).
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]
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?
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.
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: ruclips.net/video/24Wpg6njlYI/видео.html
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.
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!!!!
can some one help me plz , iam trying really hard to understand and learn javascript and i do understand what each method or function do but when iam trying to solve certain problem to make a thing i couldnt figure it out ( how to convert english words into code )so if anyone have recommendations or know what the problem with me and how to solve it , please reply to me as fast as you can and thanks in advance .
@@Cocoa-mania 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?
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
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 RUclips 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!!
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. 😃
The simple short and best array iteration explanation ❤👍 I will make an app for it!
Best RUclips 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.
Very simple and straightforward
Absolutely excellent tutorial on these higher order functions. Thanks for making these videos.
U r the best, this is the easiest explanation. I am learning JS now, so this is very very helpful.
Thank you. Was having a difficult time with these but this was short, and clear and helped me understand.
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 !
simpler than the course am following . thanks
Good short video to be used for future references purposes.
Oh my God! Your lesson is awnsome. even my English is suck but this is so easy to understand for me. Thanks
Thanks a lot! That saved a lot of our time
Thanks for these clear examples!
"...so it's either all or nothing with this one."
Relatable!
Thank you for sharing these video's! Very clear explanation with simple examples.
.reject() exactly opposite of .filter() || thank you for the video
sounds good, except it doesnt exist in vanilla js
Awesome! Best video i found on RUclips about this topic ;)
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.
Thx for this great summary!
Wow needed this!
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,
You did an awesome job, thank you. Put a smiling photo :)
Thanks, great video and loved the quick pace of it.
This video is nice, however it is good to mention that .find() will return the FIRST element that meets the condition only. It will not return all elements that meet the condition.
Great Man. Short and Sweet.
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.
thanks man! this was crisp.
Believe me, this 6 minutes save my 6 hours.
Thank you :)
I will use my code for good.
Honestly If you see his face turn serious
It’s mean this Video is Worth watching for Sure😂❤️
Im your bigFan Beau
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?
.some() and .every() methods are cool. Thank you.
Super helpful. Thank you
Great short video!
Thanks, this video is awesome!
This guys is smooth
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).
This was an awesome video, thank you!
short and nice
Very helpful reminder!
Very useful video !! I really learned something from you :)
i love you i really need this kind of explanation
reduce@ 2:29
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.
Thank you so much
Very Nicely Explained (y)
wow..that was so easy, u must be @ MIT
Thank you
Very helpful
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]
Awesome!
great explenation!
Helpful video
Thanks a lot man
Using the filter function, is it possible to move items to another array when they are clicked? If yes, how is it done please?
it was great explaination.
Thanks soo much bro
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.
... it "returns a new array"!! stop saying it put's elements back!!
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: ruclips.net/video/24Wpg6njlYI/видео.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.
awesome
thank you soooo much
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.
Thank u..
goo job ,i appreciate u
map() returns a new array not modify the array itself
Hey You must be teaching @MIT
what do you mean by...... use your code for good............. ?
findIndex @ 5:30
find@ 4:42
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!!!!
joss awesome
can some one help me plz , iam trying really hard to understand and learn javascript and i do understand what each method or function do but when iam trying to solve certain problem to make a thing i couldnt figure it out ( how to convert english words into code )so if anyone have recommendations or know what the problem with me and how to solve it , please reply to me as fast as you can and thanks in advance .
hi can you make a video on recursion
Done! ruclips.net/video/vPEJSJMg4jY/видео.html
some@ 3:37
reduce was painful lol
I still don't understand reduce 😭. Understood the rest
@@Cocoa-mania 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?
@@Cocoa-mania ruclips.net/video/s1XVfm5mIuU/видео.html watch this vid it may help u :)
Thank you very much. Clearer and I'll use this for reference
@@Cocoa-mania 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);});
every@ 4:11
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