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,

*For instance,*

**you can have variables of different types in the same Array.**```
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/

## Create your profile

## Only paid subscribers can comment on this post

Log in## Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to log in.