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