Useful JS array methods to level up your game - Part 2

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.
Let's dive in. 💪

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.

👀 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 😛). 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. 🔥
arrayHell.flat(Infinity)
It works! (👍 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! 👋

Thank you for reading. ✌️ More articles coming up on JavaScript.