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 :)
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
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.
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 🎉
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.
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.
@@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!
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.
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. 😉
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}, }
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);
