05. Arrays

An array is an object that stores data that can be accessed with a numerical index value. Just like most programming languages, JavaScript starts its array indices start at 0. However, unlike some programming languages, JavaScript does not require the data within each array slot to be of the same type.

Declaring arrays

There are a few ways to declare an array. The following code shows three ways to create the same exact array.

// Insert one item at a time
var groceryList = new Array();
groceryList[0] = "Bananas";
groceryList[1] = "Pasta";
groceryList[2] = "Pumpkin";
groceryList[3] = "Tomato sauce";
// Place an array within a variable
var groceryList = ["Bananas", "Pasta", "Pumpkin", "Tomato sauce"];
// Call the array constructor with arguments
var groceryList = new Array("Bananas", "Pasta", "Pumpkin", "Tomato sauce");

Declaring an array of a set size

If you already know what the size of an array ought to be, you can do so upon initialization.

var myArray = new Array(10);

Retrieving array values

To retrieve an array value, simply use brackets ([]), with the index number placed inside.

To access the array items in a more object-oriented manner, you may use the dot notation, with the item(0) method.

groceryList[0];      // Bananas
groceryList.item(0); // Bananas

Changing array values

Changing an array value is the same method as assigning. The following code change the 3rd item in the grocery array to apples.

groceryList[2] = 'apples';

Adding and removing elements

There are two sets of functions used to add and remove elements, depending on whether you want to add to the front of back.

Adding to the front - shift and unshift

To add or remove elements to the front, use the shift() and unshift() functions.

var groceryList = ["Bananas", "Pasta", "Pumpkin", "Tomato sauce"];
groceryList.unshift("Chicken breast");
// ["Chicken breast", "Bananas", "Pasta", "Pumpkin", "Tomato sauce"]
groceryList.shift(); // now remove the front
// ["Bananas", "Pasta", "Pumpkin", "Tomato sauce"]

Adding to the back - push and pop

To add or remove elements from the back, use the push() and pop() functions.

var groceryList = ["Bananas", "Pasta", "Pumpkin", "Tomato sauce"];
groceryList.push("Chicken breast");
// ["Bananas", "Pasta", "Pumpkin", "Tomato sauce", "Chicken breast"]
groceryList.pop(); // now remove the front
// ["Bananas", "Pasta", "Pumpkin", "Tomato sauce"]


To sort elements, use the sort() function.

var groceryList = ["Tomatoes", "Lemons", "Apples", "Bananas"];
// ["Apples", "Bananas", "Lemons", "Tomatoes"]

Array attributes

To access the length of an array, access the length property.

var numGroceryItems = groceryList.length;  // 4

Concatenating two arrays

To add two arrays together, use the .concat function.

var arrayOne = [1, 2, 3];
var arrayTwo = [4, 5, 6];
var concatArray = arrayOne.concat(arrayTwo); // [1, 2, 3, 4, 5, 6]

Build modern and responsive webpages


Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Aching back from coding all day?

Inversion Therapy Table

Aching back from coding all day? Try Back Problems

Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.

$$ Check price
119.98119.98Amazon 4.5 logo(1,700+ reviews)

More Back Problems resources