Learn everything about JavaScript & supporting libraries/frameworks

JavaScript Array Complete reference

All Articles New Article

Javascript array - Complete reference

What is An Array:

ARRAY is a non-primitive data type of JavaScript that contributes to the data collection of a website. We know that everything in JavaScript is considered an object. So array is also an object. There are no properties of this property and the values of the end are separated by commas. It is usually specified by its index number. It uses memory references and can be nested many times.

In JavaScript, an array is a data structure that contains list of elements which store multiple values in a single variable.

Creating an array in javascript

//Using [] to declare an empty array
let week = []; //Simplest

//Creates an array with three days
let week = ['Monday', 'Tuesday', 'Wednesday'];

//Using constructor to declare an empty array
let week = new Array();  

//Creates an array of 7 length
let week = new Array(7); 

//Creates an array with three days
let week = new Array('Monday', 'Tuesday', 'Wednesday'); 

JavaScript Array methods and it works:

JavaScript has many arrays and array methods so that you can have complete control over the array and use it as needed. Below are array methods with usage details.

arr.push([element1[, ...[, elementN]]]) 
arr.concat(value1[, value2[, ...[, valueN]]]) 
arr.copyWithin(target, start, end)
arr.filter(callback[, thisArg]) 
arr.find(callback[, thisArg]) 
arr.forEach(callback[, thisArg])
arr.fill(value, start, end)
arr.findIndex(callback[, thisArg])
arr.indexOf(searchElement[, fromIndex])
arr.includes(searchElement, fromIndex)
arr.join(separator)
arr.lastIndexOf(searchElement, fromIndex)
arr.reduceRight(callback[, initialValue])
arr.unshift([element1[, ...[, elementN]]])
arr.slice(begin, end) 
array.splice(start, deleteCount, item1, item2, ...)
var myString = 'Pineapples, Bananas, Carrots, and Mangoes are awesome.';
console.log( myString.split(',') );
// => ["Pineapples", " Bananas", " Carrots", " and Mangoes are awesome."]
arr.some(callback[, initialValue]) 
arr.every(callback[, thisArg])
let arr = [1, 2, 3, 4, 5];
delete arr[3];
//[1, 2, 3, empty, 5];

Accessing array elements

let arr = [1, 2, 3, 4, 5];
arr[0];
//1

arr[1];
//2

arr[2];
//3

arr[3];
//4
let arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++){
   console.log(arr[i]);
}

//1
//2
//3
//4
//5
let arr = [2, 5, 3, 7, 5];
arr.sort(); //By default in ascending order
//[2, 3, 5, 5, 7];

arr.sort((a, b) => b - a);
//[7, 5, 5, 3, 2]
let arr = [2, 5, 3, 7, 5];
arr.indexOf(2);
//0

arr.indexOf(1);
//-1
let arr = new Array(7).fill(1);
//[1, 1, 1, 1, 1, 1, 1];

Create a Multidimensional Array

let student1 = ['Jack', 24];
let student2 = ['Sara', 23];
let student3 = ['Peter', 24];

// multidimensional array
let studentsData = [student1, student2, student3];

Javascript does not have an array of multiple dimension but like other C languages, it can have an array within an array.

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

/*
(3) [Array(3), Array(3), Array(3)]
0: (3) [1, 2, 3]
1: (3) [4, 5, 6]
2: (3) [7, 8, 9]
length: 3
__proto__: Array(0)
*/

You can loop through them to access all the elements.

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

//1
//2
//3
//4
//5

Access Elements of an Array

let x = [
['Jack', 24],
['Sara', 23], 
['Peter', 24]
];

// access the first item 
console.log(x[0]); // ["Jack", 24]

// access the first item of the first inner array
console.log(x[0][0]); // Jack

// access the second item of the third inner array
console.log(x[2][1]); // 24

Add an Element to a Multidimensional Array

Adding Element to the Outer Array

let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData.push(['Peter', 24]);

console.log(studentsData); //[["Jack", 24], ["Sara", 23], ["Peter", 24]

Adding Element to the Inner Array

// using index notation
let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData[1][2] = 'hello';

console.log(studentsData); // [["Jack", 24], ["Sara", 23, "hello"]]
// using push()
let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData[1].push('hello');

console.log(studentsData); // [["Jack", 24], ["Sara", 23, "hello"]]
let studentsData = [['Jack', 24], ['Sara', 23],];

// adding element at 1 index
studentsData.splice(1, 0, ['Peter', 24]);

console.log(studentsData); // [["Jack", 24], ["Peter", 24], ["Sara", 23]]

Remove an Element from a Multidimensional Array

Remove Element from Outer Array

// remove the array element from outer array
let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData.pop();

console.log(studentsData); // [["Jack", 24]]

Remove Element from Inner Array

// remove the element from the inner array
let studentsData = [['Jack', 24], ['Sara', 23]];
studentsData[1].pop();

console.log(studentsData); // [["Jack", 24], ["Sara"]]

Iterating over Multidimensional Array

let studentsData = [['Jack', 24], ['Sara', 23],];

// iterating over the studentsData
studentsData.forEach((student) => {
    student.forEach((data) => {
        console.log(data);
    });
});
let studentsData = [['Jack', 24], ['Sara', 23],];

for (let i of studentsData) {
  for (let j of i) {
    console.log(j);
  }
}
let studentsData = [['Jack', 24], ['Sara', 23],];

// looping outer array elements
for(let i = 0; i < studentsData.length; i++){

    // get the length of the inner array elements
    let innerArrayLength = studentsData[i].length;

    // looping inner array elements
    for(let j = 0; j < innerArrayLength; j++) {
        console.log(studentsData[i][j]);
    }
}

We use two different square brackets [][] to access the elements because the first square bracket return the array and then use the second square bracket to access the element of the returned array.

let arr = matrix[0];
//[1, 2, 3]

arr[0]
//1

or

let arr = matrix[0][0]
//1

As we can have an array within an array, we can create nested arrays.

let arr = [
   [
     [1, 2, 3],
     [3, 4, 5] 
   ],
   [
     [1, 2, 3],
     [3, 4, 5]
   ]
];

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

//1
//2
//3
//3
//4
//5

Learn more about JS Array

All Articles New Article
Learn everything about JavaScript & supporting libraries/frameworks