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
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 :)
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.
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...
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.
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.
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
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!
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 ....
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 😅
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 🎉
@@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!
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)
"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*
.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.
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
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}, }
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😂
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.
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);
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
In a single video I learn lot of things with proper explanation and with so ease. Thanks 🙏
.at() got all the excited press, meanwhile .with() was virtually ignored.
Thanks Kyle for talking about both together.
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 :)
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
Group by & differences were totally new to me. Thanks for the video mate
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.
It's about time they added those Set difference/intersection methods!
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.
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.
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 wish I had seen this video sooner. This groupBy would have saved me lots of time. I had to do this manually.
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.
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.
hey, did it come into your mind of building hair gel products lately? great tutorials always
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!
Kyle's hair should have its own channel.
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. 😉
you explain these concepts better than the majority of the teachers out there!
amazing timestaps, i always wanted to skip to the topic "6" :D
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 ....
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 🎉
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);
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!
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
A fun exercise is to implement all these methods in terms of `reduce()`.
Great video. Kyle makes JS fun and interesting...not an easy thing to do. 😊
Thanks man, especially the flapmap and explaining array mutations
Bro you really helped a lot. Thank you!
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.
You really did simplified my flatMap() understanding
Shift and unshift are how I do BFS when writing algos in JS
Hello Kyle.
Will you avail your course on offer (on a discounted rate) for Christmas. or Before Christmas. 🤞🤞🤞
Thanks Kyle the video is very informative
been waiting for this forever. Thank you man
"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*
Groupby is super useful
Please make a video about blobs and array buffer
.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.
Only if i would have watched this video one day before, my interview could have been much better 😢
groupBy is top!
I can't use 'with method' in NodeJs. Should I Install some nodeJs package for use it?
i think you have done enough intros kyle. just keep in the bio.
It’s good to be a developer on Mac😎
Will it be automatically polyfilles if used eq in react?
Great video! Keep it up 💯
I use lodash for most of this functionality.
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)
I would really love if you started naming the chapters instead of numbering them
amazon-chime-sdk-component-library-react Please create a video on this
I think you made an error equating flatMap with flat(infinity).map. I agree with @FunctionGermany in the comments
As a youtuber i wonder if youtubers ever watch themselves at x2 or with no sound to see what its like
Apparently my face is buried inside MDN docs, since I knew all of them including the last Set methods
part yield function set key specify task
CSS starts calling everything start and end Javascript starts using left and right. Classic.
And then there’s “findLast” 🙄
`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
How about performance of each function
What did people do when there was just array?
Hi everyone, i have node js version 21, but i cant use this methods in vscode. How can i enable this 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
array instanceof Array
knew all of them except last experimental methods...
First time here within 1 minute.
Nice vidio crack!, greetings!
Nice one, Kyle. Thanks.
{2023-12-14}
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] )
)
);
}
The namings for some of these methods are really confusing
Having reduceRight makes it sound like default reduce is wrong
Nice, but who th thought "unshift" was a good name for that???
In bathroom rn but listening to lectures
“Let’s see Paul Allen’s array methods”
Fantastic
wait general fixed job dom
reduce is king. Everything else is just a lodash helper.
This video taught me that someone still uses a PC. Wild.
Are you a caveman ?
something is very off with the camera and sound sync. looks scary.
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😂
Solution looking for a problem...
😂
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 🫴🏿
Most shocking referral, Kyle uses windows
oh sh- i have to change my .sort() to .toSorted()?
epic
С*ка, до слёз! Даже плюсик поставил от нахлыва чуйств :D
First View
post none if code expire
388th view
2nd view
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