13 useful JavaScript array tips and tricks you should know

by | Aug 5, 2019 | News, Quick help

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”, “orange”, “grape”, “apple”];

 

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

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”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

3. Map array without .map()

Probably everyone knows .map() method of arrays, but there is a different solution which 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”, “Monica”, “Martha”]

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 array’s length to 0, and that’s it!

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

 

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 well-known spread operator (…).

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

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”, “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”, “fish”, “potato”, “tomato”, “cucumber”]

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, will get the array with values which 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.includes(item));
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”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length + 1)))]

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”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();

console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

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 of 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!

Thank you for reading.

This article was provided by our teammate Anna.

Start learning now!

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

What skills you need to be a good developer?

Every profession has special requirements; for example, to be a doctor, you have to know biology, finish medical university, but besides the hard skills, as a doctor, you have to be emphatic. As a teacher, you need to have qualifications to work with kids, but you...

Angular tutorial

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

React.js performance tutorial

React.js performance tutorial

Building applications sometimes can be a bit challenging, especially when we need to build a fast and good-quality application. These times it can be necessary, especially when search engines can give bonus SEO points for faster working apps, and it can help us to...

Vue.js tutorial: How to create Vue.js app in 5 minutes?

Vue.js tutorial: How to create Vue.js app in 5 minutes?

Vue.js is getting more and more popular, becoming a meaning competitor to frameworks like Angular or React.js. As a beginner-friendly front-end framework, it successfully conquers the hearts of junior front-end developers and people who just started to learn front-end...

8 CSS image filters with code examples

8 CSS image filters with code examples

Using images, we can create an atmosphere, arouse happiness, smile, sadness, or any different emotion. With images, we can show a lot, and tell a lot as well; that’s why pictures are so widely used in the websites and applications. Designers take care of how users...

CSS Grid tutorial

CSS Grid tutorial

When we build front-end, always we need to create a structure of our page, and very often, we need to create any grid. We can position elements in a few ways. For example, in the previous article I showed you how we could do it via flexbox. So, today, I would like to...

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This