DEV Community

loading...
Cover image for 13 useful JavaScript array tips and tricks you should know

13 useful JavaScript array tips and tricks you should know

Duomly on October 21, 2019

This article was originally published at: https://www.blog.duomly.com/13-useful-javascript-array-tips-and-tricks-you-should-know/ An array is one ...
pic
Editor guide
Collapse
mc100s profile image
Maxence Bouret

Thanks for the article :)

Tip 11 (Reversing an array) is also modifying the original array colors.

Instead, if I don't want to change the original array, I would write:

var colors = ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"];
var reversedColors = [...colors].reverse();
console.log(reversedColors); // returns ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"]
Enter fullscreen mode Exit fullscreen mode
Collapse
catalin560 profile image
catalin560

or colors.slice().reverse() works too

Collapse
willsmart profile image
willsmart

Tip 10 has an off-by-one error going on: there's no need to add one to colors.length since it's already one more than the highest index.

Great tips though! I didn't know about the array.length = 0 one and will use it for sure.

Collapse
duomly profile image
Duomly Author

Thanks for suggestion

Collapse
gabrielpinheiro profile image
gabriel-pinheiro

Great article!
I love how you mentioned the arr.length = 0;, I've seen obj.arr = []; so many times, messing up references is just a matter of time with the latter.

A nice addition would be to change the 8. Find the intersection of two arrays to do it the other way around as Array.prototype.includes is linear and Set.prototype.has is constant, for larger lists a big difference can be noticed:

let firstValues = [...new Set(numOne)];
let duplicatedValues = numTwo.filter(item => firstValues.has(item));

instead of:

var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
Collapse
perpetualwar profile image
Srđan Međo

You spread Set into an array, so array won't have has method on it. Small bug on your side.

Collapse
gabrielpinheiro profile image
gabriel-pinheiro

Oh you're right, first line should have been:

let firstValues = new Set(numOne);

Thanks for pointing that up

Collapse
andrewbogushevich profile image
Andrew Bogushevich
numOne = [1, 2]
numTwo = [1, 3, 1]

// original
let duplicatedValues = [new Set(numOne)].filter(item => numTwo.includes(item));
// [1]

// your
let firstValues = new Set(numOne);
duplicatedValues = numTwo.filter(item => firstValues.has(item));
// [1, 1]

to solve this we need either to create second Set or to use includes instead of has

Collapse
adamculpepper profile image
Adam Culpepper

and need to be converted to regular double quotes (") or single quotes so your code can be copy/pasted into the console without having to convert them all.

the character you used for the spread operator (…) needs to be converted to three periods (.) for copy/paste purposes. I think it's also important to note in the article that the spread operator is ES6.

grammar/word errors:
"Get random value form the array" title > needs to be "from array"

Great article, thanks for posting! :)

Collapse
moreurgentjest profile image
more-urgent-jest

yes, I totally agree that if you are going to have code in your article make sure that it's valid!!! that's more important than it being pretty. you could use codepen or similar to ensure it actually runs.

Collapse
sakhmedbayev profile image
sakhmedbayev

Thanks for the post! I need, however, to point out that the solution for finding an intersection array (#8) not quite correct. Try to find an intersection array for these two arrays using your solution:

[1, 1, 1, 2, 1, 3, 4, 2, 2, 2, 2, 2, 2, 2, 2, 4, 5, 6],
[2, 2, 2, 1, 1, 6, 7, 8, 2, 2, 2, 2]

the output is [ 1, 2, 6 ] when actually it supposed to be [ 1, 1, 2, 2, 2, 2, 2, 2, 2, 6 ] (sorted version)

The Set does not work well to find a proper intersection array.

Collapse
premierboy profile image
Iamndeleva

Hello ...i want to learn js can someone share with me a tutorial or course

Collapse
hankoj profile image
Jacob Hanko

You will be able to find all different kinds of tutorials out there for JavaScript, ranging from books to video courses. Here are a few to get you started, but I suggest finding a tutorial that complements your own personal learning style.

Collapse
premierboy profile image
Collapse
duomly profile image
Duomly Author

We have interactive and building real projects courses, you can take a look if you like that (we can give discounts for dev.to) :)

Collapse
premierboy profile image
Iamndeleva

Where are the link for rhe courses

Thread Thread
duomly profile image
Duomly Author

You can find Duomly on duomly.com

Collapse
leandrolink profile image
leandrolink

Try freecodecamp.org/ . I really enjoyed that course!

Collapse
rahulkumarlal22 profile image
Collapse
clarity89 profile image
Alex K.

Nice list!

Point 3 is more useful when applied to array-like objects, e.g. NodeList, since you can transform them into arrays and map the items to new values at the same time.

Collapse
vijo profile image
vijo

Thanks for the article. Very useful tips in the article as well as the comments!

One query - If i have a two dimensional array (m rows and n columns) - what is the fastest way to create another array with retaining just some selected columns and dropping the others?

Collapse
zsivm profile image
zsivm

Nice post, very useful tips and tricks, thanks. I have found a typo in paragraph 3 in the last part. You wrote: ... user .from() method, instead of use.
In point 9 first row you wrote defined, in point 10 title there is form

Collapse
duomly profile image
Duomly Author

Thanks for pointing, going to fix :)

Collapse
zsivm profile image
zsivm

Hi. Sorry for pointing them out individually. I just reached the end. I found another typo in the conclusion, 13 tips and tricks with, instead od which. You are welcome, would like to read from you again :)

Collapse
darryl profile image
Darryl Young

Great article. Thanks for sharing.

Collapse
alin11 profile image
Ali Nazari

Hi. Great article. I'm willing to translate it into Persian and share it on my blog. I hope you are content :)

Collapse
duomly profile image
Duomly Author

Of course! If you will give link to author duomly.com we are very happy to accept that :)

Collapse
alin11 profile image
Ali Nazari

Thanks. Here is the link. I mentioned you at the bottom of article:

ditty.ir/posts/12-useful-javascrip...

Thread Thread
duomly profile image
Duomly Author

Cool, It's nice we inspired you :)

Collapse
nanouchkaya profile image
Claudine

Great article! My favorite trick : array.length = 0 💯

Collapse
duomly profile image
Duomly Author

Thanks Claudine, we are very happy you like our article! :)

Collapse
minhpn profile image
MinhPN

Great!

Collapse
nithish_13 profile image
Nithish

Hello everyone,, I want answer for this problem in JavaScript.
const a = 'abcdefghijklmnopqrstuvwxyz'
//Result
['abc','def','ghi',....]
Can someone explain!??
Thanks in Advance 🙂🙂

Collapse
flyingduck92 profile image
Sekti W

it looks like slicing the output into 3chars-of string

Collapse
nithish_13 profile image
Nithish

S,, finally I did that... ;)

Collapse
mnepita profile image
Martin Nepita

Thanks for the article, this is just what I needed !

Collapse
k_penguin_sato profile image
K-Sato

Awesom!!

Collapse
duomly profile image
Collapse
silvodesigns profile image
Kevin Silvestre

As a student , I love this article. My fav cheat sheet .

Collapse
kamranf35792861 profile image
Kamran Fazal

Wonderful and Informative.

Keep it up to share your knowledge and tricks.

Thank you.

Collapse
basem98 profile image
Basem Mostafa Mahmoud

That was a very helpful article. I did not know before that I could empty an array by assigning its length to zero! Thanks for the article!

Collapse
dasarianudeep profile image
anudeepdasari

Tip 3 is awesome. Never knew till the time that Array.from takes a second argument a function that would replicate .map functionality. Good One !!!

Collapse
chridas profile image
Chridas

Thanks for the article! Really helpful!

Collapse
nicholasferrer profile image
Nicholas Ferrer

Nice article! I loved the fifth tip

Collapse
michaeljsalo profile image
Michael J Salo

It's interesting - but what would be a use case for such an object?

{0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

It's still indexed like an array, but is no longer a real array.

Collapse
deepaksisodiya profile image
Deepak Sisodiya

This is a very good article. well written article.

Collapse
akmur profile image
Collapse
duomly profile image
Collapse
afozbek profile image
Abdullah Furkan Özbek

arr.filter(Boolean) is amazing 😯
Thanks for the article

Collapse
lefroxx profile image
leFroxx

I didn't know about the second parameter of Array.from() as well, but I don't actually see a reason to use it instead of Array.map() in any situation.

Collapse
michaeljsalo profile image
Michael J Salo

MDN says, "Array.from(obj, mapFn, thisArg) has the same result as Array.from(obj).map(mapFn, thisArg), except that it does not create an intermediate array." This suggests it might perform a little better, in extreme cases.

Collapse
jamesthomson profile image
James Thomson

FYI, #4 "Empty an array" will create a holey array. It's better to assign the value a new empty array [] rather than mutate the length. More on element kinds: v8.dev/blog/elements-kinds

Collapse
antonioyon profile image
Antonio Yon

Why would setting the length of an array to 0 make it holey? I would understand if you were to set the length to a value greater than its content, it would create a HOLEY_ELEMENTS. Truncating should not have that same problem.

I would think the engine would continue to optimize for a PACKED_ELEMENTS Array if length were set to a value less than its current content, including 0.

Collapse
raisinrahman profile image
Collapse
miteshkamat27 profile image