JavaScript Arrays

Anonymous contributor's avatar
Anonymous contributor
Published May 6, 2021Updated Mar 20, 2024
Contribute to Docs

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.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn JavaScript

    Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.
    • Beginner Friendly.
      15 hours

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:

Code
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.


Code
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:


Code
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.


Code
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.
.entries()
Returns an iterator with key/value pairs for each index in the array.
.every()
Checks if all elements in an array satisfy the condition specified by the given function.
.fill()
Changes all elements within a range of indices in an array to a static value.
.filter()
Creates a new array containing the elements from the original array that pass a test implemented by a 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.
.flatMap()
Returns a new array formed by applying a callback function to each element of the original array, then flattening the result by one level.
.forEach()
Loops over a given array, passing each item in the array into the callback function provided.
.from()
Creates a new Array instance from an iterable or array-like object.
.includes()
Returns true if a given value is included in an array.
.indexOf()
Returns the first index at which a specified element can be found in an array, or -1 if not present.
.isArray()
Returns true for arrays, otherwise false.
.join()
Elements of an array are converted to strings and concatenated together, returning the resulting string.
.keys()
Returns a new array iterator object containing the keys for each index in the array.
.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()
Executes a reducer function on each element of an array, resulting in a single output 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. It contains references to the sliced elements in the original array, not the elements themselves.
.some()
Runs a conditional through an array and returns a boolean if any value fulfills the conditional.
.sort()
Sorts the elements of an array in place.
.splice()
Modifies an array by inserting, deleting, and/or replacing array elements then returns an array of deleted elements.
.toLocaleString()
Converts array elements to localized string representations and joins them with locale-specific separators.
.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.
.values()
Returns a new array iterator object that contains the values of each element in the array.
.with()
Returns a copy of an array with the given modification.
flat()
Creates a new array with all sub-array elements recursively concatenated into it up to the specified depth.
reduceRight()
Applies a reducer function to array elements from right to left, accumulating a single output value.
All contributors
Contribute to Docs
Learn JavaScript on Codecademy
  • Career path
    Front-End Engineer
    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course
    Learn JavaScript
    Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.
    • Beginner Friendly.
      15 hours