13 useful JavaScript array tips

and tricks you should know

Duomly Oct 21 ・5 min read

#javascript #beginners #webdev #programming

An array is one of the most common concepts of Javascript,

which gives us a lot of possibilities to work with data stored
inside. Taking into consideration that array is one of the
most basic topics in Javascript which you learn about at the
beginning of your programming path, in this article, I would
like to show you a few tricks which you may not know about
and which may be very helpful in coding! Let’s get started.

1. Remove duplicates from an array

It’s a very popular interview question about Javascript

arrays, how to extract the unique values from Javascript
array. Here is a quick and easy solution for this problem, you
can use a new Set() for this purpose. And I would like to
show you two possible ways to do it, one with .from()
method and second with spread operator (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “oran

// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “wa
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “w

Easy, right?

2. Replace the specific value in an array

Sometimes it’s necessary to replace a specific value in the

array while creating code, and there is a nice short method
to do it which you might not know yet. For this, we may use
.splice(start, value to remove, valueToAdd) and pass there all
three parameters specifying where we want to start
modification, how many values we want to change and the
new values.

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “oran

fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “waterme
3. Map array without .map()

Probably everyone knows .map() method of arrays, but

there is a different solution that may be used to get a similar
effect and very clean code as well. We can user .from()
method for this purpose.

var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]

var friendsNames = Array.from(friends, ({name}) => name);

console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria

4. Empty an array

Do you have an array full of elements but you need to clean

it for any purpose, and you don’t want to remove items one
by one? It’s very simple to do it in one line of code. To empty
an array, you need to set an array’s length to 0, and that’s it!

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “oran

fruits.length = 0;
console.log(fruits); // returns []

5. Convert array to an object

It happens that we have an array, but for some purpose, we

need an object with this data, and the fastest way to convert
the array into an object is to use a well-known spread
operator (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”];

var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange

6. Fulfill array with data

There are some situations when we create an array, and we

would like to fill it with some data, or we need an array with
the same values, and in this case .fill() method comes with
an easy and clean solution.

var newArray = new Array(10).fill(“1”);

console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”,

7. Merge arrays
Do you know how to merge arrays into one array not using
.concat() method? There is a simple way to merge any
amount of arrays into one in one line of code. As you
probably realized already spread operator (…) is pretty
useful while working with arrays and it’s the same in this
case.

var fruits = [“apple”, “banana”, “orange”];

var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”,

8. Find the intersection of two arrays

It’s also one of the most popular challenges which you can
face on any Javascript interview because it shows if you can
use array methods and what is your logic. To find the
intersection of two arrays, we will use one of the previously
shown methods in this article, to make sure that values in
the array we are checking are not duplicated and we will use
.filter method and .includes method. As a result, we will get
the array with values that were presented in both arrays.
Check the code:

var numOne = [0, 2, 4, 6, 8, 8];

var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.include
console.log(duplicatedValues); // returns [2, 4, 6]
9. Remove falsy values from an array

At first, let’s defined falsy values. In Javascript, falsy values

are false, 0, „”, null, NaN, undefined. Now we can find out
how to remove this kind of values from our array. To
achieve this, we are going to use the .filter() method.

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

10. Get random value form the array

Sometimes we need to select a value from the array

randomly. To create it in an easy, fast, and short way and
keep our code clean we can get a random index number
according to the array length. Let’s see the code:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “oran

var randomColor = colors[(Math.floor(Math.random() * (colors.length)))

11. Reversing an array

When we need to flip our array there is no need to create it

through the complicated loops and functions, there is an
easy array method which does it all for us, and with one line
of code, we may have our array reversed. Let’s check it:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “oran

var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “o

12. .lastIndexOf() method

In Javascript, there is an interesting method which allows

finding the index of the last occurrence of the given element.
For example, if our array has duplicated values, we can find
the position of the last occurrence of it. Let’s see the code
example:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];

var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

13. Sum all the values in the array

Another challenge which happens very often during

Javascript Engineer interviews. Nothing scary comes here; it
can be solved using .reduce method in one line of code. Let’s
check out the code:
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

Conclusion

In this article, I presented you 13 tricks and tips with can

help you with coding and keep your code short and clean.
Also, remember there are lots of different tricks which you
may use in Javascript worth exploring, not only about
arrays but also different data types. I hope you like the
solutions provided in the article, and you will use them to
improve your development process.

Have a nice coding!

Duomly + FOLLOW
We believe everyone can learn how t o code, so we are making learning fun and easy!
@duomly duomly www.duomly.com
Add to the discussion

PREVIEW SUBMIT

Oct 21
willsmart

Tip 10 has an off-by-one error going on: t here's no need to add one to colors.length since it 's
already one more t han t he highest index.

Great t ips t hough! I didn't know about t he array.length = 0 one and will use it for sure.

5 REPLY

 
Oct 21
Duomly

Thanks for suggest ion

3 REPLY

Oct 21
gabriel-pinheiro

Great art icle!

I love how you ment ioned t he arr.length = 0; , I've seen obj.arr = []; so many t imes,
messing up references is just a mat t er of t ime wit h t he lat t er.

A nice addit ion would be to change t he 8. Find the intersection of two arrays to do it t he
ot her way around as Array.prototype.includes is linear and Set.prototype.has is const ant , for
larger list s a big difference can be not iced:

let firstValues = [...new Set(numOne)];

let duplicatedValues = numTwo.filter(item => firstValues.has(item));

inst ead of:

 var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));

3 REPLY

Oct 21
Alex K.

Nice list !

Point 3 is more useful when applied to array-like object s, e.g. NodeList , since you can t ransform
t hem into arrays and map t he it ems to new values at t he same t ime.

2 REPLY

Oct 21
Adam Culpepper

“ and ” need to be convert ed to regular double quot es (") or single quot es so your code can be
copy/past ed into t he console wit hout having to convert t hem all.

t he charact er you used for t he spread operator (…) needs to be convert ed to t hree periods (.) for
copy/past e purposes. I t hink it 's also import ant to not e in t he art icle t hat t he spread operator is
ES6.

grammar/word errors:
"Get random value form t he array" t it le > needs to be "from array"

Great art icle, t hanks for post ing! :)

2 REPLY

Oct 21
Maxence Bouret

Thanks for t he art icle :)

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

Inst ead, if I don't want to change t he original array, I would writ e:

 var colors = ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black",
var reversedColors = [...colors].reverse();
console.log(reversedColors); // returns ["blue", "white", "green", "navy", "pink", "purple", "o

1 REPLY

Oct 21
premierboy

Hello ...i want to learn js can someone share wit h me a t utorial or course

2 REPLY

 
Oct 21
Jacob Hanko

You will be able to find all different kinds of t utorials out t here for JavaScript , ranging from
books to video courses. Here are a few to get you st art ed, but I suggest finding a t utorial t hat
complement s your own personal learning st yle.

Javascript .info
10 Websit es to Learn JavaScript for Beginners
Learn JS

4 REPLY

 
Oct 21
premierboy

Thanks

1 REPLY

Oct 21
minhpn76

Great !

2 REPLY

 
 Oct 21
Kevin Silvestre

As a st udent , I love t his art icle. My fav cheat sheet .

2 REPLY

Oct 21
K-Sato

Awesom!!

2 REPLY

Oct 21
Nicholas Ferrer

Nice art icle! I loved t he fift h t ip

2 REPLY

code of conduct - report abuse

Classic DEV Post from May 10

If you could change one thing about learning to

code, what would it be?
Ali Spittel

If you could wave a magic wand and make your biggest challenge when you were
lear...
109 91

Another Post You Might Like

Regex Cheat Sheet

 Emma Wedekind ✨
A high-level overview of Regex
2840 49

Another Post You Might Like

Live Share Integration with Peacock and VS Code

John Papa

Peacock now has integration with the Live Share VS Code extension.
53 3

A Refactoring Breakdown
Jennifer Lyn Parsons - Oct 21

Animated headline, Placeholder page, Code highlighting | Module

Monday 60
Tyler Warnock - Oct 22

Cypress vs.....
Ben Halpern - Oct 21

How to use `import/export` in Node without Babel

Corey Cleary - Oct 21
Home About Privacy Policy Terms of Use Contact Code of Conduct

DEV Community copyright 2016 - 2019  🔥