Useful JS array methods to level up your game - Part 2
Tags: beginners, javascript, tutorial, webdev
Published: 2020-08-14 20:57:26

Hi, again!

In this article, I'll be sharing some array methods that are not so common but will surely make your lives better. Before reading this, make sure you've read [Part 1](https://dev.to/thesanjeevsharma/useful-js-array-methods-to-level-up-your-game-5am9). 
Let's dive in. :muscle:

### 1. some()
According to MDN:
> The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

Basically, connecting array and `||` operator.

Let's understand this with an example.
```
const friends = [
  {
     name: "Max",
     age: 16,
  },
  {
    name: "Jess",
    age: 17,
  },
  {
    name: "Alex",
    age: 19
  }
]

const isLegal = friends.some(person => person.age > 18);
console.log(isLegal) // true
```
You and your friends wanna go on a long drive but for that, at least one person in your group should be above 18 so he/she can drive the car. Perfect opportunity to use `some()`. We provide a testing function and it will test every element against it. If at least one element passes the test, it will return `true` else `false`.

Where you can use this? Let's say you are fetching data from different sources and want to show a loader until every request is completed. Something like this:
```
[isFetchingMessages, isFetchingFeed, isFetchingProfile].some(loading => loading)
```


### 2. every()
According to MDN:
> The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Almost same as `some()` but works like `&&`. Therefore, every element should pass the test.

Let's understand this with an example:
```
const group = [
     {
        name: 'Romeo',
        isWearingMask: true,
     },
     {
        name: 'Juliet',
        isWearingMask: true,
     },
     {
       name: 'Karen',
       isWearingMask: false,
     }
]

const isAllowed = group.every(person => person.isWearingMask)
console.log(isAllowed) // false
``` 
A group wants to buy something from a supermarket. But it's asked that every member of the group should be wearing a mask, else they won't be allowed. So, we use `every()`. Give it a function and it will test every element against it. If all elements pass the test, it will return `true`, else `false`.


### 3. fill()
According to MDN:
> The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

:eyes: Self-explanatory

Let's look at the code:
```
const numbers = [1, 2, 3, 4, 5]

const zeros = numbers.fill(0, 1, 4)
console.log(zeros) // [1, 0, 0, 0, 5]
``` 
`fill()` takes three parameters: `value`, `start index` and `end index`(exclusive). If you only provide `value` then the complete array will be filled.


### 4. flat()
According to MDN:
> The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Basically, use it when you want to get rid of nested arrays.

Let's look at the code:
```
const arrayHell = [1, [2, [3, [4, 5]]]]

const flattenedArray = arrayHell.flat(3)
console.log(flattenedArray) // [1, 2, 3, 4, 5]
```
So, just pass it a depth value, it will save you from the array hell(if that's a thing :stuck_out_tongue:). Oh yeah! If you don't pass any value it will default to 1.

I know what you're thinking. What if you don't know the depth? Well, there's a trick. :fire:
`arrayHell.flat(Infinity)`
It works! (:+1: for the tip)


### 5. flatMap()
According to MDN:
> The flatMap() method first maps each element using a mapping function, then flattens the result into a new array.

Basically, running `map()` followed by a `flat()` over an array.

Let's look at the code:
```
const numbers = [1, 2, 3, 4, 5]

const squares = numbers.map(num => [num, num ** 2]).flat()
console.log(squares) // [1, 1, 2, 4, 3, 9, 4, 16, 5, 25]

const cubes = numbers.flatMap(num => [num, num ** 3])
console.log(cubes) // [1, 1, 2, 8, 3, 27, 4, 64, 5, 125]
```
So, you have an array of numbers and you want to write each number's square and cube next to it. `squares` are calculated using `map()` and `flat()`. `cubes()` using `faltMap()`. Both approaches produce the same result but it's always useful to know that such a method exists. 


That's all folks! :wave:

Thank you for reading. :v: More articles coming up on JavaScript.