20+ Must Know Array Methods That Almost Nobody Knows

We are all used to array methods like .map, .forEach, etc, but that is just the tip of the iceberg when it comes to useful array methods. In this video I cover over 20 amazing new array methods that you have probably never heard of.
📚 Materials/References:
Sets Video: • Another 5 Must Know Ja...
Sets Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:27 - #1
02:15 - #2-3
03:16 - #4
04:11 - #5
04:38 - #6
05:11 - #7-9
06:18 - #10-11
07:35 - #12-13
09:00 - #14
09:50 - #15-21
#ArrayMethods #WDS #JavaScript

[@FunctionGermany]

flatMap is NOT like .flat() .map(), it's like .map() .flat(), very different!!

[@WebDevSimplified]

Good point. I messed up when talking about this.

[@ehm-wg8pd]

they should call it matFlap

[@xiaozhenxiang]

​@@ehm-wg8pdflatMap = flat the map

[@JokeryEU]

also flatMap only goes 1 lvl deep

[@VladBurlutsky]

Always read the ECMAScript specs, that's what all hardcore JS programmers use! The Array.prototype.flatMap and Array.prototype.flat methods in JavaScript are quite similar in their functionality, but they have some key differences: Functionality: flatMap: This method first maps each element using a mapping function, then flattens the result into a new array. It's essentially a combination of the map and flat methods. flat: This method simply flattens an array up to a specified depth and does not perform any mapping. Mapping Function (mapperFunction): flatMap: Requires a mapperFunction as its first argument. This function is called on every element of the array, and the results are then flattened. flat: Does not take a mapping function. It only flattens the array based on the specified depth. Depth Specification: flatMap: Implicitly flattens the array only one level deep. It does not accept a depth argument. flat: Accepts an optional depth argument that determines the depth level to which the array should be flattened. If depth is not provided, the default is one level deep. Error Handling (TypeError): flatMap: Throws a TypeError if the provided mapperFunction is not callable. flat: There's no such error condition specifically related to the function's argument since it doesn't require a function as an argument. Depth Handling in flat: flat: Contains additional steps to handle the depth parameter. If depth is undefined, it is treated as 1, and if it is less than 0 after conversion to an integer, it is set to 0.@@WebDevSimplified

[@user-je5kv3uh2t]

Group by & differences were totally new to me. Thanks for the video mate

[@sarveshdhiman3993]

In a single video I learn lot of things with proper explanation and with so ease. Thanks 🙏

[@davidj6755]

I’m excited about the set theory operators. I hope that eventually gets full support across major browsers.

[@tropicaljupiter]

Every day we stray further from lodash’s light

[@quanghungpham269]

I used most of these method quite frequently, they are super useful. My fav one is reduce(), it's very useful when you want to reduce the array to a value and then use that value, also I got headache many times from using it :)

[@harmez7]

Kyle, thank you for speaking so clearly. Im not that good at English but I can completely understand you, that's why I subbed to here years ago.

[@rdubb77]

It’s true, his pacing and diction is very good.

[@ahmadfahim6467]

Thanks man, especially the flapmap and explaining array mutations

[@psydook]

been waiting for this forever. Thank you man

[@user-tw6tr8rb6n]

Bro you really helped a lot. Thank you!

[@magnanova]

It's about time they added those Set difference/intersection methods!

[@aundefined]

Great video! Keep it up 💯

[@NiceChange]

Great video. Kyle makes JS fun and interesting...not an easy thing to do. 😊

[@ajedamilola8146]

I wish I had seen this video sooner. This groupBy would have saved me lots of time. I had to do this manually.

[@catto88]

Wow, didn't knew about .with (this one is very useful!), .groupBy, start/end arguments of .fill, also didn't knew you can add argument like depth to .flat and about Set method, tysm!

[@industrydzina]

Important to note that the .fill method behaves differently when you fill the array with objects(including arrays), where it actually fills the array with a REFERENCE to the original object, so that if you perform a mutation on any of the objects in this array, it will perform the same mutation on all the elements in the array. Was stumped by this until ChatGPT helped point me to the docs on MDN...

[@Ebiko]

That's why fill is regularly used with a lambda to generate unique objects.

[@felixkiptoo421]

You really did simplified my flatMap() understanding

[@ukaszzbrozek6470]

I know them all except the set methods. Thanks for a great reminder. When using shift and unshift we should remember that is a very non-performant action because the array need to recalculate all indexes. We should avoid using them. To be honest knowing about at method didn’t change that I am still using array[array.length - 1] syntax. It is such strong muscle memory that I write that without thinking. XD

[@ryanlinnane]

The shift methods are good for interviews for quickly representing a deck.

[@FragmentJS]

hey, did it come into your mind of building hair gel products lately? great tutorials always

[@roebucksruin]

An important distinction of .fill(), it fills the array with a static value. If you’re filling with an object, it’s the exact same object in memory. I tried to use it with the array constructor to convert an integer into an array of objects with a length of said integer, and every index would change on edit.

[@DarrenJohn10X]

.at() got all the excited press, meanwhile .with() was virtually ignored. Thanks Kyle for talking about both together.

[@jischkebd]

you explain these concepts better than the majority of the teachers out there!

[@0luckyluca0]

amazing timestaps, i always wanted to skip to the topic "6" :D

[@shgysk8zer0]

You had me a bit concerned including groupBy() and the Set methods... I was worried the spec had changed yet again. Yes, I knew all of them. I've written polyfills for them, which is why I was worried specs had changed.

[@yellowbonbon1]

Thank you for this sharing very helpful. Just want to add this, toReversed, toSorted and toSpliced create a new array. However, they do not do deep clone. In some use case, React could not detect the change if the change is within an object of object. It will be better to note this. "create a new array" somehow could cause confusion.

[@Wakedaddy87]

The one thing I felt like was missing from this video is that you usually make sure to provide example situations in when you might use the code, and more importantly why. Otherwise, learned a lot of cool new stuff I will try to find a use for. Thanks!

[@MichaelCampbell01]

A fun exercise is to implement all these methods in terms of `reduce()`.

[@GuildOfCalamity]

Kyle's hair should have its own channel.

[@sureshanandsekar4384]

sir could you please tell me where is the link for that cheet sheet , am ur new subscriber . you are my guru. and getting each time inspired by ur video ....

[@Thassalocracy]

It's unfortunate that a lot of these methods are not used more due to the predominance of React in the JavaScript world. React wants to go the way of purely functional programming, so mutating functions like pop, shift, unshift are a big no-no. But if somehow JavaScript could be used in data science then these methods could really come in handy. But first, someone has to come up with handy data science packages like numpy, pandas, scikit 😅 PS: I actually did post a comment earlier but deleted it because I made some mistakes and didn't want to create unneeded controversy 😅

[@daleryanaldover6545]

good thing we don't use react in our projects

[@user-ck7ts3ml1g]

@@daleryanaldover6545 What is used?

[@sethwright2518]

These new functions (most of them at least) are actually good for React specifically because they don't mutate the originals arrays.. so it works better for functional programming 🎉

[@dave6012]

Shift and unshift are how I do BFS when writing algos in JS

[@aliampichelmilan3345]

Nice vidio crack!, greetings!

[@BokoMoko65]

Curiously, it's note supported in Node.js. Although it's very easy to implement function groupBy(list, keyGetter) { return list.reduce((ac, curr) => { const key = keyGetter(curr); ac[key] = ac[key] || []; ac[key].push(curr); return ac; }, {}); }

[@michaelharrington5860]

Alternative: function groupBy(array, key) { return array.reduce((groupedItems, item) => { const keyValue = item[key]; if (!groupedItems[keyValue]) { groupedItems[keyValue] = []; } groupedItems[keyValue].push(item); return groupedItems; }, {}); } let groupedByName = groupBy(people, 'name'); console.log(groupedByName);

[@cm3462]

Fantastic

[@raygan3]

Will it be automatically polyfilles if used eq in react?

[@cadekachelmeier7251]

I use .fill when I just want to map over a range of numbers. Mapping over new Array(x) doesn't work since there aren't any keys. But you can do new Array(x).fill(0).map((val, index) => index)

[@whosdr]

Array.from({length:x}) or [...Array(x)] are also viable solutions.

[@vergil_389]

Hello Kyle. Will you avail your course on offer (on a discounted rate) for Christmas. or Before Christmas. 🤞🤞🤞

[@meqdadmoradi]

Please make a video about blobs and array buffer

[@drvp-bl3xd]

Groupby is super useful

[@BokoMoko65]

the with method is kind of superfluous because we can already use the destructuring technique. Like, putting something at the beginning let inTheBeginning = [ newThing, ... people] let inTheEnd = [ ... people, newThing] But if the idea is to insert some value somewhere in the middle of the array, the with is handy indeed

[@stevendu06]

There is a catch though, this method involves more overhead because it creates a new array and has to copy each element from the original array to the new one. The larger the original array, the more time and memory this operation requires. For small arrays or situations where immutability is a concern (i.e., you do not want to modify the original array), spreading can be useful despite its slightly lower performance. However, for larger arrays or when performance is critical, and modifying the original array is acceptable, using push is typically faster and more memory-efficient.

[@codeguy11]

"20+ Must Know Array Methods That Almost Nobody Knows": 💀 Me using VSCode's autocomplete (and sometimes MDN docs) to browse and explore all JavaScript APIs and features: *Look what they need to mimic a fraction of our power*

[@leandrohendrix6487]

I can't use 'with method' in NodeJs. Should I Install some nodeJs package for use it?

[@andrillaf]

It’s good to be a developer on Mac😎

[@stanmarsh9458]

groupBy is top!

[@daedalus5070]

Prime made a comment recently about some of these and I kind of agree... we need a toMap, toFilter that does mutate the original array. Just to keep JS consistently inconsistent. 😉

[@shivan2418]

I use lodash for most of this functionality.

[@SamuelKarani]

I think you made an error equating flatMap with flat(infinity).map. I agree with @FunctionGermany in the comments

[@amitd1927]

How about performance of each function

[@ahmed37551]

i think you have done enough intros kyle. just keep in the bio.

[@user-mw4jj6vj4r]

Hi everyone, i have node js version 21, but i cant use this methods in vscode. How can i enable this methods?

[@nidhijha7081]

Only if i would have watched this video one day before, my interview could have been much better 😢

[@BokoMoko65]

Is there a method to "flat" an object? That is, to make a deep copy of the entire object made of other objects?

[@benas989989]

Old way: const copy = JSON.parse(JSON.stringify(foo)) New way: const copy = structuredClone(foo)

[@VisualArtRonny]

Apparently my face is buried inside MDN docs, since I knew all of them including the last Set methods

[@mecozir]

part yield function set key specify task

[@prafullkumar6369]

amazon-chime-sdk-component-library-react Please create a video on this

[@vaishnomatabhaktamandali2000]

In bathroom rn but listening to lectures

[@DarrenJohn10X]

.fill() ignores in sparse arrays... just so folks are aware! So you can't build an array of 5 "*" with this: let a = Array(5).fill("*") You would need to first map to a non-undefined value every element you want star-ified.

[@21Kikoshi]

As a youtuber i wonder if youtubers ever watch themselves at x2 or with no sound to see what its like

[@Pareshbpatel]

Nice one, Kyle. Thanks. {2023-12-14}

[@BauldyBoys]

CSS starts calling everything start and end Javascript starts using left and right. Classic.

[@chrisjohanesen]

And then there’s “findLast” 🙄

[@michaelharrington5860]

`groupBy` alternative for node.js users: function groupBy(array, key) { return array.reduce((groupedItems, item) => { const keyValue = item[key]; if (!groupedItems[keyValue]) { groupedItems[keyValue] = []; } groupedItems[keyValue].push(item); return groupedItems; }, {}); } let groupedByName = groupBy(people, 'name'); console.log(groupedByName);

[@cristianjuarez1086]

that is not an alternative

[@turolretar]

“Let’s see Paul Allen’s array methods”

[@sleeplessowl543]

array instanceof Array

[@shirakuyanai4095]

First time here within 1 minute.

[@skywizard3319]

I would really love if you started naming the chapters instead of numbering them

[@nomadshiba]

epic

[@amuuuinjured]

knew all of them except last experimental methods...

[@krzysztofrozbicki1776]

The main question is - are they faster than simple for() loop ? I have been playing with the js loops lately and it seems that for array of 10 millions random numbers the for() loop is much faster than: filter, find, forEach, map and reduce. And by faster i mean like 10x times faster. The only method that was faster was the build in sort() method. That worked better even then insertion sort/ merge sort/ or quick sort Algorithm made in JS for loop - i am not sure but i suspect this is because of V8 chromium engine which uses C++

[@catalintudorciurte309]

There are some things to unpack here. A for loop is inlined, while the methods call the given function every single time. Also, a for loop gives you the oportunity to mutate the old array, while most of the other functions create a new array every single time

[@cbbcbb6803]

What did people do when there was just array?

[@LawJolla]

This video taught me that someone still uses a PC. Wild.

[@elpolodiablo5486]

Are you a caveman ?

[@user-ik7rp8qz5g]

Having reduceRight makes it sound like default reduce is wrong

[@bronzekoala9141]

Nice, but who th thought "unshift" was a good name for that???

[@Anonymous____________A721]

388th view

[@mecozir]

wait general fixed job dom

[@LetrixAR]

The namings for some of these methods are really confusing

[@vijaykv555]

First View

[@jasonlough6640]

There should be an opposite to .flat(). flat() destroys the structure. What if we were to specify a structure and give an array, like: Array.inflate(arr, structure) where arr = [5,11,87,2] structure = ['age', weight'] which outputs [ { age: 5, weight: 11}, { age: 87, weight: 2}, }

[@whosdr]

function inflate( values, structure ) { return Object.values( Object.groupBy( values, (e,i)=>Math.floor( i/structure.length ) ) ).map( e => Object.fromEntries( e.map( (v,i) => [structure[i],v] ) ) ); }

[@bryson2662]

Most shocking referral, Kyle uses windows

[@mangadi3859]

oh sh- i have to change my .sort() to .toSorted()?

[@piyushaggarwal5207]

Personal Notes, don't see - Object.groupBy(), Map.groupBy(), Array.with(1, 2), Array.at(-1), Array.fill(1, 1, 3), Array.toReversed(), Array.toSorted(), Array.toSpliced(), Array.flat(2), Array.findLast(), Array.reduceRight()

[@SoreBrain]

Saved me some time, ty

[@piyushaggarwal5207]

@@SoreBrain I have written down according to me. Skipping things.

[@SoreBrain]

@@piyushaggarwal5207 I realized you left some out, coincidentally the ones I also don't care about (yet) or already knew well. Thanks for the edit and letting me know tho!

[@CoryTheSimmons]

reduce is king. Everything else is just a lodash helper.

[@akshaykommu4524]

2nd view

[@olegkravchenko9655]

С*ка, до слёз! Даже плюсик поставил от нахлыва чуйств :D

[@foxcryptoboss]

something is very off with the camera and sound sync. looks scary.

[@genyklemberg]

Who cares what you are talking about, I already heard about it and still don't use it 😢 I think I need to visit coding interviews to practice that more often😂

[@montebont]

Solution looking for a problem...

[@HoangTran-dm9sf]

😂

[@user-xf8mc8bd2u]

Is there a new way to get the last item in the array instead of the old array[array.length - 1]?

[@Popo-pd3ps]

Just simply use array.at(-1)

[@AGSTRANGERTunisianAuthor]

If almost nobody knows them then probably you don't need to know them

[@yadusolparterre]

How else am I going to flex in front of my colleagues

[@vodafoneuser1690]

As demonstrated in this video lol

[@angrytvrobot6130]

I'm sure there will be a few people who see this and go, "oh that will make my bit of code much easier!" There's probably a use case, or they wouldn't exist.

[@TaufeeqAhmed-fq9hq]

Nice motto 👏👏

[@VskiDevs]

He said they’re just as useful 🫴🏿

[@mecozir]

post none if code expire

[@sevgiligencler]

Very noob

[@ravisankarp61]

Please explain a bit slowly, you are explaining like you are running a sprint.

[@windubitably]

You can slow the video down. I think his pacing is great.

[@dasten123]

I really don't see the point of `array.at`.. even for negative indexes, I would prefer `array[array.length - x]` or am I too old-fashioned? :o

[@soniablanche5672]

it saves you a line of code to store the array in a variable example: const array = getArrayFromApiCall(); array[array.length - 1] vs getArrayFromApiCall().at(-1);

[@dasten123]

@@soniablanche5672 Ahh!! Yes that makes sense! Thank you, I feel so much better now, haha :D

[@mecozir]

wait general fixed job dom