Useful JS array methods to level up your game!
Tags: javascript, webdev, beginners, tutorial
Published: 2020-08-02 16:43:01

Hi there!

Today, I'll be sharing some useful JS array methods that I use daily. These methods will surely level up your game as a beginner. :muscle: Let's dive into those now.

## 1. map()
According to MDN:
> The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Basically, `map()` is used for data transformation. Remember this!
Let's understand `map()` with an example.

```
// I want squares and cubes of all these numbers
const numbers = [1, 2, 3, 4, 5]

// using forEach()
const squares = []
numbers.forEach(number => squares.push(number**2))
// Output: [1, 4, 9, 16, 25]

// using map()
const cubes = numbers.map(number => number**3)
// Output: [1, 8, 27, 64, 125]
```

In the example, you can see how easy it was to calculate `cubes` as compared to `squares`. 
`map()` takes a function(here it's an arrow function) as its argument. That function will be executed for every element of `numbers` array and result of that function will be stored in the new array `cubes`.

You can also pass some optional arguments. The order for arguments is:
1. `currentValue` - The value in the array for which function is being executed. In our case, its `number`.
2. `index` - Index of the `currentValue`.
3. `array` - Array on which map is being run. In our case, it's `numbers`.
4. `this` - Value to be used as `this` when executing this function.


## 2. filter()
According to MDN:
> The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Basically, you provide a function that is run against every element in the given array. If that function evaluates to `true`, that element is pushed to the new array else not.
Let's understand 'filter()' with an example:

```
// Club entry list
const persons = [
  {
    name : 'Mark',
    age : 19,
    gender: 'M'
  },
  {
    name : 'Jenny',
    age : 17,
    gender: 'F'
  },
  {
    name : 'Ben',
    age : 15,
    gender: 'M'
  },
  {
    name : 'Julia',
    age : 23,
    gender: 'O'
  },
]


const adultsOnlyList = persons.filter(person => person.age > 18)
// Mark and Julia

const noMenList = persons.filter(person => person.gender !== 'M' && person.age > 18)
// Julia
```
 
In the above example, some people want to enter a club but we cannot allow anyone that is below 18. So, we generate a `adultsOnlyList` with the help of `filter()` function. **Note that function inside `filter()` should always return a `Boolean`.** 
Club has a special day too when males are not allowed. So, we generate another list `noMenList` by extending our previous function. Ultimately, if your function returns a `Boolean`, it will work.

You can also pass some optional arguments. Those arguments are same as mentioned in `map()`.


## 3. reduce()
According to MDN:
>  The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

Basically, as the name suggests it will perform some operation on your array and reduce it to a single value. For example, operations like sum, average, factorial, etc. can be easily done by `reduce()`.
Let's understand `reduce()` with an example:

```
// What's the total for these items?
const shoppingCart = [
  {
    name : 'Potato',
    price: 40,
  },
  {
    name : 'Tomato',
    price: 60
  },
  {
    name: 'Bread',
    price: 21
  }
]

const total = shoppingCart.reduce((sum, item) => sum + item.price, 0)
// 121
```

People find `reduce()` hard at the first look. :fearful: Don't be sacred. Let's break it down.
I've passed two arguments to the `reduce()` function. The first one is a function that we want to execute for each element. 
`(sum, item) => sum + item.price`
That function has two arguments `sum` and `item`. `sum` will store our value after every iteration and `item` will always have the element we are currently iterating on.
What about the second argument? So, the second argument is nothing but `sum`s' initial value. If you don't pass it, then `shoppingCart`'s first element will be stored in `sum` and looping will start from the second element.


## 4. find() and findIndex()
Let's take these two methods together because they are very similar. :eyes:

#### find()
According to MDN:
> The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

Basically, you pass a function to `find()` and whichever element evaluates to `true` will be returned. If none passes, you'll get `undefined`.
Let's understand this with an example:

```
// I want to buy something for $120
const accounts = [
  {
    name : 'Citi Bank',
    balance: 100
  },
  {
    name : 'Bank of America',
    balance: 150
  },
  {
    name: 'Capital One',
    balance: 170
  }
]


const account = accounts.find(account => account.balance > 120)
// { balance: 150, name: "Bank of America" }
```

So, I have multiple accounts and I am looking for an account that has at least $120 balance. Though, there are two accounts that satisfy this condition but `find()` returns the first element that passes the test.

#### findIndex()
According to MDN:
> The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

Basically, the same thing as `find()`. **Only difference is: It returns the index instead of the element. Returns -1 instead of `undefined`, if no element passes the test.**

Let's run the same example with `findIndex()`:

```
const accountIndex = accounts.findIndex(account => account.balance > 120)
// Output: 1
```
Nothing to explain, I guess. Pretty straightforward.

That's all folks! :wave:

[Part 2](https://dev.to/thesanjeevsharma/useful-js-array-methods-to-level-up-your-game-part-2-156j) of useful JS array methods. It has some uncommon ones. :wink:

Hope you learned something. :v: