8 Must Know JavaScript Array Methods

Share
Embed
  • Published on Feb 2, 2019
  • Working with arrays in JavaScript used to be a pain with barely any support for complex array operations. Fast forward to today, though, and there are tons of amazing JavaScript array methods available to us. In this video I will be covering the 8 most important array methods in JavaScript.
    1. [0:20] - filter
    2. [1:58] - map
    3. [2:54] - find
    4. [3:42] - forEach
    5. [4:30] - some
    6. [5:50] - every
    7. [6:27] - reduce
    8. [8:51] - includes
    Twitter:
    DevSimplified
    GitHub:
    github.com/WebDevSimplified
    CodePen:
    codepen.io/WebDevSimplified

    #JavaScript #WebDevelopment #Array

Comments • 348

  • Seven
    Seven Day ago

    thanks! and is there a smart way to format the object so evenly? ;)

  • milan poudel
    milan poudel Day ago

    If I want to change the name property to something other,how can I do it?Is it possible?

  • Martin Karugaba
    Martin Karugaba 7 days ago

    Thank you so much web dev, it's really simplified?

  • priyesh patel
    priyesh patel 7 days ago

    please can you do one for strings? Great work by the way

  • Bhaskar Ks
    Bhaskar Ks 8 days ago

    👍👍👍👍👏

  • mykalimba
    mykalimba 14 days ago

    Might be useful (maybe in a follow up, or V2 video) to discuss the performance ("big O" notation) of these various methods.

  • Tony Hoang
    Tony Hoang 14 days ago

    thexvid.com/video/gM3Kl8S7x6Y/video.html

  • PK Anane
    PK Anane 14 days ago

    Less than 1 minute in and I've subbed. Excellent exposition!

  • Moses Shohet
    Moses Shohet 18 days ago

    Remarkable value for time!
    Japanese-style efficiency :)
    Amazing result!

  • 你早拜托
    你早拜托 18 days ago

    Crystal clear explanation! Subscribed! Thank you! :)

  • Purfle
    Purfle 19 days ago

    > know 6
    > forgot 1
    > never heard or used 2
    How am I still alive???

  • Sergey Ivchenko
    Sergey Ivchenko 22 days ago

    Can be added to this topic of SPREAD Operator & Destructuring assignment. And more Reduce examples

  • Dominic Victoria
    Dominic Victoria 23 days ago

    The ssd ad though.

  • Supertyp
    Supertyp 24 days ago

    You sould stop programming without ;
    Really, it's bad.

    • Web Dev Simplified
      Web Dev Simplified  24 days ago

      I have been doing it for a long time now and have had zero bugs or problems with it. It saves me time and looks cleaner in my opinion so I don't put the semi-colons. This is essentially the same as spaces vs tabs and is entirely up to personal preference.

  • veroniqe1
    veroniqe1 25 days ago

    Thanx a LOT 👍

  • Anatolii Zubenko
    Anatolii Zubenko 25 days ago +1

    Reduce -> entry point is zero by default. It is unnecessary to specify.

  • P Senthil Kumari
    P Senthil Kumari 26 days ago

    Best video ever. Simple, easy to understand. Effective presentation. Looking forward to more videos.
    Been binge watching your videos.
    Thanks a ton..

  • Dave Courtemanche
    Dave Courtemanche 27 days ago +1

    Feel like I'll be much more confident at job interviews if I can master these.
    Thanks!

  • Im Fernem Land
    Im Fernem Land 27 days ago

    Thanks!

  • Jared Becker
    Jared Becker 28 days ago

    Thank you! This was very informative

  • Paul Reichbert
    Paul Reichbert 28 days ago

    I don't get it. Anonymous functions are so much better to read and work exactly the same as lambda expressions, so why do all these hipsters use those sh**tty lambda expressions? Only because they are new in javascript?
    "Programming languages should be designed not by piling feature on top of feature, but by removing the weaknesses and restrictions that make additional features appear necessary" - IEEE Scheme Standard

    • Web Dev Simplified
      Web Dev Simplified  28 days ago

      @Paul Reichbert They would be redundant if not for context, but it is at least a more concise way to write a function.

    • Paul Reichbert
      Paul Reichbert 28 days ago

      Thanks for the clarification. I really assumed these were just lambda expressions. The fact about the context handling (the "this" pointer) makes these functions indeed usefull. Without the context benefit however I would stick to my statement that these functions are redundant to anonymous functions.

    • Web Dev Simplified
      Web Dev Simplified  28 days ago +1

      I am assumming you are referring to arrow functions which are different than a traditional function in how they are hoisted and how they handle context. Adding arrow functions removes the weakness of poorly handled context which traditional functions in javascript suffer from.

  • UNCHARTOUILLE
    UNCHARTOUILLE 28 days ago

    Yes sure these method are very handy, well kind of because most of them are VERY EXPENSIVE. For large datasets, traditional method are recommended.

  • Alexander Talavera Karslake

    Please use semicolons! This is not good practice. But great video whatsoever. Also, use strict please.

  • Alex P
    Alex P 29 days ago +3

    "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.

  • Nicolas Guillen
    Nicolas Guillen Month ago

    Thanks dude it’s gonna be useful

  • Sollace
    Sollace Month ago +4

    1:09 AAAAAAAAAAAAAAAAAAAAAAAAAAAHHHHHH WHerE aRe yoUr SemI-colOns....!???

  • Florian Salihovic
    Florian Salihovic Month ago

    I wish that any of those tutorials for people who don’t care to read the JS docs on Mozilla or Google would provide at least some information on why to use them.

  • Erick Moura
    Erick Moura Month ago

    Great content and explanation. I'm going to subscribe to learn more.

  • Sunwarul Islam
    Sunwarul Islam Month ago

    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!

    • Web Dev Simplified
      Web Dev Simplified  Month ago

      I have a full stack Node.js series that covers all these topics except Vue.

  • david grinstein
    david grinstein Month ago

    U can use includes to check multiple conditions

    [true, 1, 'active'].includes(user.status)

  • david grinstein
    david grinstein Month ago

    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())

  • Vlad
    Vlad Month ago

    Cool! Thank you a lot

  • Full Moon
    Full Moon Month ago

    So handsome 😍😍😍

  • Somappa Batikeri
    Somappa Batikeri Month ago

    Really helpful

  • Phillip Kenoyer
    Phillip Kenoyer Month ago

    Thank you.

  • Roberto Ramírez
    Roberto Ramírez Month ago

    Exelent

  • Salamander Man
    Salamander Man Month ago

    find is very useful for me wow thank you so much

  • Hyukmin Woo
    Hyukmin Woo Month ago

    so helpfull~!

  • Guillermo González

    In another tutorial I learned how to call a .js file in the browser, through a tag script and an html file. How do you do it here, without the script and without the html file?

    • Web Dev Simplified
      Web Dev Simplified  Month ago

      I actually have an HTML file that has a script tag which is loading the file I am writing in. That is how I can get it to show up in the browser.

  • jack Lin
    jack Lin Month ago

    What is the develop tool ?

  • YamiSuzume
    YamiSuzume Month ago

    I hate the lack of ;

  • code builders
    code builders Month ago

    thanks alot, super simple and unique method

  • Joc kst
    Joc kst Month ago

    please a video about javascripts fucntions types, and methods to manipulate document html. love yours videos, thanks you

  • Adolf Buttheimer
    Adolf Buttheimer Month ago +1

    Great!

  • Fluffy Doggo
    Fluffy Doggo Month ago

    I literally found out about .join a couple days ago and it blew my mind xD

  • Adam Bowers
    Adam Bowers Month ago +3

    Reduce is definitely my favourite Array method.

  • Dylan Oh
    Dylan Oh Month ago

    Thanks for all the great jobs done, you have explained them very well! Keep it going!

  • มะ ม๋า
    มะ ม๋า Month ago

    thank you

  • Tech tiger 255
    Tech tiger 255 Month ago

    7:25 - nice recovery bro

  • Caleb Prenger
    Caleb Prenger Month ago

    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.

  • Hello There
    Hello There Month ago

    Js 'devs' are like picking a bean from a pile of beans. All the same, too easy.

  • achozen shaman
    achozen shaman Month ago

    In the ‘reduce’ example, why is it that you can use the argument ‘item’ and ‘item.price?’ Why didn’t you need to use ‘items?’ I see that you can name the parameters/arguments whatsoever you want, but how did it know you were referring to the price in the ‘items’ array when you used ‘item’ and not ‘items?’ I guess because you used items.reduce, but I’m confused about the item.price.

  • ?whoami?
    ?whoami? Month ago

    thanks for sharing

  • Ryan David
    Ryan David Month ago

    Cute, smart, and a good teacher.

  • bramaning djoko susilo

    So what is difference between some and includes?

    • Web Dev Simplified
      Web Dev Simplified  Month ago

      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.

  • rahmat noori-nz
    rahmat noori-nz Month ago

    I love the way you teach.

  • Yusuf Trihantoro
    Yusuf Trihantoro Month ago

    how to modify items array, add new key "namelength" with values the length of name?

    • Toran Sharma
      Toran Sharma Month ago

      You probably use foreach too.

    • Toran Sharma
      Toran Sharma Month ago

      Map! And store the returned array over the top of the original.

  • Eduardo A. F.
    Eduardo A. F. Month ago

    The only function u need to know is reduce. With reduce you can emulate the rest.

  • Syed Iqbal Ahmed
    Syed Iqbal Ahmed Month ago

    nice ...

  • Akansha Gupta
    Akansha Gupta Month ago

    Very cool video ! Great example