JavaScript Higher Order Functions & Arrays

[@sonnyps413]

Timestamps - ForEach() - 3:25 - 5:30 Filter() - 5:30 - 15:30 (8:55 One liner filter code) (filter will returns an array - meaning you do not need a separate variable for an array) Map() - 15:45 - 21:05 (20:30 You can link multiple Map() like .then() from promises) Sort() - 21:10 - 25:50 (Takes two params) Reduce() - 25:50 - 30:55 (Reduces the array to a single value - from LEFT to RIGHT) Extra : 31:05 - 33:40 (Combine all four methods)

[@curiosdevcookie]

Thank you,

[@JD-kf2ki]

thanks, dude

[@simple8810]

@afreen khanum Nah, forEach loop over an array, and it only gives us values when we defined specific conditions for that, e.g ages.forEach(function(age) { if(age>30){ console.log(age) } }); so it only gives value which pass the condition but in filter ,it will make array of these values which pass the conition and for each doesnot return anything while filter return a new array depend on the condition

[@Dejan-f6m]

Appreciate it

[@OmarBugarin]

I just recieve my first pay working like a front-end dev, and i buy your course, becouse i need to be better with js and becouse thanks to you i got my job, thanks man youre the best teacher, if one day you come to México, youre welcome in my house!

[@caioferreira3308]

Really, nice man congrats, i wanna a job as a full stack and i will get by brad classes

[@nrg7685]

@stillFLiP i just wanted to ask the same. Because in my country we have requirements like 5years work as a developer. Thats insane

[@PB72UK]

Tamás Mirják just build loads of stuff, even small spas and single webpages that show you understand a certain concept, this will help your job prospects..

[@raboija]

that's nice

[@unknownman1]

what is your salary ?

[@HariramNandagopal]

RIght now I have reached a level where searching for a video within "Traversy Media" channel seems to be more bliss than searching whole KZbin. Top class Brad :)

[@TraversyMedia]

Thanks :)

[@Nemcoification]

Lol, same here. My preferred google search on a topic is now "Traversy (topic)". That says a lot :)

[@ChristofferHald]

@@Nemcoification Funny to read this comment. I have done exactly this the last two weeks.

[@devonrusinek5807]

@@Nemcoification Same here

[@curiosdevcookie]

Well put, same here!

[@troytempest3023]

Brad, honestly speaking you're by far the best source of not only quality and useful programming info but your explanations and comprehension of these concepts and their application is really great and very easy to understand. Thanks for the amazing content!

[@boristheblad]

Those "Now put it on pause and try to do it yourself" are gems in your videos man, really helps to learn!

[@ousmanebocoum221]

Actually understanding those basics should be what people focus on, instead of learning frameWorks and libraries without knowing what is going on under the hood..once again thanks, Brad!!!

[@TraversyMedia]

agreed

[@ubozoharinze8869]

I am being forced to learn angular in my new company but a friend told me to move to basic ts and js which i can say is really helping me out blindly learn frameworks is bad

[@zachaluza3410]

I've been struggling with these functions for a while, and this video really helped!

[@thevoiceofgod7454]

Thanks For the great tutorials, they are so helpful, I had my first developer job interview, needless to say, I don't think I'll get the job, but what I have learned through practice and watching your tutorials was tremendously helpful during the interview process. First code test I passed easily, second code test was much more difficult and I couldn't figure out the code but I was able to figure out parts of it. Seriously thanks for the tutorials. For those of you out there just starting out, looking for your first developer jobs, the JS test I was given consisted of an easy first test, basically just asking basic questions about identifying operators, for loops, switch statements, what are objects stuff like that. The second test was to write a function where I had to figure out how to find words in a given sentence/string that contain a specific character and output those words that start with that character and then reverse the words. Didn't do so well on the second test.

[@kissromeorichard]

Brad, your way of explaining abstract things like functions suits well to many, many future programmers. A humble thank you! PS. And also your voice and tone is really soothing for people who want to learn.

[@daviddrahllensa4165]

My native language it´s spanish, and i understood better than people that explains on spanish. Thank you so much, great teaching.

[@davidvideauortega287]

Your tutorials are out of this world. You explain every single thing, what makes them really easy to follow and begginer-friendly. I can't thank you enough for that! I'm a huuuuuge fan of your work :)

[@BobbyBundlez]

omfg ur explanation of how if only one parameter is in fuction then it doesnt need paranthesis cleared up SO much for me, thank u

[@ITSH4WK]

Great examples. I love how you break things down and then show simpler ways of getting the same results. Really helpful. Thanks, Brad

[@kevinzhang8974]

get up @ 6:00 and did this tutorial ... it is a fantastic exercise to massage my brain before I jump into real JS coding today... Thank Brad for the excellent video

[@EricBishard]

Really good video. I'm a 10 year JS dev and work with JS everyday and courses like this are required to simply stay sharp! Nice job..

[@sarahrudy8292]

You are SUCH a great teacher! I found you through your course Modern JavaScript from the Beginning and these youtube videos are just the icing on the cake. Thanks so much for spreading your knowledge!

[@ajaybayya]

Thank you Traversey, your content inspires a lot to make my day to day work better.

[@jacquelinemendez3962]

Thank you for this video. I'm doing 100devs right now and this really helps reinforce my reading homework.

[@othmane2493]

I really don't get how can ppl dislike a video of a guy who gives them some knowledge for free ... like how ??

[@f12736]

Maybe by clicking on the dislike button. 🤔🤔

[@MrAlamazin]

As a self-learning student of JavaScript, I am grateful for your content. Your explanations are clear and your voice is sooo calming! LOL. Thank you fine sir!

[@LaurenceBahiirwa]

Thanks Brad for this. I was preparing a lesson for my Cambridge students. This helped greatly. Keep it going man.

[@davlatgulomxusenov2031]

are you a teacher of Cambridge University?

[@deependrarathore283]

I am newbie and learning coding . I have questions here , we are passing company as parameter but company is not defined anywhere ?

[@vainav5794]

@@deependrarathore283 if you talking about the 10:10 time stamp here company is just a parameter just like passing paramters like x,y in a function this is possible in javascript unlike lang like c++ and etc here the values from the companies array is stored in company variable as it loops through all the object ppresent in the companies array i think this is the coorect explanation corect me if iam wrong

[@aroshm1682]

Thanks man!! this was super helpful. I always come back to watch this when I'm having doubts.

[@AlexandrKalaidzhi]

ES5 callback syntax for filter function can be shorter without using if statement: const canDrink = ages.filter(function (age) { return age >= 21; }); The result will be the same. But ES6 is really cool. Thank you for the great lesson.

[@tunamusic2314]

ok

[@leomosia]

Thank you Brad. I appreciate your courteousness in apologizing for the activity in the background.

[@TheFallinforyou]

For an even shorter way of sorting the Company starts: const sortedCompanies = companies.sort((a,b) => a.start - b.start);

[@awaisfiaz8186]

yeah right explanation link. www.w3schools.com/jsref/jsref_sort.asp

[@Adamsandlerwb]

@@awaisfiaz8186 Ayoo Chaadd chill broo ahahhahaha!!

[@tunamusic2314]

do you know why when we use sort(a,b) => a-b and it will arrange from short to hight value ??

[@MP-mh1tu]

This is the only clearly explained video I've seen about this function. Thank you.

[@websurfer5845]

Man, thats one of the best videos. make some other javascript videos , its one of the most famous languages out there. So please share with us the most important things u've learn doing javascript throughout your entire programming life

[@peoray]

Have you tried the course?

[@peoray]

How would you rate the course?

[@AoifeNic_an_t-Saoir]

Shatov his courses are all great, especially the ones on Javascript. He not only knows what he's talking about, but he also knows how to teach it in a way that we can understand.

[@baybay1234]

yeah check out his courses on Udemy if you'd like to show some support to his great content :)

[@konstantinkkk8397]

Web Surfer pls tell me how to find his tutorials on udemy

[@indiancuriousvoice8773]

I am from India and I can say your teaching way is better than our IIT teacher.

[@ScottGrovesBrainDump]

Brad, just love this video!!! Really great examples and soooooo well explained. Really like you testing us by asking us to pause and try ourselves. Makes it so interactive. Thumbs up!!!

[@oliverharan5256]

so the only reason I would recommend this or anything that Travis does because he's the real deal... He records these videos and does paid udemy courses at the same time.... That's big time... his courses are well worth the subscription but he goes above and beyond with these vids for us.. it's all about knowledge. .. So rare.

[@willadams6217]

Really good video I followed along and added it into my modern Javascript course directory. One thing though you keep saying squared but the Math .sqrt() is the square root not squared.

[@01107345]

squar't

[@matthewmcmorries7600]

Software student and first time watcher here. You did a phenomenal job of breaking this down so a week 4 student like myself could understand.

[@MrSuperawesomeisme]

Very well explained! Thank you. You must have accidentally mixed up square vs square root though!

[@brondchux]

4 years later - Thank you Brad for the refresher!

[@CaneSugarHD]

The for loop you can easily do away with "i" or array tags completely by using (for of) loops for(age of ages){ if(age >= 21){ canDrink.push(age) } }

[@childmolester6557]

stfu or i ll give u 3piece and a java

[@tunamusic2314]

i see ( for ...in ) , means for (age in ages) and don't see (for of ) like you said

[@lets_lvl_up]

I mean, it's better than the old fashioned 4 loop. Actually you can even get ride of the curly brackets: let canDrink = []; for (age of ages) if (age >= 21) canDrink.push(age); But doing it the way it's shown in the video is still more succinct: let canDrink = ages.filter(age => age >= 21);

[@karimakatonkarinakaton9608]

0

[@ranveerancharaz6732]

This is one of the few videos that helped me understand reactjs well ! Thank you for that !

[@argeelearner3978]

On your way to 300,000K, Good for you. Your the best!

[@reilley4297]

To sort the companies in order of start date: const sortedCompanies = companies.sort((c1, c2) => c1.start > c2.start) You can do the same thing on ages sorting as well. Great video! I learned a ton!

[@ernestj8000]

Excellent tutorial and pacing. Thanks for recording this. Truly one of the best explanations of these array methods that I have watched.

[@sumgue4964]

This was really the only acceptable tutorial on javascript arrays on youtube. I was falling behind in a programming bootcamp I am currently attending and this saved the day. Thanks a lot!

[@golamrabbiazad]

Thank you so much. Your explanation was amazing. lovely!

[@fastsolution]

This guy is absolutely not boring and voice is soothing.

[@pikachu5223]

Thank you! buy brad js udemy course is gold

[@achivers8]

Kali 33 hi, is it the modern JavaScript one or any other js course

[@pikachu5223]

Abdul Gafoor the modern one

[@LifeSurf123]

This really takes some intimidating looking concepts and explains them simply, thanks

[@captainalpha4853]

Hi Man , please keep doing tutorials videos , i love 'em a lot 😍😍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

[@AnaCastro-zp5cr]

This video is hands down the best one I found explaining high order functions & arrays. You basically thought me in 35 min what 5 hours of Lynda courses couldn't. Thanks, u da man!

[@FrancoBaccarini]

Hi! Love your content and style. Can't afford to become a Patreon right now, but someday i will. The only way i have to pay your content right now, is with three suggestions for VSCODE :) 1) Instead of copy paste a line, you can ALT+SHIFT+DOWNARROW (or UPARROW). You can do it without selection if you need a single line, or select all the lines you want (SHIFT + UP/DOWN or MOUSE selection.) :) 2) If you need to move the line, just press ALT+DOWNARROW/UPARROW. 3) emmet is enabled by default. Writing CLG->TAB it's equal to console.log(yourcursorisherenow)

[@miggu]

Thank you for explaining things calmly , orderly and easy to understand.... so hard to find to find people with this talent .

[@coolarun3150]

Liked even before read the title

[@dimarzio9374]

cool arun Bias. Evaluate the content first. Make the author be better.

[@coolarun3150]

Dimit Lemekh don't worry man. That like is for his effort not for the quality of the content. i hope people like you will give good comments about the content and make him better.

[@alxndrdg8]

looks like you are new here. Those who know Brad, hit the like button first and then watch the video - That's Brad Traversy! He has earned that much respect from us.

[@MRMOTOFOTO]

"MAKE THE AUTHOR BETTER".....Bwhahaha!!!!

[@RobertTodar]

I liked it before I watched it as well :) Now watching it, I wish I could like it again :). Thanks for the great video!

[@bonnieowens9531]

Heading over to Udemy to buy the course now...I watched this to clarify some problems I was working on in another course. This answered EVRYTHING, and made me understand what I thought I knew even better.

[@nyteskun]

can some explain how sort algorithm works? is it by a - b, then a - c? or a -b, then c - d? i dont want to just remember how function works without understanding the underlaying operation behind it. its bugging me.

[@RickBeacham]

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort If compareFunction(a, b) returns less than 0, sort a to an index lower than b (i.e. a comes first). If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behavior, thus, not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this. If compareFunction(a, b) returns greater than 0, sort b to an index lower than a (i.e. b comes first). compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned, then the sort order is undefined.

[@ssk7690]

Man you've got no idea how much you help a person in need. God bless you!

[@uwspstar2008]

thanks for sharing this one!

[@Hi-Five-Ghost]

Brad is the GOAT 🐐 . I’m taking an online bootcamp and they totally skipped over the ES5 and prior. Which makes sense as to how it works. They just dove straight into ES6 which doesn’t make sense unless you know the older syntax, for me anyway. I love you brad!!!

[@GmoneyMozart]

1 dislike from a diehard for loop fan.

[@TraversyMedia]

haha. I have 2 people that dislike EVERY video I put out right around the same time. It could be a video showing how to cure cancer with Angular and those 2 dislikes will be there before 2k views. It's like clockwork..

[@makasilelo1226]

Sorry, did you read my comment on your last post on GO? If not, I think you have to. It's about piracy

[@TraversyMedia]

Can you email me? [e-mail]

[@cowboy8038]

I sent him an email in case you haven't yet, good catch, that is seriously bullshit.

[@makasilelo1226]

Thanks

[@sammorpeth5367]

This is such a great video for people like myself who feel like they've plateaued recently. I finally feel like I'm starting to get a grip on arrow functions thanks to this. Cheers!

[@m.h.9927]

Boom ! Boom ! i yet not started watching ,, but know You are a Bless for Poorer People ,,, sorry , i have to go to watch .

[@rubenverster250]

Hey Brad. I've been watching you since the start of my career, when I was a Junior. The time has come where I have outgrown your content. I appreciate all the help and tutorials you've given me over the years. Now you are helping me in explaining these topics to other Juniors :) Thank you

[@rayc3103]

Can anyone explain to me why the sort returns 1, else -1? How would that result in the companies being sorted?

[@shahrukhtramboo6781]

stackoverflow.com/questions/1494713/how-does-javascripts-sort-work

[@javabeanz8549]

If you look back a very long way, I believe it is coming from Assembly language, where you do a COMPARE command, and there are three possible results, basically -1, 0 and 1, so you JUMP LESS THAN, JUMP EQUAL TO or JUMP GREATER THAN... We are only using two here, because the two values must be swapped in one case, and not in the other, while if they are equal, it doesn't matter if they are swapped or not.

[@SlimTrackStar]

here we are in 2020 and this makes so much sense. I needed this to understand the .map method, but revisiting the other methods definitely helped everything mesh beautifully. this was absolutely necessary. I can appreciate how concise this was with very simple and consistent examples. thank you. i definitely liked and subscribed.

[@gafroninja]

"Sorry for the yelling upstairs". Actually thought it was my baby waking up, upstairs lol >

[@littlealienclub3471]

This video really helped it click for me. I’m using it in conjunction with the eloquent JavaScript book which at times is amazing and at times brain-frying. I feel I have a much better grasp on these array methods after watching this. Will definitely be buying the udemy course

[@bagaskara1567]

Arrow function is less readable, need more time to understand it

[@JustSujC]

Definitely, but it is technically more concise.

[@eddev]

Personally I read it just the same, I use em enough it’s just as easy understandable

[@dazelmann6589]

Or need more practice to get head around. Get on to work...

[@lets_lvl_up]

Yeah at first it's kinda wierd, but now i think they actually make it more readable by getting rid of the clutter. Hope i don't get bashed for saying this, but they remind my of the pathonic ways xD.

[@stevenedwards9262]

Its a lot more readable, you dont have to declare that the callback is a function, you dont need pointless parentheses around singular parameters/args, and for single-line functions you dont need to specify youre returning something when its already obvious you are. You just need to spend an afternoon sitting down and breaking the pieces down in your head

[@lfrommtl]

thank you so much! im doing a bootcamp and got tripped up on this. pretty sure they explained it exactly like you did but the pacing was too fast for me to grasp the concepts. this really really helped. thanks again!

[@ahmedraza5340]

Watching from pakistan

[@kantyDarius]

From Argentina here

[@hamadyahmed5379]

From Mauritania here

[@gulbadsha]

Programming has no boundries :)

[@awaisfiaz8186]

programming is same no matter where you are so get over it lol :D

[@khoanguyen3044]

Vietnam here

[@aliakeel]

thanks so much! i like how you used for loops to explain what all the methods really do.

[@Steve_360]

you said lets find ages squared but used square root function, haha

[@ninopotskhoraia5373]

I never hear any banging or yelling which you are apologizing for in your videos. You have nothing to apologize for sir. Your content and teaching style is unmatched with. You have taught me so much. Thank you for your awesome videos.

[@petixclancoc225]

square != Math.sqrt lol 🤣🤣🤣

[@greencopycat]

Math.pow

[@anythingtech5711]

Brad, Thank You So Much! 🙏 Through your explanation and walkthrough, I was finally able to understand the structure, what it does, the return, and how to console log-it. I was also able to get it through JS to an innerHTML. This type of video is perfect for beginners like me, I am sure, I'm not the only one! 🙏

[@djotigergaming1838]

nice explanation but you forget to mention that some of those methods are not supported in older browsers , you say its gonna make you look better programmer , that's wrong , whats true is : "its gonna make you look that guy who don't know how to support all customers platforms". spsly when you mention arrow functions -cause the basic support for arrow functions start in : chrome 45+ , firefox 22+ , opera 32+ ,safari 10+ , android webview 45+ , internet explorer : "not yet" ! - Trailing comma in parameters in functions arrow support start in : chrome 58+ , firefox 52+ ,opera 45+ ,android webview 58+

[@kanonbolt100]

If you're supporting older browsers right off the top of your head instead of using tools like babel that compile your ES6 and above. I guarantee you, you're not getting as much done as you think you are.

[@perc-ai]

you need to use babel, es6 is industry standard now

[@ihusiexpress4938]

this worked as well : const finTech = companies.filter((comp) => comp.category.match("Fintech")); console.log(finTech); top Brad

[@discovertheworld12444]

Thanks a lot for the clear explanation of the High Order Functions... surely a great help.

[@Fahdie]

Half way through your video and your tutorial is absolutely magical. THANK YOU!

[@wudao88]

Incredibly clear explanation. Thank you.

[@Marder1989]

one of the best tutorials i have seen for programming so far, very nice job

[@rayna463]

wow this is all starting to click in my brain!! Not too long ago i was convinced it would never make sense to me but i can feel the lightbulbs starting to go off :) thank you for the vids

[@ivansmrcek291]

Amazingly encapsulated solutions into single-liner definitions of power! Great job Brad!

[@aleejunaid]

I have a very complex JSON object and I can already see how much help these functions can offer.

[@edhead76]

Your lessons are so straight forward. Thank you for not overcomplicating simple concepts. I don't know why array functions keep messing with my head but this helps SOOO MUCH!

[@makidelidaki9262]

I love you. I've read tutorials about higher-order functions before and never got them. Thanks so much for this. That will be a boon for my exercises on edabit. Can't believe I finally understand map,filter,sort,reduce and what they're used for + how. So helpful

[@muhsinkhalif3621]

Thank you for making it look so simple! God Bless you for this wonderful tutorial!

[@samrey8134]

How can you not Love this Guy.... Thank you. Dude.

[@kopilkaiser8991]

I understood the topic of Higher Order Functions because of you. Thank you brother for putting the effort in explaining, thus give insights and passing your exceptional knowledge to the public. My support is for you

[@AyiFahmi460]

Just following this course, once again thankyou so much mr Brad for all your effort.

[@matt.mattox3518]

Thanks for this video. It's crazy how much this helped compared to some online sources that I am paying for.

[@dark9y8]

I'm done with .filter method, and I know completely understand it. Will check others now. :) Thanks so much Brad!

[@codito7388]

What i like most is that you show and the old way!

[@Algebrodadio]

This video was so good, I shared it with some of my co-workers who are trying to learn javascript.

[@ahmedehab6750]

You are a lifesaver, I'm currently learning and I had so much confusion about this topic and your explanation made it crystal clear

[@sm3dev]

This helped me so much! Specifically, I needed to use filter() but couldn’t get it right. I was stumped in an app I’m building for school. Thanks for making these so easy to understand! Seriously

[@jasonwelsh417]

I love your channel. Thank you so much for all the great content. I bought your JavaScript course and I can't wait to go through it for a refresher on some things as well as new learning!

[@fredhair]

I'm coming from a C++ background now learning full stack as I'd like to get a job in it and wow you guys using JS don't know you're born! After writing a multiplatform openGL and C++ renderer and trying to set up environments and build systems I don't ever want to hear any web developer complain their job is difficult! C++ is becoming better nowadays but still.. JS is so nice and clean and easy to use even writing predicates for these array algorithms seem way easier lol.

[@annalizziemarino]

This tutorial is great. I've learned so much from everything I've watched of yours. Thank you so much!

[@scottvarieur890]

This has got to be the best video explaining higher level JS functions. There are so many potential pitfalls when you learn this stuff, but you covered just about everything in an extremely concise way.

[@onepiec3]

this is amazing. you make it so much more easy to understand than a lot of websites I've checked them out on. I love how you're always so clear and concise with your words and you've helped me grow a lot with webdev. thanks!!

[@brunoqgalvao1]

Brad, congratulations on your videos, it has been helping me a lot these past few months. What you are doing here has immense value and i hope you are getting the reward for it. Trying to do my part, i have just become a patron. It's not much but hopefully soon i'll be able to give out more. Thank you very much.

[@harshgupta2699]

Hands down! Great explanation. All the concepts relating to higher order functions are now absolutely clear! Thanks to you!

[@gehanadel3616]

this video is fantastic I learn so much from watching this video, appreciate your effort

[@alifhasanshahOfficial]

Finally I understand those method. Thanks a lot Brad ..