Learn how to build and design websites with our tutorials.

JavaScript Arrays Tutorial

View Tutorial Contents


What Are JavaScript Arrays?

A JavaScript array is an ordered list of values that are stored in a single variable.

An array can hold as many values as you want under a single name. The values of that array can be accessed by referring to an index number.

JavaScript arrays are zero-indexed. This means that the first element of an array is at index 0, the second element is at index 1, the third element is at index 2, and so on.


JavaScript Array Syntax

The syntax to create a JavaScript array literal is shown below.


var arrayName = [item1, item2, item3, ...];

The syntax to create a JavaScript array literal using the keyword new. It is typically recommended to NOT use this method of creating arrays.


var variableName = new Array("item1", "item2", "item3", ...);


How To Create JavaScript Arrays

The example below shows you how to create an array literal.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var people = ["Micheal", "Billy", "John"];
document.getElementById("demo").innerHTML = people[1];

</script>
</body>
</html>

The example above will output:


Billy

JavaScript arrays can span multiple lines, which can make them easier to read.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var people =[
		"Micheal",
		"Billy",
		"John"
		];
document.getElementById("demo").innerHTML = people[1];

</script>
</body>
</html>

DO NOT put a comma after the last element, for example, "John",. This is because this may have different effects on different web browsers.


Accessing Array Elements

JavaScript arrays are zero-indexed. This means that the first element of an array is at index 0, the second element is at index 1, the third element is at index 2, and so on.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>

var people = ["Micheal", "Billy", "John"];
document.getElementById("demo1").innerHTML = people[0]; // accesses the first item
document.getElementById("demo2").innerHTML = people[1]; // accesses the second item
document.getElementById("demo3").innerHTML = people[2]; // accesses the third item

</script>
</body>
</html>

The example code above outputs the paragraphs below.

Micheal

Billy

John

If an in an array is empty, undefined is returned.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var people = ["Micheal", "Billy", "John"];
document.getElementById("demo").innerHTML = people[3]; // undefined is returned

</script>
</body>
</html>

The example code above outputs:


undefined


Modifying Array Elements

The example code below shows you how to modify elements within an array.


var people = ["Micheal", "Billy", "John"];

people[0] = "Maria"; // the first array element is now Maria
people[1] = "James"; // the second array element is now James


JavaScript Arrays And Variables

JavaScript variables can hold objects and arrays are a type of object. Because of this you can have objects, functions and even other arrays within an array.


var myArray;

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = people;


JavaScript Array Properties

JavaScript properties are the values that are associated with a JavaScript object. These can be any valid JavaScript value (string, number, object, function, etc.).

JavaScript properties can usually be changed, added and deleted though some may be read only.


JavaScript Array length Property

The JavaScript length property of an array returns the length of that array, in other words, the number of elements the array has.

The code example below shows you how to use the length property to get the length of an array.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var cars = ["Ford", "Chevrolet", "Honda", "Toyota", "Tesla"];
document.getElementById("demo").innerHTML = cars.length;

</script>
</body>
</html>

The code example above outputs:


5

Because arrays are zero-indexed, the length property will always be one more than the highest array index number.


JavaScript Array Methods

JavaScript methods are actions that can be performed on objects, and JavaScript arrays are a type of object.

The difference between objects and arrays is that objects use named indexes while arrays use numbered indexes.

The table below lists the JavaScript methods.

Method Description
concat() Joins two or more arrays and returns a copy of the joined arrays
indexOf() Searches the array for an element and returns its position
join() Joins all elements of an array into a string
lastIndexOf() Searches the array for an element, starting at the end, and returns its position
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Removes selected a parts of an array, and returns the new array
sort() Sorts the elements of an array
splice() Adds and/or removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new length
valueOf() Returns the primitive value of an array

Joining Arrays

The concat() method joins two or more arrays and returns a new array.

The code example below shows you how to join two arrays using the concat() method.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var myCars = ["Ford", "Honda"];
var myTrucks = ["Toyota", "Chevrolet"];
var myVehicles = myCars.concat(myTrucks);
document.getElementById("demo").innerHTML = myVehicles;

</script>
</body>
</html>

The code example above outputs:


Ford,Honda,Toyota,Chevrolet

The code example below shows you how to join three arrays using the concat() method.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var myCars = ["Ford", "Honda"];
var myTrucks = ["Toyota", "Chevrolet"];
var myMotorCycles = ["Kawasaki", "Suzuki"];
var myVehicles = myCars.concat(myTrucks, myMotorCycles);
document.getElementById("demo").innerHTML = myVehicles;

</script>
</body>
</html>

The code example above outputs:


Ford,Honda,Toyota,Chevrolet,Kawasaki,Suzuki


Search For Specified Item

The JavaScript indexOf() method searches the array for the specified item, and returns its position. It will begin searching at the specified position, or at the beginning of the array if no start position is specified, and will end the search at the end of the array.

If the item is present within the array more than one time, it will return the position of the first item that is looking for.

Because JavaScript arrays are zero-indexed, the very first item of an array is zero (0).

You can search from the end of an array to the beginning of an array using the lastIndexOf() method.

The JavaScript indexOf() method does not work in Internet Explorer 8 and earlier versions.

The code example below shows you how to use the indexOf() method to search an array for a specified item.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Bananas", "Cherries", "Dates"];
var picked = fruits.indexOf("Cherries");
document.getElementById("demo").innerHTML = picked;

</script>
</body>
</html>

The code example above outputs:


2

The code example below shows you how to use the indexOf() method to search an array for a specified item beginning at a specified position (3 in this example).


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Bananas", "Cherries", "Dates", "Eggplant", "Fig", "Grapes", "Cherries"];
var picked = fruits.indexOf("Cherries", 3);
document.getElementById("demo").innerHTML = picked;

</script>
</body>
</html>

The code example above outputs:


7


Converting Arrays To Strings

Both the JavaScript valueOf() method and the toString() method return an array as a string.

The code example below shows you how to use the valueOf() method to convert an array to a string.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Bananas", "Cherries", "Dates", "Eggplant", "Fig", "Grapes"];
document.getElementById("demo").innerHTML = fruits.valueOf();

</script>
</body>
</html>

The code example above outputs:


Apples,Bananas,Cherries,Dates,Eggplant,Fig,Grapes

The code example below shows you how to use the toString() method to convert an array to a string.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Bananas", "Cherries", "Dates", "Eggplant", "Fig", "Grapes"];
document.getElementById("demo").innerHTML = fruits.toString();

</script>
</body>
</html>

The code example above outputs:


Apples,Bananas,Cherries,Dates,Eggplant,Fig,Grapes

The JavaScript join() method is similar to the valueOf() and the toString() methods, except that you can specify the separator.

The code example below shows you how to use the join() method to convert an array to a string.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Bananas", "Cherries", "Dates", "Eggplant", "Fig", "Grapes"];
document.getElementById("demo").innerHTML = fruits.join(" + ");

</script>
</body>
</html>

The code example above outputs:


Apples + Bananas + Cherries + Dates + Eggplant + Fig + Grapes


Adding New Elements And Removing Elements

The JavaScript push() method adds a new element at the end of the array and returns the new array, including the newly added element.

The code example below shows you how to use the push() method to add a new element to an array and then return that array.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="addFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe"];
document.getElementById("demo").innerHTML = fruits;

function addFruit() {
	fruits.push("Watermelon");
	document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.

The JavaScript pop() method removes the last element of an array and returns that array, not including the element that was removed.

The code example below shows you how to use the pop() method to remove the last element of an array.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="removeFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe"];
document.getElementById("demo").innerHTML = fruits;

function removeFruit() {
	fruits.pop();
	document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.

You can also delete an element using the delete operator, however, deleting an array element leaves an undefined space in the array so it best to use the pop() or splice() methods instead.


Shifting Array Elements

The JavaScript shift() method removes the first element of an array, and "shifts" the remaining elements one index number down.

The shift() method changes the length of an array.

The code example below shows you how to use the shift() method to remove the first element of an array.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="shiftFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe"];
document.getElementById("demo").innerHTML = fruits;

function shiftFruit() {
    fruits.shift();
    document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.

The JavaScript unshift() method adds a new element to the beginning of an array, and "unshifts" the other elements moving each one up one index number.

The code example below shows you how to use the unshift() method to add an element to the beginning of an array.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="unshiftFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe"];
document.getElementById("demo").innerHTML = fruits;

function unshifFruit() {
    fruits.unshift("Watermelon");
    document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.


Changing Array Elements

Array elements are accessed by their index number.

The code example below shows you how to change an element of an array. In this example, the first element is changed.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="changeElement()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe"];
document.getElementById("demo").innerHTML = fruits;

function changeElement(){
	fruits[0] = "Watermelon";
	document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.

The JavaScript length property provides a way to append a new element to an array.

The code example below shows you how to change an element of an array. In this example, the first element is changed.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="appendFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe"];
document.getElementById("demo").innerHTML = fruits;

function appendFruit() {
    fruits[fruits.length] = "Watermelon";
    document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.


Using splice() To Add And Remove Elements

The JavaScript splice() method can be used to add new items to an array.

The code example below shows you how to use the splice() method to add new items to an array.

In the example below, the first parameter (2) defines the position where new elements should be added.

The second parameter (0) defines how many elements should be removed.

The parameters that follow ("Watermelon", "Pineapple") define the new elements that are to be added.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="spliceAdd()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe", "Dates"];
document.getElementById("demo").innerHTML = fruits;
function spliceAdd() {
    fruits.splice(2, 0, "Watermelon", "Pineapples");
    document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.

The code example below shows you how to use the splice() method to remove elements from an array.

The first parameter (0) defines the position where elements should begin being removed.

The second parameter (2) defines how many elements should be removed.

If you only want to remove elements without replacing them, the third parameter should be omitted so that no new elements will be added in the place of the removed elements.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="spliceRemoveFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Berries", "Cantaloupe", "Dates"];
document.getElementById("demo").innerHTML = fruits;

function spliceRemoveFruit(){
	fruits.splice(0, 1);
	document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.


Sorting Arrays Alphabetically

The JavaScript sort() method sorts an array alphabetically.

The code example below shows you how to use the sort() method to sort an array alphabetically.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="sortFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Watermelon", "Pineapple", "Apples", "Dates", "Cantaloupe", "Berries"];
document.getElementById("demo").innerHTML = fruits;

function sortFruit(){
	fruits.sort();
	document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.


Reversing Arrays

The JavaScript reverse() method reverses the elements in an array.

The code example below shows you how to use the reverse() method to reverse the elements in an array.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="reverseFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Watermelon", "Pineapple", "Apples", "Dates", "Cantaloupe", "Berries"];
document.getElementById("demo").innerHTML = fruits;

function reverseFruit(){
	fruits.reverse();
	document.getElementById("demo").innerHTML = fruits;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.


Sorting Arrays Numerically

By default, the sort() method will sort the values of an array as strings, in alphabetical order. This works well when dealing with string values that are letters and words, however, this not work so well when numbers are stored as strings.

The solution is provide a compare function.

The code example below shows you how to sort numbers from lowest to highest values.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="sortAscending()">Click Here</button>

<p id="demo"></p>

<script>

var numbersAscending = [33, 44, 50, 0, 1, -2, 10, 100];
document.getElementById("demo").innerHTML = numbersAscending;    

function sortAscending(){
    numbersAscending.sort(function(a, b){return a-b});
    document.getElementById("demo").innerHTML = numbersAscending;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.

The code example below shows you how to sort numbers from highest to lowest values.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="sortDescending()">Click Here</button>

<p id="demo"></p>

<script>

var numbersDescending = [33, 44, 50, 0, 1, -2, 10, 100];
document.getElementById("demo").innerHTML = numbersDescending;    

function sortDescending(){
    numbersDescending.sort(function(a, b){return b-a});
    document.getElementById("demo").innerHTML = numbersDescending;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.


Slicing Arrays

The JavaScript slice() method takes out a piece of an array and places it into a new array, leaving the original array as it was.

The slice() method selects elements starting at the start argument, and ends at, but does not include, the end argument. If the end argument is omitted, the slice() method takes out the rest of the array.

The code example below shows you how to slice a part of an array and places the selected elements into a new array.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="sliceFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Bananas", "Cherries", "Dates", "Eggplant", "Fig", "Grapes"];
document.getElementById("demo").innerHTML = fruits;

function sliceFruit(){
	var citrus = fruits.slice(1,3);
	document.getElementById("demo").innerHTML = fruits + "<br />" + citrus;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.

The code example below shows you how to slice a part of an array and places the selected elements into a new array. In the code example below, the second argument is omitted.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="sliceFruit()">Click Here</button>

<p id="demo"></p>

<script>

var fruits = ["Apples", "Bananas", "Cherries", "Dates", "Eggplant", "Fig", "Grapes"];
document.getElementById("demo").innerHTML = fruits;

function sliceFruit(){
	var citrus = fruits.slice(2);
	document.getElementById("demo").innerHTML = fruits + "<br />" + citrus;
}

</script>
</body>
</html>

The code example above outputs the button and the paragraph below.