Become a MASTER of Javascript Arrays

Javascript Array Essential Methods

Arrays are the most commonly used data structure in any language. As we already know they’re special variables that can hold more than one value at a time. Javascript Arrays are no different, although, an essential thing to know about them is that Javascript Arrays are special kinds of Objects. Now, because of this, you can have variables of different types in the same Array. For instance,

arr[0] = cars; //cars = ['Bentley', 'Mustang']
arr[1] = Date.now;
arr[2] = aFunction;

Besides primitive data types, you can also store objects, functions, even arrays inside of an Array.

Now, there’s a lot of stuff you can do with Javascript Arrays using a wide range of methods they offer. However, the following 4 methods are absolutely essential to know.

General Overview:

Okay, before we get into the code, let me first explain to you with the help of this beautiful picture, how these methods work, and to be honest, this image explains it all.

  • .map( ),

    Input: Array of Squares.

    Output: Array of Circles.

    Process: We are mapping or transforming the array elements into something different based on our desired output. Do notice that the length of the array remains the same. The 3 squares are transformed into 3 circles.

  • .filter( ),

    Input: Array of 1 Red and 2 Blue Squares.

    Output: Array of Squares(with only those elements that satisfy the filtering criterion).

    Process: We want all the blue squares. So, we filter out the red ones to get the two blue squares as the output. Do notice that the output is still an array.

  • reduce( ),

    Input: Differently-shaped elements.

    Output: One element(calculated based on the reducer function).

    Process: Reduces all the shapes to form one single element. All the 3 differently-shaped elements are joined, finally.

  • find( ),

    Input: Array of 1 Red, 1 Green, and 1 Blue Square.

    Output: One element(that satisfies the condition).

    Process: We want to find a green-colored square. Do notice that the output is a single element, in this case, a green square.

Now let's dive into the code.

Implementation/Examples:

1) REDUCE

const myArray = [1, 2, 3, 4];  

const product = (x, y) => x * y; //Reducer Function

const result = arr.reduce(product, 1); //result = 24  

The .reduce() method accepts a reducer function as its first parameter and an initial value as the second parameter, and it gives us a single(reduced) value in the end.

In the abovementioned example, we want to find the product of the given array by multiplying all the elements present in the array. We start with an initial value of 1, then traverse the array and keep on multiplying the next element as we see it, 1*1*2*3*4 = 24.

2) FIND

const myArray = [1, 2, 3, 4];
 
const isEven = x => x % 2 === 0; //Matcher Function

const result = myArray.find(isEven); //result = 2 

The .find() method accepts a matcher function and returns the first element for which this matcher function returns true. Here, therefore, only the first even number found in the entire array is returned, which happens to be 2(even though there was another even number present, namely, 4).

Reduce and Find, might or might not return a scenario depending on what is stored inside the array. However, you can assume that they will return us an element in the array and not the actual array.

3) MAP

const myArray = [1, 2, 3, 4]; 

const square = x => x * x; //Mapping Function

const result = myArray.map(square); //result = [1, 4, 9, 16]

The .map() method accepts a mapping function and applies this function to each of the elements present in the original array. As a result, a new array(with the same length as the original array) is returned with the resultant values, in this case, the square of each element.

4) FILTER

const myArray = [1, 2, 3, 4]; 

const isEven = x => x % 2 === 0; //Filter Function

const result = myArray.filter(isEven); // result = [2, 4]

The .filter() method accepts a filter function and creates a new array by applying the filter function to each of the element of the original array and filtering out all the elements that do not satisfy the filter function, keeping only the elements in the new array those return true for the filter function. In this case, a new array is returned with all the even numbers found in the original array, namely, 2 and 4.

Map and Filter, always return a new array, therefore, your original array will never be corrupted.


That’s it! You’re a master of Javascript Arrays now! Thanks for reading this article. Now, have fun with your new-found powers! Ciao!

Reference:

https://www.30secondsofcode.org/