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.
There are two syntaxes for creating an empty array:
let arr = new Array(); let arr = ;
Almost all the time, the second syntax is used. We can supply initial elements in the brackets:
let fruits = ["Apple", "Orange", "Plum"];
Array elements are numbered, starting with zero.
We can get an element by its number in square brackets:
We can replace an element:
fruits = 'Pear'; // now ["Apple", "Orange", "Pear"]
…Or add a new one to the array:
fruits = 'Lemon'; // now ["Apple", "Orange", "Pear", "Lemon"]
The total count of the elements in the array is its
We can also use
alert to show the whole array.
An array can store elements of any type.
An array, just like an object, may end with a comma:
let fruits = [ "Apple", "Orange", "Plum", ];
The “trailing comma” style makes it easier to insert/remove items, because all lines become alike.
Get last elements with “at”
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
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:
In other words,
- is exactly the same as
i >= 0.
- for negative values of
i, it steps back from the end of the array.
Methods pop/push, shift/unshift
A queue is one of the most common uses of an array. In computer science, this means an ordered collection of elements which supports two operations:
pushappends an element to the end.
shiftget an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.
Arrays support both operations.
In practice we need it very often. For example, a queue of messages that need to be shown on-screen.
There’s another use case for arrays – the data structure named stack.
It supports two operations:
pushadds an element to the end.
poptakes an element from the end.
So new elements are added or taken always from the “end”.
A stack is usually illustrated as a pack of cards: new cards are added to the top or taken from the top:
For stacks, the latest pushed item is received first, that’s also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out).
In computer science, the data structure that allows this, is called deque.
Methods that work with the end of the array:
Extracts the last element of the array and returns it:
fruits.at(-1)return the last element of the array, but
fruits.pop()also modifies the array by removing it.
Append the element to the end of the array:
fruits.push(...)is equal to
fruits[fruits.length] = ....
Methods that work with the beginning of the array:
Extracts the first element of the array and returns it:
Add the element to the beginning of the array:
unshift can add multiple elements at once:
An array is a special kind of object. The square brackets used to access a property
arr actually come from the object syntax. That’s essentially the same as
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.
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:
let fruits = ; // make an array fruits = 5; // assign a property with the index far greater than its length fruits.age = 25; // create a property with an arbitrary name
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:
- Add a non-numeric property like
arr.test = 5.
- Make holes, like: add
arr(and nothing between them).
- Fill the array in the reverse order, like
arrand so on.
push/pop run fast, while
shift/unshift are slow.
Why is it faster to work with the end of an array than with its beginning? Let’s see what happens during the execution:
fruits.shift(); // take 1 element from the start
It’s not enough to take and remove the element with the index
0. Other elements need to be renumbered as well.
shift operation must do 3 things:
- Remove the element with the index
- Move all elements to the left, renumber them from the index
1and so on.
- Update the
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
The actions for the
fruits.pop(); // take 1 element from the end
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
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 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
But that’s actually a bad idea. There are potential problems with it:
for..initerates 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
lengthand indexes properties, but they may also have other non-numeric properties and methods, which we usually don’t need. The
for..inloop will list them though. So if we need to work with array-like objects, then these “extra” properties can become a problem.
for..inloop 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”
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;.
There is one more syntax to create an array:
let arr = new Array("Apple", "Pear", "etc");
It’s rarely used, because square brackets
 are shorter. Also, there’s a tricky feature with it.
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.
Arrays can have items that are also arrays. We can use it for multidimensional arrays, for example to store matrices:
Arrays have their own implementation of
toString method that returns a comma-separated list of elements.
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,
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 ==
This operator has no special treatment for arrays, it works with them as with any objects.
Let’s recall the rules:
- Two objects are equal
==only if they’re references to the same object.
- If one of the arguments of
==is an object, and the other one is a primitive, then the object gets converted to primitive, as explained in the chapter Object to primitive conversion.
- …With an exception of
==each other and nothing else.
The strict comparison
=== is even simpler, as it doesn’t convert types.
So, if we compare arrays with
==, they are never the same, unless we compare two variables that reference exactly the same array.
These arrays are technically different objects. So they aren’t equal. The
== operator doesn’t do item-by-item comparison.
Comparison with primitives may give seemingly strange results as well:
Here, in both cases, we compare a primitive with an array object. So the array
 gets converted to primitive for the purpose of comparison and becomes an empty string
Then the comparison process goes on with the primitives, as described in the chapter Type Conversions:
So, how to compare arrays?
That’s simple: don’t use the
== operator. Instead, compare them item-by-item in a loop or using iteration methods explained in the next chapter.
Array is a special kind of object, suited to storing and managing ordered data items.
// square brackets (usual) let arr = [item1, item2...]; // new Array (exceptionally rare) let arr = new Array(item1, item2...);
The call to
new Array(number) creates an array with the given length, but without elements.
lengthproperty is the array length or, to be precise, its last numeric index plus one. It is auto-adjusted by array methods.
- If we shorten
lengthmanually, the array is truncated.
Getting the elements:
- we can get element by its index, like
- also we can use
at(i)method that allows negative indexes. For negative values of
i, it steps back from the end of the array. If
i >= 0, it works same as
We can use an array as a deque with the following operations:
itemsto the end.
pop()removes the element from the end and returns it.
shift()removes the element from the beginning and returns it.
itemsto the beginning.
To loop over the elements of the array:
for (let i=0; i<arr.length; i++)– works fastest, old-browser-compatible.
for (let item of arr)– the modern syntax for items only,
for (let i in arr)– never use.
To compare arrays, don’t use the
== operator (as well as
< and others), as they have no special treatment for arrays. They handle them as any objects, and it’s not what we usually want.
Instead you can use
for..of loop to compare arrays item-by-item.
We will continue with arrays and study more methods to add, remove, extract elements and sort arrays in the next chapter Array methods.
<code>tag, for several lines – wrap them in
<pre>tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)