The Array JavaScript Data Structure

Arrays are the most fundamental data structure in any programming language.

Arrays are available in most (if not all) programming languages, built-in into the language.

Let’s talk about what arrays represent in most lower level programming languages, like C: they represent a set of contiguous cells in the computer memory.

Starting from a cell in the memory (it helps to visualize cells like in a spreadsheet if you want), we can create an array with 10 slots by getting 10 contiguous slots.

This allows us to perform operations like accessing the slot #2 by knowing the memory address of the first slot, #0, and simply adding 2 to that.

In JavaScript we work at a higher level, and arrays work in a different way. We don’t have access to the memory like we can with C or other lower level languages, so we are abstracted away from this kind of array math.

Arrays in lower level languages can only store one specific data type, so we can make calculation on how much memory an array will take beforehand, so we can store it safely in a place in the computer memory that can host it.

In JavaScript, arrays can host any kind of data, mixing it. We can have a number, then an object, then another array.

An array is initialized using this syntax:

const myArray = []

or

const myArray = new Array()

there’s no difference, but I prefer the shorthand syntax [].

In JavaScript we are not required to specify the array size at creation time, but we can do it:

const myArray = new Array(10)

Then we can fill the array with values:

let val = 1
for (const [i, v] of myArray.entries()) {
  myArray[i] = val++
}

You can reference the first item in the array using:

myArray[0]

(the index start from 0) and every subsequent item in the array by incrementing the index number:

myArray[4] //5
myArray[3 + 4] //8

You can change the value of the item at any position using the syntax:

myArray[3] = 'Another item'

Arrays in JavaScript are objects internally, and so they have methods. You can add one item at the end of the array using the push method:

myArray.push(11)

You can add an item at any position using the splice() method (not to be confused with slice()).

At the start:

myArray.splice(0, 0, 'new item')

At index 3:

myArray.splice(3, 0, 'new item')

You can remove an item from the end of the array using

myArray.pop()

and from the beginning using

myArray.shift()

We can find the length of an array checking the myArray.length property.

And we can iterate through the items in an array using loops:

for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]) //value
  console.log(i) //index
}

myArray.forEach((item, index) => {
  console.log(item) //value
  console.log(index) //index
}

let i = 0
while (i < myArray.length) {
  console.log(myArray[i]) //value
  console.log(i) //index
  i = i + 1
}

//iterate over the value
for (const value of myArray) {
  console.log(value) //value
}

//get the index as well, using `entries()`
for (const [index, value] of myArray.entries()) {
  console.log(index) //index
  console.log(value) //value
}