Unleash the Power of Your Data: 6 ES6 Array Functions You Need to Know 🚀
Tags: webdev, javascript, beginners, tutorial
Published: 2023-02-06 02:43:41

New day, new daily article! Yesterday we talked about some custom React hooks, but **today it is time to talk about arrays**.

Yeah, I know, it might sound boring but trust me, it is not. Today I will show you 6 ES6 methods we can find in arrays that **you might not know and that are really useful.**

Obviously, you can do the same without these methods, but... hey, this simplifies your life (*and it is cool*), so **why not give them a try?**

Well, time to start!


## 🔍 Map
This is a classic. You have probably used this one, but... I had to talk about it just in case.

The `.map()` function **creates a new array by manipulating** every element in the original array and returning a new array with the results.

This is useful for transforming arrays in an easier way to work with or visualize.

As always, here is an example:

{% embed https://gist.github.com/NauCode/3295d41a2c2044a6df2affac174f0ae0 %}

By the way, since `map` builds a new array, calling it without using the returned array is an anti-pattern; use [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) or [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) instead.

🔗 [More knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)


## 💡 Filter
This is really cool. Instead of "transforming" the items like in the map function, here, we filter the array (*as its name says*). Basically, it creates a new array with all elements that pass the test implemented by the provider function. So yeah, **it filters out any elements in the original array that don't meet a specific condition**.

Now, one example:

{% embed https://gist.github.com/NauCode/bcc4d5b512a0884b9937284f85176ebd %}

In that example, we are filtering out the numbers that are not even in the array.

🔗 [More knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)


## 🔢 Reduce
Now one I really like. The `.reduce()` function. I**t reduces the array to a single value** by iterating through the array and applying a provided function to each element. This function is often used to sum up, all the elements in an array or to find the max or min value.

{% embed https://gist.github.com/NauCode/1a7195b5f85386ad1cf82005c95665e6 %}

In this one, I am just getting the sum of all the numbers in the array. That easy.

🔗 [More knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)


## 💬 Find
This one is also used a lot. The `.find()` function **returns the first element in the array that satisfies the provided testing function**.

It is awesome for searching for a specific element in an array.

{% embed https://gist.github.com/NauCode/df6180c12de541b77b18380bfbf2986b %}

In this one, we find the first even number in an array.

🔗 [More knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)


## 🔃 Every & Some
`.every()` and `.some()` are similar to `.filter()` since they test elements in an array against a provided function.

So, what is the difference? Well, `.every()` returns `true` if **all the elements** in the array pass that test. And as you would expect, `.some()` returns `true` if **at least one element** passes the test.

Let's see an example using `.every()` to check if all elements in an array are even numbers:

{% embed https://gist.github.com/NauCode/ce0267abffbe01513440de58e32eb1d7 %}

And now, let's check an example of using `.some()` to check if there is at least one odd number in an array:

{% embed https://gist.github.com/NauCode/29d1aee1a9ba2907cb790658d3f5dc4a %}

🔗 More knowledge about [every](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every) and [some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

* * * * *

So, that is it! Well, not really. There are more helpful functions there, but I didn't want to create a long post. With this article, I wanted to show you that there are excellent functions that you can always find in the docs. **But there are more!** For example, you could check the [flat function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat).

But no worries, I have more exciting articles coming soon. I publish one every day, so... **make sure to follow** if you want these little JS pills every day!


## 🌎 Let's Connect!
-   My [Twitter: @thenaubit](https://twitter.com/thenaubit)
-   [My Substack](https://coderpreneurs.substack.com/) (here I publish more in-depth articles)