JavaScript Arrays

JavaScript Array is a single variable that is used to store elements of different data types. JavaScript arrays are zero-indexed. Javascript Arrays are not associative in nature.

Declaration of an Array

There are basically two ways to declare an array.

1. Creating an array using array literal:

let arrayName = [value1, value2, ...];

Javascript

// Initializing while declaring
let courses = ["HTML", "CSS", "Javascript", "React"];
console.log(courses)

Output

[ 'HTML', 'CSS', 'Javascript', 'React' ]

2. Creating an array using the JavaScript new keyword:

let arrayName = new Array();

javascript

// Initializing while declaring
let arr1 = new Array(3)
arr1[0] = 10
arr1[1] = 20
arr1[2] = 30
console.log("Array 1: ", arr1)

// Creates an array having elements 10, 20, 30, 40, 50
let arr2 = new Array(10, 20, 30, 40, 50);
console.log("Array 2: ", arr2)

// Creates an array of 5 undefined elements
let arr3 = new Array(5);
console.log("Array 3: ", arr3)

// Creates an array with one element
let arr4 = new Array("1BHK");
console.log("Array 4: ", arr4)

Output

Array 1:  [ 10, 20, 30 ]
Array 2:  [ 10, 20, 30, 40, 50 ]
Array 3:  [ <5 empty items> ]
Array 4:  [ '1BHK' ]

Note: Both the above methods do exactly the same. Use the array literal method for efficiency, readability, and speed.

Accessing Elements of an Array

Any element in the array can be accessed using the index number. The index in the arrays starts with 0.

Javascript

const courses = ["HTML", "CSS", "Javascript"];
console.log(courses[0])
console.log(courses[1])
console.log(courses[2])

Output

HTML
CSS
Javascript

Change elements from a pre-defined array

Example : In the given example, we have changed the value of the first element that is ‘CSS’ to ‘GeeksforGeeks’

Javascript

const courses = ["HTML", "CSS", "Javascript"];
console.log(courses)
courses[1]= "GeeksforGeeks"
console.log(courses)

Output

[ 'HTML', 'CSS', 'Javascript' ]
[ 'HTML', 'GeeksforGeeks', 'Javascript' ]

Convert an Array to String:

Example : In the given example, we have an in-built method toString() in Javascript that converts an array to a string.

Javascript

const courses = ["HTML", "CSS", "Javascript"];
console.log(courses.toString())

Output

HTML,CSS,Javascript

Increase and decrease the length of an array :

Example : In the given example, We have increased and decreased the length of an array using the Javascript’s length property.

Javascript

const courses = ["HTML", "CSS", "Javascript"];
courses.length = 5 // Increasing array length to 5
console.log("Array after increased length: " ,courses)
courses.length = 2 // Decreasing array length to 2
console.log("Array after decreased length: " ,courses)

Output

Array after increased length:  [ 'HTML', 'CSS', 'Javascript', <2 empty items> ]
Array after decreased length:  [ 'HTML', 'CSS' ]

We can also update an array after initialization :

javascript

const courses = ["HTML", "CSS", "Javascript"];
courses.length = 5 // Increasing array length to 5
console.log("Array after increased length: " ,courses)

courses[3] = 'PhP'
courses[4] = 'React'
console.log("Array after initializing: ", courses)

Output

Array after increased length:  [ 'HTML', 'CSS', 'Javascript', <2 empty items> ]
Array after initializing:  [ 'HTML', 'CSS', 'Javascript', 'PhP', 'React' ]

Loop through Javascript Array Elements :

Example : In the given example, We have looped through the elements of a Javascript array using the for loop:

Javascript

const courses = ["HTML", "CSS", "Javascript"];
for (let i = 0; i < courses.length; i++) {
    console.log(courses[i])
}

Output

HTML
CSS
Javascript

This can also be done by using the Array.forEach() function of Javascript.

Javascript

const courses = ["HTML", "CSS", "Javascript"];
courses.forEach(myfunc);
function myfunc(elements) {
    console.log(elements);
}

Output

HTML
CSS
Javascript

Adding new elements to JavaScript Array :

Example : In the given example, We have used the Javascript in-built push() method we can add new elements to an array.

Javascript

const courses = ["HTML", "CSS", "Javascript"];
console.log("Original Array: ",courses)
courses.push("React")
console.log("Array after adding an element: ",courses)

Output

Original Array:  [ 'HTML', 'CSS', 'Javascript' ]
Array after adding an element:  [ 'HTML', 'CSS', 'Javascript', 'React' ]

We can also add a new element to a Javascript array using the length property.

Javascript

const courses = ["HTML", "CSS", "Javascript"];
console.log("Original Array: ",courses)
courses[courses.length] = "React"
console.log("Array after adding an element: ",courses)

Output

Original Array:  [ 'HTML', 'CSS', 'Javascript' ]
Array after adding an element:  [ 'HTML', 'CSS', 'Javascript', 'React' ]

Arrays are Objects :

Example : In the given example, The Javascript typeof operator returns “object” for arrays.

Javascript

const courses = ["HTML", "CSS", "Javascript"];
console.log(typeof courses)

Output

object

Difference between Javascript arrays and objects

• Javascript arrays use indexes as numbers
• objects use indexes as names.

When to use JavaScript Arrays and Objects?

• Arrays are used when we want element names to be numeric.
• Objects are used when we want element names to be strings.

JavaScript new Array() :

• JavaScript has a built-in array constructor new Array().
• [] can also be used.

These two different statements both create a new empty array named points:

const points = new Array();
const points = [];

Recognizing a JavaScript Array

There are two methods by which we can recognize a JavaScript array:

• By using Array.isArray() method
• By using instanceof method

Below is an example showing both approaches:

Javascript

const courses = ["HTML", "CSS", "Javascript"];
console.log("Using Array.isArray() method: ",Array.isArray(courses))
console.log("Using instanceof method: ",courses instanceof Array)

Output

Using Array.isArray() method:  true
Using instanceof method:  true

A common error is faced while writing the arrays:

const numbers = [5]
// and
const numbers = new Array(5) 

Javascript

const numbers = [5]
console.log(numbers)

Output

[ 5 ]

The above two statements are not the same.

Output: This statement creates an array with an element ” [5] “.

[5]

Javascript

const numbers = new Array(5)
console.log(numbers)

Output

[ <5 empty items> ]

For commonly used Array methods refer to the links below.

• JavaScript Array Functions – Part 1
• JavaScript Array Functions – Part 2
• JavaScript Array Functions – Part 3

We have a complete list of Javascript Array methods, to check those please go through this Javascript Array reference article.

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.