Useful techniques for working with arrays in JavaScript

Most applications that are developed these days require interacting with certain data sets. Processing items in collections is a common operation that you have probably come across. When working with arrays, for example, you can use the usual for loop, which looks something like this: for (var i=0; i < value.length; i++ ){} . However, it is better, nevertheless, to look at things more widely.



Suppose we need to display a list of products, and, if necessary, divide it into categories, filter, search for it, modify this list or its elements. You may need to quickly perform some calculations that will involve the elements of the list. Let's say you need to add something with something, something to multiply something. Is it possible to find in JavaScript such tools that allow solving such tasks faster and more conveniently than using the usual for loop?
')
In fact, such tools in JavaScript are available. Some of them are discussed in the material, the translation of which we present today to your attention. In particular, we are talking about the extension operator, the for…of loop, and the methods includes() , some() , every() , filter() , map() and reduce() . Here we will mainly talk about arrays, but the techniques considered here are usually suitable for working with objects of other types.

It should be noted that reviews of modern approaches to the development of JS usually include examples prepared using the switch functions. Maybe you don’t use them very often - maybe because you don’t like them, maybe because you don’t want to spend too much time learning something new, or maybe they just don’t work for you. Therefore, here, in most situations, two variants of performing the same actions will be shown: using normal functions (ES5) and using switch functions (ES6). For those who have no experience working with pointer functions, we note that pointer functions are not equivalent to function declarations and functional expressions. Do not mechanically replace one with another. In particular, this is due to the fact that in ordinary and arrow functions the keyword this behaves differently.

1. Expansion operator

The spread operator allows you to “open” arrays, substituting their elements into the place where this operator is used, instead of arrays. A similar approach has been proposed for object literals.

▍ Strengths of the extension operator

• This is a simple and fast way to “pull out” its individual elements from an array.
  
• This operator is suitable for working with array and object literals.
• This is a quick and intuitive method of working with function arguments.
• The extension operator does not take up much space in the code — it looks like three dots (...).

▍Example

Suppose you are faced with the task of listing your favorite treats without using a cycle. Using the extension operator, this is done like this:

2. Cycle for ... of

The for…of operator is designed to bypass iterated objects. It gives access to individual elements of such objects (in particular, to elements of arrays), which, for example, allows them to be modified. It can be considered a replacement for the usual for loop.

▍ Forces of the cycle for ... of

• This is an easy way to add or update collection items.
• The for…of loop allows you to perform various calculations using elements (summation, multiplication, and so on).
• It is convenient to use when you need to check any conditions.
• Using it leads to writing cleaner and more readable code.

▍Example

Suppose you have a data structure that describes the contents of the tool box and you need to show these tools. Here's how to do this with the for...of loop:

3. The method includes ()

The includes() method is used to check for the presence of a certain element in the collection, in particular, for example, a certain string in an array containing strings. This method returns true or false depending on the results of the check. Using it, it is worth considering that it is case sensitive. If, for example, the collection has a string element SCHOOL , and checking for its presence with the help of includes() is performed on the line school , the method returns false .

▍ Strengths of the includes method ()

• The includes() method is useful in creating simple data retrieval mechanisms.
• It gives the developer an intuitive way to determine if there is some data in the array.
• It is convenient to use it in conditional expressions for modifying, filtering elements, and for performing other operations.
• Its use leads to improved code readability.

▍Example

Suppose you have a garage, represented by an array with a list of cars, and you do not know if there is a car in this garage or not. In order to solve this problem, you need to write a code that allows you to check the presence of a car in the garage. Use the includes() method:

4. Method some ()

The some() method allows you to check if some of the required elements exist in the array. It, by results of check, returns true or false . It is similar to the above includes() method, except that its argument is a function, and not, for example, a regular string.

▍ Some () strengths

• The method some() allows you to check whether there is at least one of the elements of interest in the array.
• It performs a condition check using the function passed to it.
• It promotes the application of a declarative approach to programming.
• This method is convenient to use.

▍Example

Suppose you are the owner of a club, and in general, you are not interested in who exactly comes to your club. However, for some visitors the entrance to the club is closed, as they are prone to excessive consumption of alcoholic beverages, at least in the event that they find themselves in your institution, and there is no one with them who can keep an eye on them. In this case, a group of visitors can enter the club only on the condition that at least one of them is at least 18 years old. In order to automate this kind of verification, we use the some() method. Below its application is demonstrated in two versions.

ES5

ES6

5. The every () method

The every() method bypasses the array and checks each of its elements for compliance with a condition, returning true if all the elements of the array match the condition, and false otherwise. You may notice that it is similar to the some() method.

▍ Strengths of every () method

• The method every() allows you to check compliance with the condition of all elements of the array.
• Conditions can be set using functions.
• It promotes the application of a declarative approach to programming.

▍Example

Let's return to the previous example. There, you allowed visitors to the club to be under 18 years old, but someone wrote a statement to the police, after which you were in an unpleasant situation. After everything was settled, you decided that you didn’t need all this and tightened the rules for visiting the club. Now a group of visitors can enter the club only if the age of each member of the group is at least 18 years old. Like last time, we will consider the solution of the problem in two variants, but this time we will use the every() method.

ES5

ES6

6. Filter () method

The filter() method allows you to create, on the basis of a certain array, a new array containing only those elements of the original array that satisfy a given condition.

▍ Strengths of the filter () method

• The filter() method avoids modifying the original array.
• It allows you to get rid of unnecessary items.
• It improves the readability of the code.

▍Example

Suppose you need to select from the list of prices only those that are greater than or equal to 30. We will use the filter() method to solve this problem.

ES5

ES6

7. The map () method

The map() method is similar to the filter() method in that it also returns a new array. However, it is used to modify the elements of the original array.

▍ Strengths of the map () method

• The map() method avoids the need to change the elements of the original array.
• With its help it is convenient to modify the elements of the arrays.
• It improves the readability of the code.

▍Example

Suppose you have a list of products with prices. Your manager needs a new list of products whose prices have been reduced by 25%. We will use the map() method to solve this problem.

ES5

ES6

8. Method reduce ()

The reduce() method reduce() , in its simplest form, allows you to sum the elements of numeric arrays. In other words, it reduces the array to a single value. This allows you to use it to perform various calculations.

▍ Strengths of the reduce () method

• Using the reduce() method, you can calculate the sum or average value of the elements of an array.
• This method speeds up and simplifies computations.

▍Example

Suppose you need to calculate your weekly expenses that are stored in an array. We solve this problem using the reduce() method.

ES5

ES6

Results

In this article, we looked at some useful techniques that simplify and speed up the work with arrays and improve the readability of the code. If today you made your first acquaintance with these techniques, we recommend using the base you received here to learn more about them and experiment with them yourself. Sure, all this is useful to you.

Dear readers! Do you know any interesting, but not very well-known methods for working with arrays in JavaScript?