Banner Image
01 Nov

Useful JavaScript Array Methods for Developers

Mahipal Nehra

Top 13 useful JavaScript Array methods for developers. An array is one of the most widely recognized ideas of Javascript, which gives us plenty of potential outcomes to work with information put away inside. Mulling over that array is one of the most fundamental themes in Javascript which you find out about toward the start of your programming way.

In this article, I might want to show you a couple of stunts that you may not think about and which might be useful in coding! We should begin. 

Top 13 useful JavaScript Array Tips for Developers

Here are the top 13 useful JavaScript array methods for developers.

  • How to remove duplicates from an array 

  • How to change a particular value in an array

  • How to use Map array without .map()

  • To empty an array

  • How to convert an array to an object

  • How to fulfill an array with data

  • How to merge arrays

  • How to find the intersection of two arrays

  • How to remove falsy values from an array

  • How to get random value form the array

  • How to reverse an array

  • JavaScript's .lastIndexOf() method

  • How to sum all the values in the array

1. How to remove duplicates from an array 

It's a famous inquiry question about Javascript arrays, how to remove the exceptional qualities from Javascript array. Here is a snappy and simple answer for this issue, you can utilize another Set() for this reason. What's more, I might want to give both of you potential approaches to do it, one with .from() strategy and second with spread administrator (…).

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”]

"Top JavaScript Frameworks for Web Application Development"

2. How to change a particular value in an array

Some of the time it's important to supplant particular esteem in the array while making code, and there is a decent short strategy to do it which you probably won't know yet. For this, we may utilize .splice(start, worth to expel, valueToAdd) and go there every one of the three parameters indicating where we need to begin alteration, what number of qualities we need to change and the new qualities.

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”]

"Why JavaScript is Compulsory for Modern Web Development?"

3. How to use Map array without .map()

Most likely everybody knows .map() technique for arrays, however, there is an alternate arrangement that might be utilized to get a comparative impact and very spotless code also. We can use .from() technique for this reason.

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. To empty an array

Do you have an array brimming with components yet you have to clean it for any reason, and you would prefer not to expel things individually? It's extremely easy to do it in one line of code. To discharge an array, you have to set an array's length to 0, and that is it!

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


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

"What is an API and How it works?"

5. How to convert an array to an object

It happens that we have an array, yet for some reason, we need an article with this information, and the quickest method to change over the array into an item is to utilize a notable spread administrator (… ).

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”}

"Modern Web Development, Design and Deployment"

6. How to fulfill an array with data

There are a few circumstances when we make an array, and we might want to fill it with certain information, or we need an array with similar qualities, and for this situation .fill() strategy accompanies a simple and clean arrangement.

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

7. How to merge arrays

Do you realize how to union arrays into one array not utilizing .concat() technique? There is a basic method to consolidate any measure of arrays into one out of one line of code. As you presumably acknowledged previously spread administrator (… ) is quite valuable while working with arrays and it's the equivalent of this situation.

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”]

"Top Web Development Technologies and Frameworks"

8. How to find the intersection of two arrays

It's additionally one of the most well-known difficulties which you can look at any Javascript meet since it appears on the off chance that you can utilize array strategies and what is your rationale. To discover the convergence of two arrays, we will utilize one of the recently demonstrated strategies in this article, to ensure that qualities in the array we are checking are not copied and we will utilize .channel strategy and .incorporates technique. Subsequently, we will get the array with values that were introduced in the two 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]

"Top Web Designing Hacks and Trends for Web Development"

9. How to remove falsy values from an array

From the start, how about we characterized falsy values. In Javascript, falsy qualities are false, 0, „", invalid, NaN, unclear. Presently we can discover how to expel this sort of qualities from our array. To accomplish this, we are going to utilize the .channel() strategy.

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

10. How to get random value form the array

In some cases, we have to choose an incentive from the array arbitrarily. To make it in a simple, quick, and short way and keep our code clean we can get an irregular file number as indicated by the array length. How about we see the code:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

"What is Git and GitHub?"

11. How to reverse an array

At the point when we have to flip our array, there is no compelling reason to make it through the muddled circles and capacities, there is a simple array technique that does it for us, and with one line of code, we may have our array turned around. We should 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. JavaScript's .lastIndexOf() method

In Javascript, there is a fascinating technique that permits finding the record of the last event of the given component. For instance, if our array has copied values, we can discover the situation of its last event. How about we see the code model:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

"Developers Must Avoid These Web Development Trends"

13. How to sum all the values in the array

Another test that happens all the time during Javascript Engineer interviews. Nothing frightening comes here; it tends to be unraveled utilizing .diminish technique in one line of code. How about we look at the code:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

Summary

In this article, I exhibited you 13 deceives and tips which can assist you with coding and keep your code short and clean. Additionally, recollect there are bunches of various stunts which you may use in Javascript worth investigating, about arrays as well as various information types. I trust you like the arrangements gave in the article, and you will utilize them to improve your advancement procedure. 

"Top 5 Programming Languages for Web Development

Posted by Mahipal Nehra | Posted at 01 Nov, 2019 Web