JavaScript Array Methods: Create with Example

What is an Array in JavaScript?

An array is an object that can store a collection of items. Arrays become really useful when you need to store large amounts of data of the same type. Suppose you want to store details of 500 employees. If you are using variables, you will have to create 500 variables, whereas you can do the same with a single array. You can access the items in an array by referring to its index number, and the index of the first element of an array is zero.

Unlike arrays in strictly typed languages, a JavaScript array is dynamic. Its length grows automatically when a new element is assigned, and a single array may hold strings, numbers, booleans, objects, and even other arrays at the same time. This flexibility makes arrays the default container for list data in browser scripts and server-side code alike.

How to Create an Array in JavaScript

You can create an array in JavaScript as given below.

var students = ["John", "Ann", "Kevin"];

Here, you are initializing your array as and when it is created with values “John”, “Ann” and “Kevin”. The index of “John”, “Ann” and “Kevin” is 0, 1 and 2 respectively. If you want to add more elements to the students array, you can do it like this:

students[3] = "Emma";
students[4] = "Rose";

You can also create an array using the Array constructor like this:

var students = new Array("John", "Ann", "Kevin");

OR

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

How to Access and Modify Array Elements

Every element sits at a numbered position. Square bracket notation reads a value, assigns a new value, or appends a fresh entry when the index equals the current length.

let students = ["John", "Ann", "Kevin"];

console.log(students[0]);              // John  - first element
console.log(students[students.length - 1]); // Kevin - last element

students[1] = "Anna";                // replace an existing value
students[3] = "Emma";                // append a new value

console.log(students);              // ["John", "Anna", "Kevin", "Emma"]
console.log(students.length);       // 4
console.log(students[9]);              // undefined - index does not exist

JavaScript Array Methods

The Array object has many properties and methods which help developers to handle arrays easily and efficiently. You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().

1. length property –> If you want to know the number of elements in an array, you can use the length property.
2. prototype property –> If you want to add new properties and methods, you can use the prototype property.
3. reverse method –> You can reverse the order of items in an array using a reverse method.
4. sort method –> You can sort the items in an array using the sort method.
5. pop method –> You can remove the last item of an array using a pop method.
6. shift method –> You can remove the first item of an array using the shift method.
7. push method –> You can add a value as the last item of the array.

The reference table below groups the most frequently used methods so you can see at a glance which ones change the original array and which ones return a new value.

Adding and Removing Elements

let fruits = ["apple", "banana"];

fruits.push("cherry");      // ["apple", "banana", "cherry"]
fruits.unshift("mango");    // ["mango", "apple", "banana", "cherry"]
fruits.pop();                // ["mango", "apple", "banana"]
fruits.shift();              // ["apple", "banana"]

// splice(startIndex, deleteCount, ...itemsToInsert)
fruits.splice(1, 0, "kiwi"); // ["apple", "kiwi", "banana"]
console.log(fruits);

Searching, Copying, and Joining

let colors = ["red", "green", "blue", "green"];

console.log(colors.indexOf("green"));     // 1  - first match only
console.log(colors.lastIndexOf("green")); // 3
console.log(colors.includes("pink"));     // false
console.log(colors.slice(1, 3));         // ["green", "blue"]
console.log(colors.join(" | "));         // red | green | blue | green
console.log(colors.concat(["black"]));   // new array, colors unchanged

Iteration Methods: forEach, map, filter, and reduce

Modern JavaScript favours callback-driven methods over manual index loops, because the intent of the operation is stated directly in the method name.

const scores = [45, 72, 88, 31, 95];

scores.forEach(s => console.log(s));   // prints each score

const doubled = scores.map(s => s * 2);  // [90, 144, 176, 62, 190]
const passed  = scores.filter(s => s >= 50); // [72, 88, 95]
const total   = scores.reduce((sum, s) => sum + s, 0); // 331
const first   = scores.find(s => s > 80);   // 88

console.log(doubled, passed, total, first);

JavaScript Array Example with Source Code

The script below builds a students array, adds a custom display method through the prototype property, and then demonstrates length, sort, reverse, pop, and push in sequence. Try this yourself:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>

Expected Output:

students array
John
Ann
Aaron
Edwin
Elizabeth

The number of items in students array is 5

The SORTED students array
Aaron
Ann
Edwin
Elizabeth
John

The REVERSED students array
John
Elizabeth
Edwin
Ann
Aaron

THE students array after REMOVING the LAST item
John
Elizabeth
Edwin
Ann

THE students array after PUSH
John
Elizabeth
Edwin
Ann
New Stuff

Notice that sort places “Aaron” before “Ann” because uppercase and lowercase letters are compared by their character codes. Notice also that pop removed “Aaron” from the reversed array, which confirms that both sort and reverse changed the original array in place.

How to Loop Through a JavaScript Array

Four looping styles are available, and each one suits a different situation. The classic for loop gives full control over the index, for…of reads values directly, forEach expresses intent clearly, and for…in should be reserved for object properties.

const cities = ["Paris", "Tokyo", "Cairo"];

// 1. Classic for loop - index is available
for (let i = 0; i < cities.length; i++) {
    console.log(i + ": " + cities[i]);
}

// 2. for...of loop - value is available
for (const city of cities) {
    console.log(city);
}

// 3. forEach with index parameter
cities.forEach((city, index) => console.log(index, city));

// 4. entries() when both index and value are needed
for (const [index, city] of cities.entries()) {
    console.log(index, city);
}

A deeper treatment of loop syntax, including while and do…while, appears in the article on how to use loops in JavaScript.

Multidimensional Arrays in JavaScript

JavaScript has no dedicated matrix type. A grid is simply an array whose elements are themselves arrays, and two index expressions are used to reach a single cell.

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]); // 6  - row index 1, column index 2

for (const row of matrix) {
    console.log(row.join(" "));
}

// flatten a nested array into a single level
console.log(matrix.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Output:

6
1 2 3
4 5 6
7 8 9
[1, 2, 3, 4, 5, 6, 7, 8, 9]

Arrays appear in almost every practical script, from form validation to data rendering. Continue with the practical JavaScript code examples, review JavaScript strings for text handling, and read about internal and external JavaScript to decide where these scripts belong in a page. Developers who want static type checking over array contents can move on to the TypeScript tutorial.

FAQs