20+ Must Know Array Methods That Almost Nobody Knows
Вставка
- Опубліковано 31 лип 2024
- 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
flatMap is NOT like .flat() .map(), it's like .map() .flat(), very different!!
Good point. I messed up when talking about this.
they should call it matFlap
@@ehm-wg8pdflatMap = flat the map
also flatMap only goes 1 lvl deep
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
Group by & differences were totally new to me. Thanks for the video mate
In a single video I learn lot of things with proper explanation and with so ease. Thanks 🙏
I’m excited about the set theory operators. I hope that eventually gets full support across major browsers.
Every day we stray further from lodash’s light
been waiting for this forever. Thank you man
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 :)
Thanks man, especially the flapmap and explaining array mutations
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.
It’s true, his pacing and diction is very good.
Bro you really helped a lot. Thank you!
Great video. Kyle makes JS fun and interesting...not an easy thing to do. 😊
Great video! Keep it up 💯
It's about time they added those Set difference/intersection methods!
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!
Thanks Kyle the video is very informative
I wish I had seen this video sooner. This groupBy would have saved me lots of time. I had to do this manually.
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...
That's why fill is regularly used with a lambda to generate unique objects.
You really did simplified my flatMap() understanding
hey, did it come into your mind of building hair gel products lately? great tutorials always
you explain these concepts better than the majority of the teachers out there!
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.
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
The shift methods are good for interviews for quickly representing a deck.
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.
amazing timestaps, i always wanted to skip to the topic "6" :D
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!
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.
Kyle's hair should have its own channel.
.at() got all the excited press, meanwhile .with() was virtually ignored.
Thanks Kyle for talking about both together.
Shift and unshift are how I do BFS when writing algos in JS
A fun exercise is to implement all these methods in terms of `reduce()`.
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;
}, {});
}
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);
Nice vidio crack!, greetings!
Will it be automatically polyfilles if used eq in react?
Fantastic
Please make a video about blobs and array buffer
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. 😉
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 ....
Hi everyone, i have node js version 21, but i cant use this methods in vscode. How can i enable this methods?
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 😅
good thing we don't use react in our projects
@@daleryanaldover6545 What is used?
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 🎉
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
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)
Array.from({length:x}) or [...Array(x)] are also viable solutions.
Groupby is super useful
I can't use 'with method' in NodeJs. Should I Install some nodeJs package for use it?
"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*
How about performance of each function
It’s good to be a developer on Mac😎
Hello Kyle.
Will you avail your course on offer (on a discounted rate) for Christmas. or Before Christmas. 🤞🤞🤞
i think you have done enough intros kyle. just keep in the bio.
I use lodash for most of this functionality.
Only if i would have watched this video one day before, my interview could have been much better 😢
groupBy is top!
Apparently my face is buried inside MDN docs, since I knew all of them including the last Set methods
Is there a method to "flat" an object? That is, to make a deep copy of the entire object made of other objects?
Old way:
const copy = JSON.parse(JSON.stringify(foo))
New way:
const copy = structuredClone(foo)
part yield function set key specify task
I think you made an error equating flatMap with flat(infinity).map. I agree with @FunctionGermany in the comments
amazon-chime-sdk-component-library-react Please create a video on this
What did people do when there was just array?
array instanceof Array
As a youtuber i wonder if youtubers ever watch themselves at x2 or with no sound to see what its like
.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.
knew all of them except last experimental methods...
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++
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
I would really love if you started naming the chapters instead of numbering them
Having reduceRight makes it sound like default reduce is wrong
`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);
that is not an alternative
CSS starts calling everything start and end Javascript starts using left and right. Classic.
And then there’s “findLast” 🙄
Nice one, Kyle. Thanks.
{2023-12-14}
The namings for some of these methods are really confusing
In bathroom rn but listening to lectures
Nice, but who th thought "unshift" was a good name for that???
epic
This video taught me that someone still uses a PC. Wild.
Are you a caveman ?
First time here within 1 minute.
“Let’s see Paul Allen’s array methods”
wait general fixed job dom
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},
}
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] )
)
);
}
388th view
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()
Saved me some time, ty
@@SoreBrain I have written down according to me. Skipping things.
@@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!
oh sh- i have to change my .sort() to .toSorted()?
reduce is king. Everything else is just a lodash helper.
something is very off with the camera and sound sync. looks scary.
С*ка, до слёз! Даже плюсик поставил от нахлыва чуйств :D
First View
2nd view
Most shocking referral, Kyle uses windows
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😂
If almost nobody knows them then probably you don't need to know them
How else am I going to flex in front of my colleagues
As demonstrated in this video lol
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.
Nice motto 👏👏
He said they’re just as useful 🫴🏿
Solution looking for a problem...
😂
post none if code expire
Very noob
Please explain a bit slowly, you are explaining like you are running a sprint.
You can slow the video down. I think his pacing is great.
Is there a new way to get the last item in the array instead of the old array[array.length - 1]?
Just simply use array.at(-1)
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
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);
@@soniablanche5672 Ahh!! Yes that makes sense! Thank you, I feel so much better now, haha :D
wait general fixed job dom