Arrays are one of the most commonly used types of variables that allow you to store many consecutive values ​​in “one place”. However, when it comes to JavaScript, there is room for improvement.

In this article, we will look at three little-known techniques that can be applied when working with arrays.

1. Adding custom properties to arrays

If you use search to find the definition of an array within the JavaScript language, then most sources will claim that this type of variable value is represented as an object.

Generally speaking, a lot of the things we see in JavaScript are objects. It is fair to say that there are also “primitive” data types in the language, but their values ​​are somehow used in properties within objects.

2. Access to array elements within a loop

Since array indices can only take positive values, the counting starts from zero. Subsequently, we can use this index to access the array element at a given iteration of the loop.

ECMAScript6 introduced a way to loop through an array without using indexes, but through a new for...of loop.

The for...of loop is designed to iterate through the elements of an array without affecting the index of the element.

var ary = ["orange","apple","lychee"]; for (let item of ary)( console.log(item); ) // "orange", "apple", "lychee" For comparison: displaying item indexes in a for loop. var ary = ["orange","apple","lychee"]; for (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. The number of elements is not the dimension of the array

When we talk about the dimension of an array, we usually think that it means the number of elements stored in it. In fact, this is not entirely true - the length property is calculated depending on the maximum index of the element.

The length property is very ambiguous. To verify this, just look at the following manipulations:

Variary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

In the last example, it was enough to put the element in the fifth position, as a result of which the length of the array became equal to 6. If you think that indexes from 0 to 4 will be created automatically, you will be wrong. This can be checked using the in operator.

Variary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false

In this case, it's fair to call the ary array "sparse".

We can also manipulate the length property to trim arrays. The example below demonstrates the "loss" of the element at index 5 by decrementing the value of the length property of the ary array.

Variary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // undefined

I described only a part of the methods for working with arrays.

Here we will talk about adding, removing array elements. About flipping and sorting an array, as well as slicing, replacing and combining arrays.

Adding elements to an array.

You can use the length property to add new elements to an array:

Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; console log(myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]

This will work, because array elements are numbered from zero, and length one more. Length always equivalent index + 1, so it's very easy to add a new element to the end of the array. Strangely, you can add an element at a position that is much larger than the length of the array itself:

Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; console log(myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", undefined × 95, "Lindsey Buckingham"] console.log(myArray.length); // 100

As shown in the comments, 95 empty slots will be added and the element "Lindsey Buckingham" will be added to the end of the array. After that, we will get a length of 100. Another way to add a new element to the array is to use the method push():

Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push("Ringo Starr", "George Martin"); console log(myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]

Method push() always returns the new length of the array (5 in our case). You can add an element with splice():

Var myArray = ["acorn", "beech", "mongongo", "macadamia"]; myArray.splice(2, 0, "cashew"); // adds "cashew" into index 2 console.log(myArray); // ["acorn", "beech", "cashew", "mongongo", "macadamia"]

When the second argument is 0, this means that no element will be removed, and therefore any subsequent arguments will be added to the array at the position specified in the first argument.

Removing elements from an array

Removing an element is a little more difficult than adding it. To remove an element from the end of an array, one can use pop():

Var myArray = ["7-up", "Sprite", "Ginger Ale", "Lemonade"]; myArray.pop(); console log(myArray); // ["7-up", "Sprite", "Ginger Ale"]

Method pop() always removes the last element in the array and returns it.

You can also use splice() method:

Var myArray = ["cassava", "nutmeg", "lupin", "rhubarb"]; myArray Splice(2, 1); // remove element at index 2 console.log(myArray); // ["cassava", "nutmeg", "rhubarb"]

Unlike the method splice(), which is used to add elements, here the second argument is 1, which says that we want to remove the element with index 2 (or 3rd in a row). In this case, the "lupin" element has been removed.

You can remove an element from an array using the operator delete:

Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; console.log(myArray.length); // 4 delete myArray; // delete Eliza console.log(myArray.length); // 4 console.log(myArray); // ["Byte Bandit", undefined × 1, "Jeefo", "Michelangelo"]

First important note: delete() does not change the length of the array after the element is removed (even if it was the last element in the array). Second: delete() changes the value of the element being removed to undefined, so when accessed myArray = undefined.

A good way to remove an element from an array is to use John Resig's Array.remove . Below is an example of usage taken from his page:

// Array Remove - By John Resig (MIT Licensed) Array.prototype.remove = function(from, to) ( var rest = this.slice((to || from) + 1 || this.length); this.length = from< 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);

You might want to look at the solution by Viral Patel , one of the functions in Underscore.js , or jQuery's grep() .

Additionally, in JavaScript there is a method shift(), which removes the first element in the array and returns its value. Let's see the code:

Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log(myArray.length); // 4 var firstItem = myArray.shift(); console.log(firstItem); // Matt Kramer console.log(myArray.length); // 3 console.log(myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]

Using the method shift() we've removed the item but stored its value in our firstItem variable. The length of the array has changed from 4 to 3.

This method can be useful along with the method push(). By using them together, we can efficiently queue up the elements in an array. We store the length of an array by removing an element from the beginning and adding a new one to the end.

Conversely, we can use the method unshift() to add an element to the beginning of an array:

Var myArray = ["apito", "castanets", "maraca"]; console.log(myArray.length); // 3 myArray.unshift("chime bar", "tan-tan"); console.log(myArray.length); // 5 console.log(myArray); // ["chime bar", "tan-tan", "apito", "castanets", "maraca"]

Using method unshift() with method pop(), you can create queues in the opposite direction by adding elements to the beginning and removing from the end of the array.

Flipping and sorting array elements.

To reverse the elements in an array, we can use reverse():

Var myArray = ["countdown", "final", "the"]; console log(myArray); // ["countdown", "final", "the"] myArray = myArray.reverse(); console log(myArray); // ["the", "final", "countdown"]

It is possible to sort the elements of an array in alphabetical order using the method sort():

Var myArray = ["xylophones", "zebras", "juggernauts", "avocados"]; console log(myArray); // ["xylophones", "zebras", "juggernauts", "avocados"] myArray = myArray.sort(); console log(myArray); // ["avocados", "juggernauts", "xylophones", "zebras"]

But it won't work with numbers.

Var myArray = ; console log(myArray); // myArray = myArray.sort(); console log(myArray); //

If you need to sort numbers, you can use the following code:

Function compareNumbers(a, b) ( return a - b; ) var myArray = ; console log(myArray); // myArray = myArray.sort(compareNumbers); console log(myArray); //

As shown above, with a simple function inserted in sort(), an array containing numbers will be sorted correctly.

Union of arrays.

We can merge 2 or more arrays and get 1 array that contains the elements of the joined arrays. For this we use the method concate():

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat(myArray2); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat("Chris Murphy", "Patrick Pentland"); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Splitting an array.

We can create a new array containing 1 or more elements from an existing array using the function slice():

Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(4); console.log(myNewArray); // ["Apples", "Oranges"]

Method slice() takes 1 or 2 arguments. If 1 argument (index) is passed, then a new array is created from all elements of the old one, starting from the given index. If 2 arguments are given, then a new array is created from the elements starting from the first argument and up to the element with the index passed in the second parameter, not including the last one. To make it clearer, let's see the code below:

Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(0, 4); console.log(myNewArray); // ["Vocals", "Bass", "Guitar", "Drums"]

Replacing elements in an array.

We use splice() to remove elements from an array, but we can also replace an element in an array with new elements:

Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice(3, 1, "Scott Shriner"); // replace 1 element at index 3 console.log(myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Method splice() always returns an array containing the elements that were removed. Line 2 will return 1 item "Brian Bell".

Conclusion

These articles have described methods for working with arrays in JavaScript. There are some additional items on MDN that I didn't include in this post. They only work in IE9+, so they might not be useful.

Have something to add? Or do you know some interesting library that will help you manage arrays? Comment please!

In this article, we will look at a JavaScript array and its components. JavaScript is ideally oriented and designed for programming. In fact, it implements the ECMAScript language (ECMA-262 reference).

Where is JavaScript used? It is used as an embeddable language to define a programmatic path to an application object. It can be found in browsers, where it is used as a scripting language that makes web pages interactive.

The most important architectural features of this product are dynamic and weak typing, automatic memory management, perfect programming, and functions that are first-class objects.

In general, JavaScript was influenced by various reasons, because during development they wanted to create a language similar to Java, but easy for programmers to use. Incidentally, JavaScript is not native to any enterprise or organization, which makes it unlike a number of programming styles used by web developers.

It should be noted that JavaScript is a registered trademark of Oracle Corporation.

What is an array?

An array is called which stores numbered values. Each such value is called an array component, and the digit to which the component is associated is called an index. JavaScript array is untyped. This means that array parts can be of any type, and different parts belonging to the same array have completely different types.

In addition, the JavaScript array is dynamic, which means that a fixed size does not need to be declared. After all, you can add new details at any time.

Array production

Using JavaScript, creating an array is not difficult at all. There are two methods for this. The first involves making an array using a literal - square brackets, inside of which there is a list of parts, separated by commas.

• var empty = ; //empty array;
• var numbers = ; //array with five digital components;
• var diff = ; //an array with three elements of different types.

As a rule, it is not required here that the values ​​be simple (strings and numbers). It can also be any other expressions, such as subject literals, other functions, and arrays.

The second way to create an array is to call the Array() designer. You can invite him in three ways:

• Calling the designer without arguments: var b - new Array(). This provides for the creation of an empty array, equivalent to an empty literal .
• The constructor explicitly specifies the value of the n array components: var b = new Array(1, 3, 5, 8, "string", true). In this case, the designer is presented with a list of arguments, which are turned into components of a new array. Arguments are written to the array in the location in which they are specified.
• Determination of the area for the subsequent assignment of values. This is done by specifying an array of a single number enclosed in parentheses when identifying: var b = new Array(5). This method of detection involves allocating the required number of components to the array (each of which is listed as undefined) with the possibility of subsequent assignment of values ​​in the process of presentation. This form is usually used to pre-allocate a Javascript array whose length is known in advance.

Writing, reading and adding array details

You can access the components of an array using the . By the way, all components in JavaScript, starting from zero, are numbered. To obtain the required element, its number is indicated in As a rule, details can be changed. And in order for JavaScript to add to the array, it is enough to assign a new value.

It should be noted that JavaScript arrays can store any number of elements of any kind.

Array Length

So, we know, the length of an array in general is an interesting phenomenon. Let's consider it in more detail. All arrays, whether constructed with the Array() designer or identified with an array literal, have a specific length property that returns the total number of elements to be saved. Since an array can contain undefined parts (denoted by undefined), a more precise expression is that the length quality is always one more than the largest number (index) of the array component. The length quality is adjusted automatically, remaining accurate as new parts appear in the array.

You can use the length property to make the final component of an array appear.

The last part has an index one less than the size of the array. After all, the countdown always starts from zero. Oh that JavaScript! The length of an array depends on the exact number of elements. Therefore, if you do not know how many there should be, but you need to refer to the final element of the array, you need to use the notation: v.length - 1.

Iterating over the details of an array

Very often, the length property is used to iterate over the details of an array in a loop:

• var fruits = ["strawberry", "peach", "apple", "banana"];
• for(var I = 0; i< fruits.lenght; i++);
• document.write(fruits[i] + "...").

In this example, the components appear to be placed contiguous and start at the first part that owns index zero. If this is not the case, before calling each element of the array, you must check whether it is defined.

A loop is also sometimes used to initialize components.

Array Increment and Truncation

I wonder how to add a string to an array using JavaScript? In the process of working with arrays, the quality of length is automatically improved, which is why we have to take care of it ourselves. It is necessary to remember one detail - the length property is not only readable, but also writable. If the length quality is assigned a value that is inferior in size to the current one, then the array is reduced to the specified value. Any components not in the new index range are discarded and their values ​​are lost, even if length is returned later - the values ​​are not restored.

It's quite easy to clear an array like this: foo.length = 0.

If the length quality is made larger than its current value, new unset parts will appear at the end of the array, which will increase it to the desired size.

Removing pattern details

The delete operator sets the array component to undefined, while it continues to exist. If you want to remove an element of a JavaScript array so that the remaining parts are moved into the vacated space, you need to use one of the provided array methods. The Array.shift() method eliminates the first component, pop() the final component, and the splice() method eliminates one or a range of components anywhere in the array.

Arrays are multidimensional

It seems we've got a bit of a head start, 2D arrays are what we need to look at next. Remember that JavaScript arrays can contain other elements as components? This feature is used to produce multidimensional arrays. To visit components in an array of arrays, just apply the square brackets twice.

Associative arrays

Now let's explore how the JavaScript trademark uses associative arrays. To do this, we need to look into the theory: associative arrays are sometimes called hash tables. Thanks to them, strings are used instead of indexes. The use of such constructions resembles the use of the name of a property of a simple object, but in this case, when performing work in an array format. Since there are no ways in JavaScript to operate on associative arrays, they are used much less frequently than regular ones. It should be noted that they can still be useful for storing data and make it easier to remember the details that need to be accessed.

Array Output

And what now we will study in the JavaScript system? Displaying an array in a dialog box (on the monitor screen), as well as outputting the values ​​of the array components.

If the program needs to display the values ​​of all components, then it is convenient to use the for statement for this. Interestingly, the for rule counter variable is used as an array component index.

cleaning

To filter a JavaScript array, you need to set its length to zero:

• var myArray = ;
• myArray.length = 0.

• clear: function() (;
• this length = 0;
• return this;

Adding and Removing Components

Well, we continue to further study this interesting JavaScript language. An array element can be both removed and added in the same way as ordinary properties of other objects. But there are some differences here: when adding numeric properties, the quality of length can change, and when modifying the length property, numeric qualities can be eliminated. In principle, the algorithm for setting the qualities of arrays is as follows:

• When adding an unknown numeric property i, if length is equal to or less than i, length is determined to be i+1.
• When the quality of length is changed, the following actions are performed: if the assigned value is less than zero, then a RangeError is thrown. Eliminate all numeric qualities and indices that are equal to or greater than the new length.

In general, deleting an element of a JavaScript array is easy. After all, even setting length, you need to remove "extra" components from it. Hence the option to clear the array. If for some reason the assigned variable of an empty new array did not suit you, but it is necessary to nullify the current one, it is enough to set its length quality to zero.

unshift, shift, pop and push methods

Although array components are modified manually, many people recommend using built-in methods to do this. It is this nuance that guarantees the correct quality value of length and the absence of gaps in the array. By the way, the correct quality length will correspond to the number of components.

The push method moves the passed parts to the end of the array. The pop method gives back the trailing component and removes it.

In general, in Internet Explorer prior to version 8, unshift may return undefined, in other browsers it may return the new length value. So it's better not to rely on the value returned from unshift.

Adding and eliminating details in the middle of an array

If you need to delete a JavaScript array, what should you do? The splice method is known to have the signature Array.prototype.splice.

It removes the deleteCount components from the array, starting from the start index. If more than two arguments are passed, then all subsequent arguments in the array are placed in place of the eliminated ones. If start is negative, then the index from which the withdrawal will resume will be equal to length + start. The return to the array comes from the removed elements.

In fact, using the splice method, you can remove components from the middle of the array, or add any number of components anywhere in the array.

In the simplest version, if you need to remove a component with index i, you need to request the splice method from the array with parameters i and 1.

In principle, the second parameter of the splice method is optional, but the behavior of a function with one argument is different in each browser.

For example, in Firefox, in the latest versions of Opera, in Safari and in Chrome, all details will be removed up to the end of the array.

In IE, none of the components will be destroyed. In the first variations of Opera, the behavior is impossible to predict - one part with index start - 1 will be removed. Therefore, at least two components must always be passed to this method.

Keys

Of course, when learning JavaScript, associative arrays, as mentioned earlier, should also not be overlooked. This is an abstract type of information (interface to the data store), which allows you to save pairs of the form "(key, value)" and support the operations of adding a pair, as well as deleting and searching for a pair by key:

FIND (key).

INSERT(value, key).

REMOVE (key).

It is assumed that two pairs with similar keys cannot be stored in an associative array. In the pair k + v v is called the value associated with the key k. The semantics and names of the above operations in different implementations of such arrays may be different.

Thus, the action FIND (key) returns the value associated with the given key, or some specific UNDEF object, meaning that there is no value associated with the given key. The other two actions return nothing (other than whether the operation was successful or not).

In general, from the point of view of the interface, it is convenient to consider an associative array as a simple array, in which not only integers, but also values ​​of other types, for example, strings, can be used as indices.

By the way, support for such arrays is available in many high-level programming languages, such as PHP, Perl, Ruby, Python, Tcl, JavaScript, and others. For languages ​​that do not have built-in tools for working with associative arrays, a huge number of implementations have been created in the form of libraries.

An example of an associative array is a telephone directory. In this variant, the value is the complex “F. I. O. + address ”, and the key is the phone number. One phone number has one owner, but one person can own several numbers.

Associative Extensions

It should be noted that the most famous extensions include the following actions:

• EACH - "walk" through all saved pairs.
• CLEAR - remove all records.
• MIN - find the pair with the smallest key value.
• MAX - find the pair with the highest key value.

In the last two options, it is necessary that the comparison action be indicated on the keys.

Implementations of associative arrays

There are many different implementations of an associative array. The most common implementation can be based on a simple array whose components are (value, key) pairs. To speed up the search, you can order the components of this array by key and find using But this will increase the time required to add a new pair, since you will need to “push apart” the array components in order to pack a fresh entry into the empty cell that appears.

The most well-known implementations are based on various search trees. For example, in a typical C++ STL reader, the map container is implemented on the basis of a black-and-mahogany tree. Ruby, Tcl, Python styles use one of the hash table types. There are other implementations as well.

In general, each implementation has its own advantages and disadvantages. It is important that all three actions are executed both on average and in the worst nuance over the O(log n) period, where n is the current number of saved pairs. For matched search trees (including black-red trees), this condition is satisfied.

It is known that in implementations based on hash tables, the average time is defined as O(1), which is better than in actions based on search trees. Of course, this does not guarantee high-speed execution of individual operations: the execution time of INSERT is denoted as O(n) in the worst case. The INSERT process takes a long time when the fill factor reaches its highest point and it becomes necessary to reconstruct the hash table index.

By the way, these hash lists are bad because on their basis it is impossible to perform fast additional actions MAX, MIN and the algorithm for bypassing all saved pairs in descending or ascending order of keys.

• Translation

Most of the applications that are being developed today require you to interact with some kind of dataset. Handling elements in collections is a common operation that you've probably come across. When working, for example, with arrays, you can, without hesitation, use the usual for loop, which looks something like this: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

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. Perhaps you need to quickly perform some calculations that will involve the elements of the list. For example, you need to add something to something, multiply something by something. Are there any features in JavaScript that allow you to solve such problems faster and more conveniently than using a regular for loop?

In fact, there are such facilities in JavaScript. Some of them are considered in the material, the translation of which we present to your attention today. In particular, we are talking about the spread operator, the for…of loop, and the includes() , some() , every() , filter() , map() , and reduce() methods. Here we will mainly talk about arrays, but the techniques discussed here are usually suitable for working with objects of other types.

It should be noted that reviews of modern approaches to development in JS usually include examples prepared using arrow 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 suit you. Therefore, here, in most situations, two options for performing the same actions will be shown: using ordinary functions (ES5) and using arrow functions (ES6). For those who are new to arrow functions, note that arrow functions are not equivalent to function declarations and function expressions. You shouldn't replace one with the other. In particular, this is due to the fact that the this keyword behaves differently in regular and arrow functions.

1. Extension operator

The spread operator (spread operator) allows you to "expand" arrays, substituting in the place where this operator is used, instead of arrays, their elements. A similar approach is proposed for object literals.

▍Strengths of the extension operator

• This is a simple and fast way to "pull" individual elements out of an array.
• This operator is suitable for working with array and object literals.
• This is a fast and intuitive way to work with function arguments.
• The spread operator does not take up much space in the code - it looks like three dots (...).

▍Example

Let's say your task is to print a list of your favorite treats without using a loop. With the help of the spread operator, this is done like this:

2. The for…of loop

The for...of operator is designed to traverse iterable objects. It gives access to individual elements of such objects (in particular, to array elements), which, for example, allows them to be modified. You can think of it as a replacement for the regular for loop.

▍Strengths of the for…of loop

• 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 it when it is necessary to check any conditions.
• Its use leads to writing cleaner and more readable code.

▍Example

Suppose you have a data structure that describes the contents of a toolbox and you want to display those tools. Here's how to do it with a for...of loop:

3. includes() method

The includes() method is used to check if a collection contains an element, in particular, for example, a certain string in an array containing strings. This method returns true or false depending on the results of the validation. When using it, you should take into account that it is case sensitive. If, for example, the collection contains the string element SCHOOL , and the check for its presence using includes() is performed on the string school , the method will return false .

▍Strengths of the includes() method

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

▍Example

Let's say you have a garage, represented by an array of cars, and you don't know if there is a car in that garage or not. In order to solve this problem, you need to write code that allows you to check if the car is in the garage. Let's use the includes() method:

4. some() method

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

▍Strengths of the some() method

• The some() method allows you to check if the array contains at least one of the elements of interest to us.
• It performs a condition test using the function passed to it.
• This method is convenient to use.

▍Example

Suppose you are the owner of the club, and in general, you are not interested in who exactly comes to your club. However, some visitors are not allowed to enter the club, as they are prone to excessive consumption of alcoholic beverages, at least if they happen to be in your establishment on their own, and there is no one with them who can look after them. In this case, a group of visitors can enter the club only if at least one of them is at least 18 years old. In order to automate this kind of check, let's use the some() method. Its use is shown below in two versions.

ES5

ES6

5. every() method

The every() method iterates through the array and checks each element against some condition, returning true if all elements in the array meet the condition and false otherwise. You can see that it is similar to the some() method.

▍Strengths of the every() method

• The every() method allows you to check if a condition is met by all elements of an array.
• Conditions can be set using functions.
• It promotes a declarative approach to programming.

▍Example

Let's go back to the previous example. There you allowed visitors under the age of 18 to enter the club, but someone wrote a statement to the police, after which you got into an unpleasant situation. After you managed to settle everything, 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 solving the problem in two versions, but this time we will use the every() method.

ES5

ES6

6. filter() method

The filter() method allows you to create, based on an 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 allows you to avoid modifying the original array.
• It allows you to get rid of unnecessary elements.
• It improves the readability of the code.

▍Example

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

ES5

ES6

7. 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 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 that have been reduced in price by 25%. Let's use the map() method to solve this problem.

ES5

ES6

8. Reduce() method

The reduce() method, in its simplest form, allows you to sum 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 of the elements of an array.
• This method speeds up and simplifies the calculations.

▍Example

Suppose you need to calculate your expenses for the week, which are stored in an array. Let's solve this problem using the reduce() method.

ES5

ES6

Add tags

• Translation

• I. Iterating over real arrays
  1. forEach method and related methods
  2. for loop
  3. Proper use of the for...in loop
  4. for...of loop (implicit use of iterator)
  5. Explicit use of an iterator
• 1. Using real array iteration methods
  2. Convert to real array
  3. A note on runtime objects

I. Iterating over real arrays

There are currently three ways to iterate over the elements of a real array:

1. method Array.prototype.forEach ;
2. classic for loop;
3. A "well-formed" for...in loop.

In addition, soon, with the advent of the new ECMAScript 6 (ES 6) standard, two more methods are expected:

1. for...of loop (implicit use of iterator);
2. explicit use of an iterator.

1. The forEach method and related methods

If your project is designed to support the features of the ECMAScript 5 (ES5) standard, you can use one of its innovations - the forEach method.

Usage example:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
In general, the use of forEach requires the inclusion of the es5-shim emulation library for browsers that do not have native support for this method. These include IE 8 and earlier, which are still used in some places.

The advantage of forEach is that there is no need to declare local variables to store the index and value of the current array element, since they are automatically passed to the callback function as arguments.

If you're worried about the possible cost of calling a callback for each element, don't worry and read this.

ForEach is designed to iterate over all the elements of an array, but in addition to it, ES5 provides several more useful methods for iterating over all or some of the elements, plus doing something with them:

• every - returns true if for each element of the array, the callback returns a value that evaluates to true .
• some - returns true if for at least one element of the array, the callback returns a value that evaluates to true .
• filter - creates a new array containing those elements of the original array for which the callback returns true .
• map - creates a new array consisting of the values ​​returned by the callback.
• reduce - Reduces an array to a single value by applying the callback to each array element in turn, starting with the first one (can be useful for calculating the sum of array elements and other summary functions).
• reduceRight - works similar to reduce, but iterates over the elements in reverse order.

2. The for loop

Good old for rocks:

Var a = ["a", "b", "c"]; var index; for (index = 0; index< a.length; ++index) { console.log(a); }
If the array length does not change throughout the loop, and the loop itself belongs to a performance-critical piece of code (which is unlikely), then you can use the "more optimal" version of for with array length storage:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }
In theory, this code should run a little faster than the previous one.

If the order of iteration of the elements is not important, then you can go even further in terms of optimization and get rid of the variable for storing the length of the array by reversing the iteration order:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
However, in modern JavaScript engines, such games with optimization usually mean nothing.

3. Proper use of the for...in loop

If you are advised to use a for...in loop, remember that iterating over arrays is not what it is intended for. Contrary to popular misconception, the for...in loop does not iterate over the array indexes, but the enumerable properties of the object.

However, in some cases, such as iterating over sparse arrays, for...in can be useful, as long as you take precautions, as shown in the example below:

// a - sparse array var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294) { console.log(a); } }
In this example, two checks are performed on each iteration of the loop:

1. that the array has its own property named key (not inherited from its prototype).
2. that key is a string containing the decimal notation of an integer whose value is less than 4294967294 . Where does the last number come from? From the definition of an array index in ES5, which implies that the highest index an element in an array can have is (2^32 - 2) = 4294967294 .

Of course, such checks will take extra time when executing the loop. But in the case of a sparse array, this method is more efficient than the for loop, since in this case only those elements that are explicitly defined in the array are iterated over. So, in the example above, only 3 iterations will be performed (for indexes 0, 10 and 10000) - against 10001 in the for loop.

In order not to write such a cumbersome check code every time you need to iterate over an array, you can write it as a separate function:

Function arrayHasOwnIndex(array, key) ( return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294; }
Then the body of the loop from the example will be significantly reduced:

For (key in a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
The code of checks considered above is universal, suitable for all cases. But instead of it, you can use a shorter version, although formally not quite correct, but, nevertheless, suitable for most cases:

For (key in a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. The for...of loop (implicit use of an iterator)

ES6, while still in draft status, should introduce iterators into JavaScript.

iterator is an object-implemented protocol that defines a standard way to obtain a sequence of values ​​(either finite or infinite).
An iterator is an object that defines the next() method, a function with no arguments that returns an object with two properties:

1. done (boolean) - true if the iterator has reached the end of the iterable sequence. Otherwise, it is false .
2. value - defines the value returned by the iterator. May be undefined (missing) if the done property is set to true .

Many built-in objects, incl. real arrays have iterators by default. The simplest way to use an iterator on real arrays is to use the new for...of construct.

An example of using for...of:

Varval; var a = ["a", "b", "c"]; for (val of a) ( console.log(val); )
In the example above, the for...of loop implicitly calls an iterator of the Array object to get each value in the array.

5. Explicit use of an iterator

Iterators can also be used explicitly, although in this case the code becomes much more complicated compared to the for...of loop. It looks something like this:

Var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done) ( console.log(entry.value); )
In this example, the Array.prototype.entries method returns an iterator that is used to display the values ​​of the array. On each iteration, entry.value contains an array of the form [key, value] .

II. Iterating over array-like objects

In addition to real arrays, JavaScript also has array-like objects . What they have in common with real arrays is that they have a length property and properties with names in the form of numbers that correspond to the elements of the array. Examples include the DOM of the NodeList collection and the arguments pseudo-array available inside any function/method.

1. Using methods to iterate over real arrays

At least most, if not all, methods for iterating over real arrays can be used to iterate over array-like objects.

The for and for...in constructs can be applied to array-like objects in exactly the same way as real arrays.

ForEach and other Array.prototype methods also apply to array-like objects. To do this, you need to use a Function.call or Function.apply call.

For example, if you want to apply forEach to the childNodes property of a Node object, you would do it like this:

Array.prototype.forEach.call(node.childNodes, function(child) ( // do something with the child object));
For the convenience of reusing this technique, you can declare a reference to the Array.prototype.forEach method in a separate variable and use it as a shorthand:

// (Assuming all code below is in the same scope) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // do something with the child object));
If an array-like object has an iterator, then it can be used explicitly or implicitly to iterate over the object in the same way as for real arrays.

2. Convert to real array

There is also another, very simple, way to iterate over an array-like object: convert it to a real array and use any of the methods discussed above to iterate over real arrays. For conversion, you can use the generic method Array.prototype.slice , which can be applied to any array-like object. This is done very simply, as shown in the example below:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
For example, if you want to convert a NodeList collection into a real array, you would need code like this:

Vardivs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
update: As noted in the comments