Arrays

Published May 6, 2021Updated Mar 20, 2024

In JavaScript, an Array is a list of ordered, stored data. It can hold items that are of any data type (e.g. string, boolean, number, etc.) and it can hold different data types together in a single array.

Syntax

Arrays can be created by using square brackets [], with individual elements separated by commas:

// An array containing numbers
const numberArray = [0, 1, 2, 3];

// An array containing different data types
const mixedArray = [1, 'chicken', false];

Creating an Array

Run the code block below to see how to create an array using an array literal and print it to the console:

us
Visit us
code
Hide code
Code
OutputHide output
Hide output
Loading...

Note: Whitespace is ignored and declarations can span multiple lines.

Arrays can also be created with the Array class by using the new keyword and passing in the elements as comma-separated arguments:

const musicGenres = new Array('Rock', 'Pop', 'Country');

Though, because the outcome is exactly the same, it is preferable to use the literal method for simplicity and execution speed.

An array can also be created as empty and have its values added later through the help of the .push() function:

const musicGenres = [];
musicGenres.push('Rock');

console.log(musicGenres); // Output: ['Rock']

When creating an array, not only primitive data types can be passed as elements but also declared variables holding these data types. Run the code block below to see how an array can be created using the values of already declared variables.

us
Visit us
code
Hide code
Code
OutputHide output
Hide output
Loading...

Accessing the Elements of an Array

Array elements are ordered by index values, starting at 0:

Index 0 has the first element.
Index 1 has the second element.
Index 2 has the third element.
Index n-1 has the nth element.

Individual elements in the array can be accessed/changed using the array name and the element’s index surrounded by square brackets.

Run the code below to see how the element at index 0 in the musicGenres array can be accessed and have its value updated:

us
Visit us
code
Hide code
Code
OutputHide output
Hide output
Loading...

Accessing an array using an unused index will return undefined. However, a new value can still be assigned to an unused index of an array. When doing so, any gaps in the assigned indices will remain undefined.

const musicGenres = ['Rock', 'Pop', 'Country'];
musicGenres[4] = 'Hip Hop'; // a valid assignment

console.log(musicGenres[3]); // Output: undefined

Nested Arrays

Any object can be an element of an array, including other arrays. Arrays with one or more arrays as elements are referred to as “nested arrays”. Similar to accessing the elements of a regular array, accessing elements within nested arrays requires the additional indices for referencing inner array elements.

// Create a nested array
const musicGenres = [
  ['Rock', 'Pop', 'Country'],
  ['Soul', 'Hip Hop', 'Reggae'],
  ['Folk', 'Classical', 'Electronic'],
];

// Retrieve the genre at index 2 of the array at index 1
console.log(musicGenres[1][2]);
// Output: Reggae

// Retrieve the genre at index 1 of the array at index 0
console.log(musicGenres[0][1]);
// Output: Pop

The same process applies to nested arrays that themselves contain nested arrays. The more “nested” the array, the more indices, or square bracket pairs [ ], are required for accessing their elements.

Run the code below to see how elements in nested arrays can be accessed.

us
Visit us
code
Hide code
Code
OutputHide output
Hide output
Loading...

Arrays

.at(): Returns the element at a specified index in an array.
.concat(): Merges, or concatenates, two or more arrays.
.copyWithin(): Returns a mutated array with part of it copied to another location in the same array, and its length unchanged.
.every(): Checks if all elements in an array satisfy the condition specified by the given function.
.filter(): Creates a new array with all elements that pass the test from the provided function.
.find(): Returns the first element in the array that satisfies the given function.
.findIndex(): Returns the first index that passes the callback function's test. Returns -1 if no element passes the test.
.findLast(): Returns the last instance of an element in an array that meets the specified condition.
.findLastIndex(): Iterates through the array in reverse order and returns the index that passes the provided testing function.
.forEach(): Loops over the array, passing each item in the array into the callback function provided.
.includes(): Returns true if a given value is included in an array.
.indexOf(): Returns the first index at which an element can be found. Returns -1 if element is not found.
.isArray(): Returns true for arrays, otherwise false.
.join(): Elements of an array are converted to strings and concatenated together, returning the resulting string.
.lastIndexOf(): Returns the last index at which an element can be found.
.length: Returns the specific number of elements in the array.
.map(): Creates a new array with the results of calling a function for every element in array.
.pop(): Removes the last element of an array, decrements the array length, and returns the value that it removed.
.push(): Adds one or more elements to the end of the array and returns the new length.
.reduce(): Combines each element of an array, using a specified reducer function, and returns a single value.
.reverse(): Reverses the order of the elements of an array in place and returns the reversed array.
.shift(): Removes and returns the first element of the array. All subsequent elements will shift down one place.
.slice(): Returns a shallow copy of a part of an array without altering the original array.
.some(): Runs a conditional through an array and returns a boolean if any value fulfills the conditional.
.sort(): Returns an array with its items sorted in place.
.splice(): Modifies an array by inserting, deleting, and/or replacing array elements then returns an array of deleted elements.
.toReversed(): Reverses the elements within the array and returns a new copy of the array.
.toSorted(): Takes an array and returns a new array with all the elements sorted in ascending order.
.toSpliced(): Returns a new array with deleted, replaced, or inserted values at the given index.
.toString(): Returns a string with each of the array values, separated by commas. Does not mutate the original array.
.unshift(): Adds one or more elements to beginning of array and returns new length.
.valueOf(): Returns the value of all the elements of the original array.
.with(): Returns a copy of an array with the given modification.