JavaScript Array

JavaScript Array stores keyed collections of values just like a regular object. However the limitation of objects come when we need an ordered collection of data. Something like a data storage where there is a first element, a second element, a third element and so on.

Objects provide no methods to manage the order of the elements stored. That is where a special data structure called Array comes into the picture.

Creating an array

There are two ways of creating an array:

let myArray1 = new Array();
let myArray2 = [];

The second syntax is the most used. We can even initialise the array with elements as follows:

let myStudents = ["Carren", "Lungile", "Tawonga", "Oneal"];

Array elements counting is zero-based, which means the first element is numbered 0, the second element 1, the third element 2 and so on. The elements are accessed using the square bracket notation. For example:

let myStudents = ["Carren", "Lungile", "Tawonga", "Oneal"];

console.log( myStudents[0] );  // Carren
console.log( myStudents[1] );  // Lungile
console.log( myStudents[2] );  // Tawonga
console.log( myStudents[3] );  // Oneal
console.log( myStudents[4] );  // undefined

Each element can be modified by its index as follows:

let myStudents = ["Carren", "Lungile", "Tawonga", "Oneal"];

myStudents[0] = "Tinevimbo";

console.log( myStudents );   // [ 'Tinevimbo', 'Lungile', 'Tawonga', 'Oneal' ]

JavaScript arrays are not fixed in size and can be added more elements as follows:

let myStudents = ["Carren", "Lungile", "Tawonga", "Oneal"];

myStudents[4] = "Calvin";
myStudents[5] = "Tadiwa";

console.log( myStudents );   // [ 'Carren', 'Lungile', 'Tawonga', 'Oneal', 'Calvin', 'Tadiwa' ]

Arrays have a length property that returns the length of the array.

let myStudents = ["Carren", "Lungile", "Tawonga", "Oneal"];

console.log( myStudents.length );   // 4

Arrays can store data of any type:


let mixedArr = ["Tony Stark", 2026, false, {suit : "Mark IV"}, function(){return "spiderman"}];

console.log(mixedArr);    // [ 'Tony Stark', 2026, false, { suit: 'Mark IV' }, [Function] ]

Array Methods

push

The push method appends an element at the end of an array.

let miArray = [];

miArray.push("Mecury");
console.log(miArray);    // [ 'Mecury' ]

miArray.push("Venus");
console.log(miArray);    // [ 'Mecury', 'Venus' ]

miArray.push("Earth");
console.log(miArray);    // [ 'Mecury', 'Venus', 'Earth' ]

miArray.push("Mars");
console.log(miArray);    // [ 'Mecury', 'Venus', 'Earth', 'Mars' ]

The push method also returns the size of the array after adding an element to the array.

let miArray = [];


let myVar = miArray.push("Mecury")
console.log(myVar);                  // 1

myVar = miArray.push("Venus")
console.log(myVar);                  // 2

myVar = miArray.push("Earth");
console.log(myVar);                  // 3

myVar = miArray.push("Mars");
console.log(myVar);                  // 4

pop

The pop method removes an element from the end of the array.

let miArray =  [ 'Mecury', 'Venus', 'Earth', 'Mars' ];

miArray.pop();
console.log(miArray);    // [ 'Mecury', 'Venus', 'Earth' ]

miArray.pop();
console.log(miArray);    // [ 'Mecury', 'Venus' ]

miArray.pop();
console.log(miArray);    // [ 'Mecury' ]

miArray.pop();
console.log(miArray);    // []

The pop method also returns the removed value:

let miArray =  [ 'Mecury', 'Venus', 'Earth', 'Mars' ];

let myVar = miArray.pop();
console.log(myVar);    // Mars

myVar = miArray.pop();
console.log(myVar);    // Earth

myVar = miArray.pop();
console.log(myVar);    // Venus

myVar = miArray.pop();
console.log(myVar);    // Mecury

shift

The shift method removes an element from the beginning of the array:

let miArray =  [ 'Mecury', 'Venus', 'Earth', 'Mars' ];

miArray.shift();
console.log(miArray);    // [ 'Venus', 'Earth', 'Mars' ]

miArray.shift();
console.log(miArray);    // [ 'Earth', 'Mars' ]

miArray.shift();
console.log(miArray);    // [ 'Mars' ]

miArray.shift();
console.log(miArray);    // []

shift also returns the removed element:

let miArray =  [ 'Mecury', 'Venus', 'Earth', 'Mars' ];

let myVar = miArray.shift();
console.log(myVar);    // Mecury

myVar = miArray.shift();
console.log(myVar);    // Venus

myVar = miArray.shift();
console.log(myVar);    // Earth

myVar = miArray.shift();
console.log(myVar);    // Mars

unshift

unshift adds an element to the beginning of the array.

let miArray = []; 

miArray.unshift("Mecury"); 
console.log(miArray); // [ 'Mecury' ] 

miArray.unshift("Venus"); 
console.log(miArray); // [ 'Venus', 'Mecury' ]

miArray.unshift("Earth"); 
console.log(miArray); // [ 'Earth', 'Venus', 'Mecury' ]

miArray.unshift("Mars"); 
console.log(miArray); // [ 'Mars', 'Earth', 'Venus', 'Mecury' ]

unshift also returns the size of the array after adding the element:

let miArray = []; 

let myVar = miArray.unshift("Mecury"); 
console.log(myVar); // 1

myVar = miArray.unshift("Venus"); 
console.log(myVar); // 2

myVar = miArray.unshift("Earth"); 
console.log(myVar); // 3

myVar = miArray.unshift("Mars"); 
console.log(myVar); // 4

Both push and unshift support adding multiple elements:

let miArray = []; 

miArray.unshift("Mecury", "Venus"); 
console.log(miArray);              // [ 'Mecury', 'Venus' ]

miArray.unshift("Earth", "Mars"); 
console.log(miArray);              // [ 'Earth', 'Mars', 'Mecury', 'Venus' ]

let miArray = []; 

miArray.push("Mecury", "Venus"); 
console.log(miArray);              // [ 'Mecury', 'Venus' ]

miArray.push("Earth", "Mars"); 
console.log(miArray);              // [ 'Mecury', 'Venus', 'Earth', 'Mars' ]

Array is a special object

An array is a special object and square brackets are used to access the properties, e.g. arr[3]. The square bracket syntax is actually an object syntax where the key is not a valid JavaScript identifier. In arrays, numbers are used as keys (and they are not valid JavaScript identifiers).

Arrays extend objects but provide special methods to manipulate ordered collections of elements and also provide the length property.

Because they are objects, arrays are copied by reference:

let myPlanets = ["Mecury", "Venus"]; 
console.log(myPlanets);              // [ 'Mecury', 'Venus' ]

// copy myPlanets to yoPlanets
let yoPlanets = myPlanets;
console.log(yoPlanets);              // [ 'Mecury', 'Venus' ]

// push more planets into yoPlanets
yoPlanets.push("Jupiter", "Earth");

// myPlanets increases too
console.log(myPlanets);              // [ 'Mecury', 'Venus', 'Jupiter', 'Earth' ]

That is because myPlanets and yoPlanets refer to the same object.

Array as a regular object

Arrays store their elements in a contiguous memory area, one after another and are optimised to work faster than regular objects. However there are ways to break an array and make it work like a regular object and all the advantages disappear.

One of the ways of breaking an array and make it work like a regular objects is adding a non-numeric property e.g myPlanets.count = 2.

Looping an array

“for” loop

let abc = ["Alpha", "Beta", "Gamma"];

for (let i = 0; i < abc.length; i++) {
	
  console.log( abc[i] );
}

/* == OUTPUT ==

Alpha
Beta
Gamma

*/

“for..of” loop

let abc = ["Alpha", "Beta", "Gamma"];

for (let x of abc) {
	
  console.log( x );
}

/* == OUTPUT ==

Alpha
Beta
Gamma

*/

The for..of is shorter and easier to write, but however it doesn’t give us access to the index of the current element.

“for..of”

let abc = ["Alpha", "Beta", "Gamma"];

for (let x in abc) {
	
  console.log( abc[x] );
}

/* == OUTPUT ==

Alpha
Beta
Gamma

*/

JavaScript Array