Better use of javascript Arrays

Use Array.find instead of Array.filter

Array.filter is a very useful method. Create a new matrix from another using all the elements that pass the callback parameter. As the name suggests, we must use this method to filter and get a shorter matrix.

However, if we know that our callback function can only return one element, I don't recommend it, for example, when using callback parameters filtered by a unique ID. In this case, Array.filter will return a new array containing only one element. When looking for a specific ID, our intention may be to use a unique value contained in the matrix, making this matrix useless.

Let's talk about performance. To return all elements that match the callback function, Array.filter must check the entire array. Also, let's say we have hundreds of elements that satisfy our callback parameters. Our filter matrix is ??very large.

To avoid these situations, I recommend using Array.find. It takes a callback parameter as Array.filter and returns the value of the first element that satisfies this callback. In addition, Array.find will stop as long as the element satisfies the callback. No need to browse the entire matrix. In addition, when using Array.find to find articles, we will have a clearer understanding of our intentions.

Replace Array.indexOf with Array.includes

"If you're looking for something in an array, use Array.indexOf." I remember reading this sentence in my course while learning JavaScript. There is no doubt that this sentence is completely correct!

The MDN documentation says that Array.indexOf "returns the first index that can find the given element." Therefore, if we use an index that is returned later in the code, Array.indexOf is the solution.

But what happens if we only need to know if our matrix contains values? I want to say that this seems to be a yes/no question, a boolean question. For this situation, I recommend using Array. Including it returns a boolean value.

Use Array.reduce instead of linking Array.filter and Array.map

Let's face it, Array.reduce is not easy to understand. This is real! However, if we run Array.filter, then Array.map seems to have missed something, right?

I mean, we are here to navigate the matrix twice. The first time you filter and create a shorter matrix, the second time you create a new matrix (again!) contains new values ??based on what we get from Array.filter. To get our new matrix, we use two matrix methods. Each method has its own callback function and a matrix we can't use later, the matrix created by Array.filter.

To avoid low performance on this issue, my advice is to use Array.reduce. The result is the same, the code is better! Array.reduce allows us to filter and add satisfactory elements in the accumulator. As an example, the accumulator can be a number to be added, an object to be filled, a string or matrix to connect to.

In our case, since we have been using Array.map, I recommend using Array.reduce with a matrix as the accumulator. In the example below, depending on the value of env, we add it to the accumulator or leave it as is.

Replace Array.find with Array.some

I admit that I made this mistake many times. Then, a kind friend told me to check the MDN documentation to see if there is a better way. That's the way it is: this is very similar to our Array.indexOf / Array. Includes previous cases.

In the former case, we see that Array.find needs a callback as a parameter and returns an element. If we need to know if the matrix contains values, is Array.find the best solution? Probably not because it returns a value instead of a boolean.

For this case, I recommend using Array.some that returns the necessary boolean values. Also, semantically, using Array.some highlights the fact that we don't need to find elements.

Thanks