This content originally appeared on DEV Community 👩💻👨💻 and was authored by Al - Naubit
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:
By the way, since map builds a new array, calling it without using the returned array is an anti-pattern; use forEach or for...of instead.
💡 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:
In that example, we are filtering out the numbers that are not even in the array.
🔢 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.
In this one, I am just getting the sum of all the numbers in the array. That easy.
💬 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.
In this one, we find the first even number in an array.
🔃 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:
And now, let's check an example of using .some() to check if there is at least one odd number in an array:
🔗 More knowledge about every and 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.
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
- My Substack (here I publish more in-depth articles)
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Al - Naubit
Al - Naubit | Sciencx (2023-02-06T02:43:41+00:00) Unleash the Power of Your Data: 6 ES6 Array Functions You Need to Know 🚀. Retrieved from https://www.scien.cx/2023/02/06/unleash-the-power-of-your-data-6-es6-array-functions-you-need-to-know-%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.