Back to Home
Home / javascript-tutorials / Arrays

Arrays

Objects allow you to store keyed collections of values. That’s fine. But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc. It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use. There exists a special data structure named Array, to store ordered collections.

Declaration

There are two syntaxes for creating an empty array: Almost all the time, the second syntax is used. We can supply initial elements in the brackets: Array elements are numbered, starting with zero. We can get an element by its number in square brackets: We can replace an element: …Or add a new one to the array: The total count of the elements in the array is its length: We can also use alert to show the whole array. An array can store elements of any type. For instance: let fruits = [ “Apple”, “Orange”, “Plum”!,/!

Get last elements with “at”

[recent browser=“new”] Let’s say we want the last element of the array. Some programming languages allow the use of negative indexes for the same purpose, like fruits[-1]. However, in JavaScript it won’t work. The result will be undefined, because the index in square brackets is treated literally. We can explicitly calculate the last element index and then access it: fruits[fruits.length - 1]. A bit cumbersome, isn’t it? We need to write the variable name twice. Luckily, there’s a shorter syntax: fruits.at(-1): In other words, arr.at(i): - is exactly the same as arr[i], if i >= 0. - for negative values of i, it steps back from the end of the array.

Methods pop/push, shift/unshift

pop

Extracts the last element of the array and returns it: 


let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.pop() ); // remove "Pear" and alert it
alert( fruits ); // Apple, Orange
Both fruits.pop() and fruits.at(-1) return the last element of the array, but fruits.pop() also modifies the array by removing it. push

Append the element to the end of the array: 


let fruits = ["Apple", "Orange"];
fruits.push("Pear");
alert( fruits ); // Apple, Orange, Pear
The call fruits.push(…) is equal to fruits[fruits.length] = …. Methods that work with the beginning of the array: shift

Extracts the first element of the array and returns it: 


let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.shift() ); // remove Apple and alert it
alert( fruits ); // Orange, Pear
unshift

Add the element to the beginning of the array:

let fruits = ["Orange", "Pear"];
fruits.unshift('Apple');
alert( fruits ); // Apple, Orange, Pear

Methods push and unshift can add multiple elements at once:

Internals

An array is a special kind of object. The square brackets used to access a property arr[0] actually come from the object syntax. That’s essentially the same as obj[key], where arr is the object, while numbers are used as keys. They extend objects providing special methods to work with ordered collections of data and also the length property. But at the core it’s still an object. Remember, there are only eight basic data types in JavaScript (see the Data types chapter for more info). Array is an object and thus behaves like an object. For instance, it is copied by reference: …But what makes arrays really special is their internal representation. The engine tries to store its elements in the contiguous memory area, one after another, just as depicted on the illustrations in this chapter, and there are other optimizations as well, to make arrays work really fast. But they all break if we quit working with an array as with an “ordered collection” and start working with it as if it were a regular object. For instance, technically we can do this: That’s possible, because arrays are objects at their base. We can add any properties to them. But the engine will see that we’re working with the array as with a regular object. Array-specific optimizations are not suited for such cases and will be turned off, their benefits disappear. The ways to misuse an array:

  1. Remove the element with the index 0.

  2. Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1 and so on.

  3. Update the length property. The more elements in the array, the more time to move them, more in-memory operations. The similar thing happens with unshift: to add an element to the beginning of the array, we need first to move existing elements to the right, increasing their indexes. And what’s with push/pop? They do not need to move anything. To extract an element from the end, the pop method cleans the index and shortens length. The actions for the pop operation: The pop method does not need to move anything, because other elements keep their indexes. That’s why it’s blazingly fast. The similar thing with the push method.

    Loops

    One of the oldest ways to cycle array items is the for loop over indexes: But for arrays there is another form of loop, for..of: The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter. Technically, because arrays are objects, it is also possible to use for..in: But that’s actually a bad idea. There are potential problems with it:

  4. The loop for..in iterates over all properties, not only the numeric ones. There are so-called “array-like” objects in the browser and in other environments, that look like arrays. That is, they have length and indexes properties, but they may also have other non-numeric properties and methods, which we usually don’t need. The for..in loop will list them though. So if we need to work with array-like objects, then these “extra” properties can become a problem.

  5. The for..in loop is optimized for generic objects, not arrays, and thus is 10-100 times slower. Of course, it’s still very fast. The speedup may only matter in bottlenecks. But still we should be aware of the difference. Generally, we shouldn’t use for..in for arrays.

    A word about “length”

    The length property automatically updates when we modify the array. To be precise, it is actually not the count of values in the array, but the greatest numeric index plus one. For instance, a single element with a large index gives a big length: Note that we usually don’t use arrays like that. Another interesting thing about the length property is that it’s writable. If we increase it manually, nothing interesting happens. But if we decrease it, the array is truncated. The process is irreversible, here’s the example: So, the simplest way to clear the array is: arr.length = 0;.

    new Array() [#new-array]

    There is one more syntax to create an array: It’s rarely used, because square brackets [] are shorter. Also, there’s a tricky feature with it. If new Array is called with a single argument which is a number, then it creates an array without items, but with the given length. Let’s see how one can shoot themselves in the foot: To avoid such surprises, we usually use square brackets, unless we really know what we’re doing.

    Multidimensional arrays

    Arrays can have items that are also arrays. We can use it for multidimensional arrays, for example to store matrices:

    toString

    Arrays have their own implementation of toString method that returns a comma-separated list of elements. For instance: Also, let’s try this: Arrays do not have Symbol.toPrimitive, neither a viable valueOf, they implement only toString conversion, so here [] becomes an empty string, [1] becomes “1” and [1,2] becomes “1,2”. When the binary plus “+” operator adds something to a string, it converts it to a string as well, so the next step looks like this:

    Don’t compare arrays with ==

    Arrays in JavaScript, unlike some other programming languages, shouldn’t be compared with operator ==. This operator has no special treatment for arrays, it works with them as with any objects. Let’s recall the rules:

let arr = new Array();
let arr = [];
Example:

Follow the lesson from Microsoft Web-Dev-For-Beginners course

Tags: array
Back to javascript-tutorials Back to Home