fbpx

EXPLORE OUR

Manipulate JavaScript Array Like A Pro TEST

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:

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?

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:

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]).

Example of Rest Parameter:

More ideas on what you can do with the Spread Operator 

Combining two arrays 

Copying an Array 

Moving Array Data From One to Another

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.

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:

Destructuring for fewer items in the array:

Handling ambiguity for the items in the 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 🙂 
 

CAREER BUILDING RESOURCES
FOLLOW US ON SOCIAL
RELATED CONTENT
RELATED CATEGORIES
JOIN OUR COMMUNITY

RELATED ARTICLES

The best solution to gaining practical experience in the field of tech, while earning some money, and building new connections is to get an internship....
If we are to build technology that is conscious of different people's needs, abilities, and cultures, then we need diverse teams and inclusive workplaces. Here...
Blockchain Technology is the bread and butter of most of the innovative technology trends we see in our mainstream media today. NFTs, Web3, The MetaVerse...
Transitioning into tech as a beginner? Or looking for a new coding language to learn? Sheekha Singh shares with us why Python is so popular...