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.
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.
Thanks, very well made video: audio video letters size 10/10, could you make a similiar video about objects? Or general video about objects and object constructor, with same example shopping cart. Reducing items in object, like in real life when item is reduced on the shelf.
Thank you very much for the compliment! I do have plans to create some videos about object oriented programming in the future but it sounds like you are more interested in the functionality of a database. I am actually in the process of creating a course that will cover the exact use case you are talking about, except not for a shopping cart. It will be released on my channel for free at the beginning of March hopefully. If you want to see a demo checkout my Twitter @DevSimplified to see a short teaser video of the project.
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.
Hoping I can get some clarity on how to solve todays Javascriptmas. Array of names, you have to match every name with a partner and can’t be themselves.
"use strict" Seriously, your videos are good, but for f's sakes, use strict, newbies are watching and whatever code you're writing isn't gonna minify, among other problems. Semicolons in JS are NOT optional.
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.
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.
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.
4:25 there is a short notation of "for" for that purpose: for(let item in items){console.log(item.price)} 10:00 reduce is confusing and completely unnecessary. write the following instead: let total=0;for(let item in items)total+=item.price;
I couldn't work out how to get the information out of the array. Then I tried making an html paragraph with id="demo" and then used document.getElementById("demo1").innerHTML =items[0].price; It's only blindingly obvious if you already know.
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♥️♥️♥️♥️♥️♥️
Naming for some method is pretty stupid. Instead, it should be called. one of. Array.prototype.oneof = Array.prototype.some.bind({}) There, fixed. Also, is "includes" any faster or better than "indexOf"? Edit: Turns out indexOf can't find NaN values.
How does Array.includes() work when you have an array of objects with key/values? You want to check if the array has an item where the price is $5 for example?
But wouldnt have includes() also worked on the the json with the names and prices? E.g. items.includes('Book'). Just to check if the book is already in this array?
How do I get the index of items as in 1-10 format? JS usually counts from 0, but if I want to display the numbers, how do I do that? For example; let's say I have a slider and it has 4 slides and I want to display the number of each slide when it's active - on a web page. Also, would you like to take a tutorial request? Cz I've got one!
I'm confused Why is that reduce function written in item.reduce((currentTotal, item) => {return item.price + currentTotal}, 0)? The (currentTotal, item), from my understanding, the currentTotal is the accumulator, and item should be each item in the array, which is the currentValue (based on developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) So my question is, why is that item not item.price? or is that the same thing?
Do you use the const if it’s in a class? Like : sample() { Const Sampleincludes = sample.include => (2) } or I guess it’s all one line with arrow functions BUT do you use const? Please help.
Do you know an array size limitation in JS? Not so big, around 32,786. So, I have to create ABigArray in JS automatically add a second array and more in a case if an index is too big. Got it?
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?
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
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
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¹
Superb explanations. Wish your channel to grow, you deserve it.
Thank you! I already feel like I have grown so much.
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 !
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!
you look like a model
😂
😂Hell yeah dude
😂😂😂
😂😂😂😂
*Modal
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🤗
When reduce confuses you so much that you start calling parameters methods 😂
Lol. My brain can only handle so much :P
its a but map / reduce usage - not the example provided. but the map reduce concept would be understood first and this is beyond most scripters.
I was just planning on creating a video about array methods! Nice one! :)
Nice! Hopefully it goes well.
ruclips.net/video/NH_lCxa1hv8/видео.html
"Array.filter?!?" "Array.filter?!?" "ARRAY.FILTER?!?"
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())
You forget the sort() methode which is very useful
This guys needs only 10 minutes to discuss this awesome topic but in school it will take 1 whole week.
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.
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 :)
No fluff, straight to the point! I really thank you for this video!
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.
Best video ever. Simple, easy to understand. Effective presentation. Looking forward to more videos.
Been binge watching your videos.
Thanks a ton..
This tutorial has more knowledge than many 1hour+ tutorial videos. Well done!
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.
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 }
];
Thanks, very well made video: audio video letters size 10/10, could you make a similiar video about objects? Or general video about objects and object constructor, with same example shopping cart. Reducing items in object, like in real life when item is reduced on the shelf.
Thank you very much for the compliment!
I do have plans to create some videos about object oriented programming in the future but it sounds like you are more interested in the functionality of a database. I am actually in the process of creating a course that will cover the exact use case you are talking about, except not for a shopping cart. It will be released on my channel for free at the beginning of March hopefully. If you want to see a demo checkout my Twitter @DevSimplified to see a short teaser video of the project.
@@WebDevSimplified Thanks looking forward.
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)
Finally someone explained reduced() simply
Thx from Ukraine. You explain clearly, and even I understood
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! :)
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.
Hoping I can get some clarity on how to solve todays Javascriptmas. Array of names, you have to match every name with a partner and can’t be themselves.
Reduce is definitely my favourite Array method.
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...)
"use strict"
Seriously, your videos are good, but for f's sakes, use strict, newbies are watching and whatever code you're writing isn't gonna minify, among other problems. Semicolons in JS are NOT optional.
And another one (in my DJ Khaled voice)! Thanks for the awesome videos man! Super helpful.
DUDE!!!!! you cleared up soooo much for me, thank you man
I'm glad I could help
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
Simple, but yet so accurate, and easy to understand!!👌
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.
When you said “items.some” I thought you said “items.sum”
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.
I was seriously thinking of the number 7 during your "includes" section :O
important : filter, find and includes do not work on IE11
good! let it die
@@stefanms8803 I wish it was already dead, sadly in some cases you'll have to deal with it...
If IE was a tree I would burn it. If it was a house I would destroy it. If it was a gift I would put it to the trash, I would destroy it and burn it.
@@unchartouille1208 Oh I would to. Reality (and big firms) just make sure the tree/house/gift stays up anyway...
I think it’s important to point this out, some clients still want their web apps to work on IE 11. Hopefully there is a polyfill to make them work
what keyboard and what switches do you use????
4:25 there is a short notation of "for" for that purpose: for(let item in items){console.log(item.price)}
10:00 reduce is confusing and completely unnecessary. write the following instead: let total=0;for(let item in items)total+=item.price;
Make a video on some best react Api.🥺🥺😉
I couldn't work out how to get the information out of the array. Then I tried
making an html paragraph with id="demo" and then used
document.getElementById("demo1").innerHTML =items[0].price;
It's only blindingly obvious if you already know.
I swear this guy explains things better than anyone else on the planet
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.
Can't say how much I appreciate these videos. Straight-forward, simple, and most importantly, useful!
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 },
]
Thanks for the summarize the array
Channel name is infinity% justified
Gem of a video man. Thanks a really lot
You're welcome.
thanks for using this font size!
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.
Cute, smart, and a good 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 },
];
I like ur contents js and css
This man is doing such a great job , the way he explain things are great. Thank you for you contribution👏.
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♥️♥️♥️♥️♥️♥️
here's the JSON
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 }
]
Feel like I'll be much more confident at job interviews if I can master these.
Thanks!
this video helped me so much
Зур Рахмат сина)) thx for u!
Omfg, foreach saved my life. Thanks!
Wonderful video!!! Thanks for unlocking the JavaScript lost inside me!!!
i had no idea what was going on tbh
you can simplify reduce like this:
const total = items.reduce((currentTotal, {item} => currentTotal+n, 0);
Might be useful (maybe in a follow up, or V2 video) to discuss the performance ("big O" notation) of these various methods.
Remarkable value for time!
Japanese-style efficiency :)
Amazing result!
@Jason Myers :)
Great Tutorial on JavaScript Array Methods/High Order Functions. Thanks, Kyle
{2022-03-09}
Man this was just amazing. You explain it with such simplicity without complicating and confusing the viewer. Thanks man
A thousand years working with JS and I didn't know about some of those functions
New on ecma6?(es6)
How can I use the includes-method on the original array?
const includesX = Items.includes({ name: "Bike", price: 100 })
returns false... :-S
So what is difference between some and includes?
Some allows you to use a function to check true/false while includes only lets you check if a specific value is in an array.
Naming for some method is pretty stupid. Instead, it should be called. one of.
Array.prototype.oneof = Array.prototype.some.bind({})
There, fixed.
Also, is "includes" any faster or better than "indexOf"?
Edit: Turns out indexOf can't find NaN values.
How does Array.includes() work when you have an array of objects with key/values? You want to check if the array has an item where the price is $5 for example?
What is the difference between .map and .forEach ? I've just come to realize that I've been using .map for both usages...
This video explained for excel folks:
Arrays = Excel table
Filter = Filtering a table in excel or using an if function such as =if(A1
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.
I don't why this video had 200 dislikes. This type of videos are rare in RUclips . I like this video so much 👍👍👍👍👍👍👍👍
But wouldnt have includes() also worked on the the json with the names and prices? E.g. items.includes('Book'). Just to check if the book is already in this array?
Great video 👌😊
Yes sure these method are very handy, well kind of because most of them are VERY EXPENSIVE. For large datasets, traditional method are recommended.
How do I get the index of items as in 1-10 format? JS usually counts from 0, but if I want to display the numbers, how do I do that? For example; let's say I have a slider and it has 4 slides and I want to display the number of each slide when it's active - on a web page.
Also, would you like to take a tutorial request? Cz I've got one!
I'm confused
Why is that reduce function written in item.reduce((currentTotal, item) => {return item.price + currentTotal}, 0)?
The (currentTotal, item), from my understanding, the currentTotal is the accumulator, and item should be each item in the array, which is the currentValue (based on developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
So my question is, why is that item not item.price? or is that the same thing?
callback function of map takes three parameters 1. Item 2. Index 3. TotalArray
Do you use the const if it’s in a class? Like : sample() {
Const Sampleincludes = sample.include => (2)
}
or I guess it’s all one line with arrow functions BUT do you use const? Please help.
I like ur explanation. I want make video on how to store dom inputs into this type of array exa: name: document.getElementById("text1") that's like.
Do you know an array size limitation in JS? Not so big, around 32,786. So, I have to create ABigArray in JS automatically add a second array and more in a case if an index is too big. Got it?
I would like to add:
push
findIndex to find index
splice(index, 1) to remove
Thank you best explanation I have seen thus far...keep up the good work !!!!!👍👍
I personally think that the most must know Array methods are push, indexOf, slice, splice, sort
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?
Harikasınız. Konular Muteşem.
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!
What if Array.find() doesn't contain the item you're looking for and returns false for every item in the array?
forEach - bad practice, good is:
for (const item of collection) { item.doSmth(); };
6:19 lies...
Thank you so much Bro , I hope if I was understand English because I Arabic