Originally posted on my blog
In JavaScript, an array is a special variable that is used to store different elements. It has some built-in properti...
For further actions, you may consider blocking this person and/or reporting abuse
This post could be called just "15 must-know JavaScript array methods". No need the "in 2020".
I don't think these methods were really necessary in 2019, but now? Can't do without them.
I'd say they were necessary in 2018 and possibly even earlier. All these "in 2020" articles are clickbait in my opinion.
This is your opinion, and I fully respect it. However, I've added "in 2020", to just make this article easy to find for beginners. And also knowing these methods is relevant for 2020, in my opinion, because most of them introduce you to functional programming.
I see that I tend to click more on articles which have "in 2020" in the title so I guess it works since this is what I googled for :)
@idan haha that is brilliant response.
I totally agree. We hear more and more functional programming in JavaScript world. And using some of these methods makes sense because they manipulate the array in an immutable way.
I think "in 2020" is more fun. No, I'm kidding. I will update the title next week to not limit it in "2020" only. Thanks for your comment
Leave it. It helps with the SEO and, if anything, it will show first for beginners when they search for it. It's an important article and the 2020 really doesn't hurt anyone
So, I'll let the title as it is.
I personally like
includes()
for transforming a code likeif (value === 1 || value === 2 || value === 3) {...}
into
if ([1, 2, 3].includes(value)) {...}
It's a very handy method.
I think everyone know
.push()
, but recently I need.shift()
.I think I might not need double-ended dequeue, yet.
The most important things you should emphasize, IMO, are,
Some other should-know, I think, are
Great feedback. I will do a post on it later. Thanks again :).
Nice article.
But I am confused what is the difference between map and forEach? Output looks the same.
map
andforEach
technically they do the same job. They both iterate your data holden in a given array. But under the hood they are different.map
instead of manipulating the array directly, it will return a new array that contains an image of each element of the array. In the case offorEach
, it will manipulate the array directly. That's the difference.Thanks. Got it now)
map()
takes a function as argument which will run on all elements on the array (getting a transformed value), and then return a new array with all transformed values.If we run the following array through
.map(x => x + 1)
we get:forEach()
will just iterate on the array. Its return value isundefined
.Neither function will mutate the original array.
Great explanations and examples. Thanks again
Hi there, great article thanks!
I think you forgot about another method, which is similar to
reduce
: reduceRight.It's a handy method, but it's very similar to reduce except that reduceRight() start reducing the array from the right to the left. And for the case of reduce(), it starts from left to right. Thanks for your comment
Greatly appreciate your effort for creating this list. It allowed me to get a stronger grasp on the language.
I would like to mention that during my research of these methods you've brought to all of our attention, I found that the
flat()
method takes an argument for the depth, so while you are correct thatmyArr.flat()
will default to a depth of one, it's also possible to specify larger values, and even include an infinite option.For example (stolen directly from the MDN web docs):
There is one issue with the 2nd example used in the flatmap. The .flat() call at the end isn't needed, if you run the following code you will see that it evaluates to true
The issue is that if you execute
[1] * 10
it will return10
and not[10]
as you would expectThere is no issue with that code. It's just two examples.
The first is used with
flatMap()
And the second uses
flat()
andmap()
.As a side note, with
flatMap()
, themap()
function is applied first andflat()
comes after.Awesome post, thank you :). Just a curious question (junior dev), should we avoid using
forEach()
because it'll mutate the data?forEach()
is not bad, it's not like DON'T USE IT. But it depends on the use case.If you tend to functional programming, immutability and all that kind of stuff, you should use
map()
more often thanforEach()
.forEach
is preferable when you're planning to do something like logging out your data or save the data to a database. But don't change your data withforEach
.Instead, use
map()
when you plan to change or alternate your data. You can even usefilter()
,sort()
,reduce()
etc. in conjunction withmap()
. You can still do the same thing withforEach()
, but it's preferable to usemap()
because it manipulates your data in an immutable way.Some folks also say that
map()
is faster thanforEach()
regarding performance.However, in the end, It depends on what you’re trying to accomplish.
Awesome, thank you for the detailed response :)
Last one is wrong, myAwesomeArray.map(arr => arr * 10).flat()
It should be
myAwesomeArray.flat().map(arr => arr * 10)
It's not wrong. I've just followed the way
flatMap()
work. It appliesmap()
first andflat()
after. Therefore for the example offlat()
andmap()
i used the same method. But if you want too you can flat the array first.Try it in JSFiddler, Chrome, it does not work, it is wrong !!
I've not tested with your array. You're right. Thanks for your comment.
Sorry, but NOW it's incorrect - it was correct before. That's beacuse the flat part in flatMap() works differently, than .flat(1) alone, it only works for [[1], [2]], but not for [[1, 2]].
See? flatMap will put the NaN there as well, try it for yourself.
I'd say it's either a bug in the implementation or on MDN description:
and later:
Example on MDN:
Which translates to this one-liner:
and not the other way around:
Great article, love that every single one of them is to the point and clear.
One small typo to fix is for Number 13 (Includes), the output should be "true".
Sorry, for the mistyping. Now it's good :). Thanks again for reading it
Some note towards C# people who look at this and think it's the same as LINQ. It is not, as most of these methods create a new array as a result. Usually it doesn't matter as much, but consider what happens if the array is very large and you first map it to some complex and heavy calculation and only then you filter it. It may seem obvious, but only if you actually think about it, which to my shame I only did recently.
Also, shameless plus for my own library that uses ES6 iterators/generators to emulate LINQ in Javascript: siderite.dev/blog/linq-in-javascri... ;)
Nice.
The output for 13 (includes) is wrong (copy/paste demon :)).
Sorry, It's just a mistyping. Now it's good :)
Thanks again.
If I had $10 for each time something like that happened to me, I could buy my own country! :D
:) for sure, we have the same issue.
The only difference between some() and includes() is the parameter (the former is a function, the latter an element) or Did I miss something?
Yes, they are kinda similar. They both check if a given element exists in the array or not. They both return
true
orfalse
as output.includes()
takes the element to check and optionally the starting index.some()
takes a function as a parameter.hey @caused havea look into this one d7k.medium.com/js-includes-vs-some...
Why about "flat()" -> "Notice that, this method will go only one level depth."?
On MDN - "The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.".
Love it, please provide a place where we can go to practice all these skills.
I'm glad you like it. Maybe I'll create a github repo for that.
Appreciate it or you can just edit it and point a known resource to practice each.
Thanks for this post , it was very useful.
I'm glad you like it. Thanks for your comment
Love this! I needed it :D
I'm glad it helps, and thanks again for reading it.
I consider myself a pretty awesome JavaScript developer and often express that in my interaction with others but I honestly had never heard of Array.some().
It's a very handy method. It happens to everyone, we can't know everything :)
Good article, thank you!
Thanks you too for reading it.
Thanks, your post is awesome.
Lovely
Thanks for reading it.
I absolutely love this post. Thank you ❤️
I'm glad you like it. Thanks for reading it
I totally agree. I've updated the example with yours. Thanks again for your suggestion.
Thanks for the information
Thanks for reading it
great! thank you.
Thanks a lot, this is one most important post for me, I don't shame it.
Even with your example, it will be not that clear. I think the difference is made by the definition. But anyway, I will update the code with your example. Thanks
Very useful article, thanks!
I'm glad it helps. Thanks for reading it
Awesome, namesake. I was discussing with a Senior today about HOF and I just see this.
However I'm confused, what's the difference between filter() and find()
I enjoyed every bit of this, simple clear examples. Now depends on how we implement them
Hi Ibrahim, thanks for the article. One thing to note is that the implementation for sort is correct but the comments are wrong.
Thanks for reading it. Now it's correct