JavaScript: Arrays
There exists a special data structure named Array
, to store ordered collections.
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.
Trailing comma
An array, just like an object, may end with a comma:
The “trailing comma” style makes it easier to insert/remove items, because all lines become alike.
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:
push
appends an element to the end.shift
get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st.
There’s another use case for arrays – the data structure named stack.
It supports two operations:
push
adds an element to the end.pop
takes 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:
Methods that work with the end of the array:
pop
pop
Extracts the last element of the array and returns it:
push
push
Append the element to the end of the array:
Methods that work with the beginning of the array:
shift
shift
Extracts the first element of the array and returns it:
unshift
unshift
Add the element to the beginning of the array:
Methods push
and unshift
can add multiple elements at once:
Remember, there are only 7 basic types in JavaScript. 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, 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:
The ways to misuse an array:
Add a non-numeric property like
arr.test = 5
.Make holes, like: add
arr[0]
and thenarr[1000]
(and nothing between them).Fill the array in the reverse order, like
arr[1000]
,arr[999]
and so on.
Please think of arrays as special structures to work with the ordered data. They provide special methods for that. Arrays are carefully tuned inside JavaScript engines to work with contiguous ordered data, please use them this way. And if you need arbitrary keys, chances are high that you actually require a regular object {}
.
Methods 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:
It’s not enough to take and remove the element with the number 0
. Other elements need to be renumbered as well.
The shift
operation must do 3 things:
Remove the element with the index
0
.Move all elements to the left, renumber them from the index
1
to0
, from2
to1
and so on.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.
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:
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. Thefor..in
loop will list them though. So if we need to work with array-like objects, then these “extra” properties can become a problem.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.
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 themself in the foot:
In the code above, new Array(number)
has all elements undefined
.
To evade such surprises, we usually use square brackets, unless we really know what we’re doing.
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"
.
Array is a special kind of object, suited to storing and managing ordered data items.
The declaration:
The call to
new Array(number)
creates an array with the given length, but without elements.The
length
property is the array length or, to be precise, its last numeric index plus one. It is auto-adjusted by array methods.If we shorten
length
manually, the array is truncated.
We can use an array as a deque with the following operations:
push(...items)
addsitems
to the end.pop()
removes the element from the end and returns it.shift()
removes the element from the beginning and returns it.unshift(...items)
addsitems
to 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.
Last updated