Arrays

Arrays are lists of ordered, stored data. They can hold items that are of any data type.

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];

Another way to creating a new instance of the Array class and passing the elements as a comma-separated list of arguments:

const classArray = new Array(0, 1, 2, 3);

Creating an Array

The most straightforward way to create an array is using an array literal as in the above example.

const fruit = ['Apple', 'Orange', 'Banana'];

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

const fruit = new Array('Apple', 'Orange', 'Banana');

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

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 using the array name and the element’s index surrounded by square brackets.

This code accesses the value of the first element in the fruit array:

const fruit = ['Apple', 'Orange', 'Banana'];
console.log(fruit[0]);
// Output: Apple

Array elements can be changed by accessing the element and assigning a new value to it.

const fruit = ['Apple', 'Orange', 'Banana'];
fruit[1] = 'Mango';
console.log(fruit[1]);
// Output: Mango

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 fruit = ['Apple', 'Orange', 'Banana'];
fruit[4] = 'Mango'; // a valid assignment
console.log(fruit[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 food = [
['Apple', 'Orange', 'Banana'],
['Strawberry', 'Blueberry', 'Raspberry'],
['Potato', 'Carrot', 'Broccoli'],
];
// Retrieve the food string at index 2 of the array at index 1
console.log(food[1][2]);
// Output: Raspberry
// Retrieve the food string at index 1 of the array at index 0
console.log(food[0][1]);
// Output: Orange

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

Arrays

.concat()
Merges, or concatenates, two or more arrays.
.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 satifies the given function.
.findIndex()
Returns the first index that passes the callback function's test. Returns -1 if no element passes the test.
.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. Returns -1 if element is not 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 end of array and returns new length.
.reduce()
Combines each element of an array, using a reducer function you specify, 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 part of array, while original array is not modified.
.sort()
Sorts the elements of an array in place and returns the sorted array.
.splice()
Modifies array by inserting, deleting, and/or replacing array elements then returns an array of deleted elements.
.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.
Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn JavaScript on Codecademy