JavaScript Array | Array length, push, pop, shift, unshift, IndexOf, forEach

The topic contains a brief explanation of JavaScript Array and how to create and manipulate JavaScript arrays.

Table of Contents

What is an Array

Arrays are the variables that are used to store multiple values in a single variable. This also can be compared with a variable that stores only one variable.

JavaScript arrays can capable to store multiple types of values, including number, string, objects, function, and even other arrays. This makes a more complex data structure like an array of arrays and an array of objects.

Create a JavaScript Array


var myArray = [1, 2, 3, 4];
var langNamesArray = ["Java", "PHP", "Wordpress"];
//Arrays in JavaScript can hold multiple types of data, as shown.

var myArray = [1, 2, 3, 4];

var langNamesArray = ["Java", "PHP", "Wordpress"];

//Arrays in JavaScript can hold multiple types of data, as shown.

Access an Array Item

On the time accessing an array from a variable we use an array index number. On JavaScript array operation, if you want the last element of an array, use ArrayName.length function and subtract 1 for the last array element.


var first = langNamesArray[0];
// Java

var last = langNamesArray[langNamesArray.<strong><span style="color: #1262db;">length</span></strong> - 1];
// Wordpress

var first = langNamesArray[0];

// Java

var last = langNamesArray[langNamesArray.length - 1];

// Wordpress

Add an element at the End of an Array

For adding new array element at the end of an array we use the array push function. Array push function is useful for adding an element to end of an array.


var newLength = langNamesArray.<span style="color: #1262db;"><strong>push</strong></span>('Laravel');
// ["Java", "PHP", "Wordpress", "Laravel"]

var newLength = langNamesArray.push('Laravel');

// ["Java", "PHP", "Wordpress", "Laravel"]

Remove last element in Array

For removing operation in an array element, we use an array pop function. Array pop function removes an array element from last of an array.


var last = langNamesArray.<span style="color: #1262db;"><strong>pop</strong></span>(); 
// remove Laravel (from the end)
// ["Java", "PHP", "Wordpress"];

var last = langNamesArray.pop();

// remove Laravel (from the end)

// ["Java", "PHP", "Wordpress"];

Remove from the front of an Array

Using array shift function to remove first element of an array.


var first = langNamesArray.<strong><span style="color: #1262db;">shift</span></strong>(); 
// remove Java from the front
// ["PHP", "Wordpress"];

var first = langNamesArray.shift();

// remove Java from the front

// ["PHP", "Wordpress"];

Adding the first element to an Array

For adding the first index element in an array we use array unshift function. Check below array unshift function uses the example :


var newLength = langNamesArray.<span style="color: #1262db;"><strong>unshift</strong></span>('Laravel') 
// add to the front
// ["Laravel", "PHP", "Wordpress"];

var newLength = langNamesArray.unshift('Laravel')

// add to the front

// ["Laravel", "PHP", "Wordpress"];

Find the index of an Array Element

For finding the index of an array element we use array indexOf function with array element or value of array parameter. Check the below example for explanation.


langNamesArray.push('Laravel');
//["Laravel", "PHP", "Wordpress"]

var pos = langNamesArray.<strong>indexOf</strong>('PHP');
// 1

langNamesArray.push('Laravel');

//["Laravel", "PHP", "Wordpress"]

var pos = langNamesArray.indexOf('PHP');

// 1

Loop in an Array

For getting all elements at once we use a loop in an array. In JavaScript array, we use the forEach loop. In the below example, we print an array element name and its index.


langNamesArray.<span style="color: #1262db;"><strong>forEach</strong></span>(function(item, index, array) {
  console.log(item, index);
});
// Java 0
// PHP 1
// Wordpress 2