fbpx

Manipulate JavaScript Array Like A Pro

pexels-steve-johnson-13625772

ARTICLE SUMMARY

Using arrays is one of the most utilised functions when programming. In this article, we break down how to manipulate this data structure efficiently.

In JavaScript, you cannot escape doing a lot of work with arrays. In this article, we will take a deep dive into how you can work with arrays efficiently and with little code to get the desired result you want.

1. Array.map()

This function is useful if you want to perform an operation on all the data stored in your array and return a new array. For example:

javascript array

2. Array.filter()

What the function filter does is, it returns a new array based on the condition given in a function. For example, if we wanted to return all salaries greater than 80k what will that look like?

javascript array

3. Array.reduce()

This function executes an array on each data in the array, in order, to pass the return value from the previous calculations to the next calculation. The final result is normally a single value. An initial value can be passed in to start, however, the default is 0.

This might be complex to understand, however, let’s simplify this with an example of summing elements in an array:

javascript array

This function starts with an 

  • initial value of 0, at this point previous value is 0 and current value is 10
  • So 0+10 = 10, 10 is now previousValue, then 10 + currentValue(20) = 30. 
  • 30 (as result from the previous computation) will now be the previous value.
  • Then 30 + 30 = 60. Then 60 + 40 = 100 

If no initial value is given then the first iteration is not run instead it starts computing from the index of 10 and 20 in the array. What happens when you change the initial value to be another number greater than 0?

We just looked at three popular Higher-Order Functions in JavaScript. A “higher-order function” is a function that accepts functions as parameters and/or returns a function. This is an important concept to know in JavaScript.

Other cool things you can do to manipulate JavaScript Arrays are:

4. Spread operator 

The spread operator is used to unpack an array, The spread operator allows you to spread out elements of an iterable object such as an array. The annotation looks like this `…`. This can also be confused with the rest parameter, which collects all remaining arguments of a function into an array.

Example of Spread Operator 

In this example it doesn’t also matter where the spread operator is, it can be at the front ([…odd, 2,4,6]), middle ([2,4, …odd, 6]) or end ([2,4,6 …odd]).

javascript array

Example of Rest Parameter:

javascript array

More ideas on what you can do with the Spread Operator 

Combining two arrays 

javascript array

Copying an Array 

javascript array

Moving Array Data From One to Another

javascript array

5. Array Destructuring 

Array destructuring is another ES6 JavaScript functionality that allows values in an array to be accessed easily. Normally we try to access array values with their index numbers, but with destructuring, we can do this in a much cleaner way.

javascript array

The variables a, b and c will take the values of the first, second, and third elements of the returned array. You might be thinking, what if the data we destructure is less or more than the variables names we provided in the square brackets? Let’s look at those scenarios.

Destructuring with more items in the array:

javascript array

Destructuring for fewer items in the array:

javascript array

Handling ambiguity for the items in the array:

javascript array

This brings us to the end of this article. I encourage you to practice these functions in a JavaScript playground like JSFiddle. See what results you get. Happy Coding 🙂 
 

RELATED ARTICLES

Regression analysis is one of the most fundamental concepts in machine learning. This article briefly introduces linear and logistic regression and how to implement them...
JavaScript is a powerful and prevalent programming language for building dynamic web applications. This article delves into common issues encountered by developers in JavaScript and...
This article provides practical strategies and insights to help you cope if you are suddenly laid off.
In this article, we will explore some common JavaScript problems and provide practical solutions to overcome them.