The following statements create equivalent arrays:

const arr1 = new Array(element0, element1, /* …, */ elementN);const arr2 = Array(element0, element1, /* …, */ elementN);const arr3 = [element0, element1, /* …, */ elementN];

element0, element1, …, elementN is a list of values for the array's elements. When these values are specified, the array is initialized with them as the array's elements. The array'slength property is set to the number of arguments.

The bracket syntax is called an "array literal" or "array initializer." It's shorter than other forms of array creation, and so is generally preferred. SeeArray literals for details.

To create an array with non-zero length, but without any items, either of the following can be used:

// This...const arr1 = new Array(arrayLength);// … results in the same array as thisconst arr2 = Array(arrayLength);// This has exactly the same effectconst arr3 = [];arr3.length = arrayLength;

In addition to a newly defined variable as shown above, arrays can also be assigned as a property of a new or an existing object:

const obj = {};// …obj.prop = [element0, element1, /* …, */ elementN];// ORconst obj = { prop: [element0, element1, /* …, */ elementN] };

If you wish to initialize an array with a single element, and the element happens to be aNumber, you must use the bracket syntax. When a singleNumber value is passed to theArray() constructor or function, it is interpreted as anarrayLength, not as a single element.

This creates an array with only one element: the number 42.

const arr = [42];

This creates an array with no elements andarr.length set to 42.

const arr = Array(42);

This is equivalent to:

const arr = [];arr.length = 42;

CallingArray(N) results in aRangeError, ifN is a non-whole number whose fractional portion is non-zero. The following example illustrates this behavior.

const arr = Array(9.3); // RangeError: Invalid array length

If your code needs to create arrays with single elements of an arbitrary data type, it is safer to use array literals. Alternatively, create an empty array first before adding the single element to it.

You can also use theArray.of static method to create arrays with single element.

const arr = Array.of(9.3); // arr contains only one element 9.3

Because elements are also properties, you can access them usingproperty accessors. Suppose you define the following array:

const myArray = ["Wind", "Rain", "Fire"];

You can refer to the first element of the array asmyArray[0], the second element of the array asmyArray[1], etc… The index of the elements begins with zero.

const arr = ["one", "two", "three"];arr[2]; // threearr["length"]; // 3

You can populate an array by assigning values to its elements. For example:

const emp = [];emp[0] = "Casey Jones";emp[1] = "Phil Lesh";emp[2] = "August West";

const arr = [];arr[3.4] = "Oranges";console.log(arr.length); // 0console.log(Object.hasOwn(arr, 3.4)); // true

You can also populate an array when you create it:

const myArray = new Array("Hello", myVar, 3.14159);// ORconst myArray = ["Mango", "Apple", "Orange"];

At the implementation level, JavaScript's arrays actually store their elements as standard object properties, using the array index as the property name.

Thelength property is special. Its value is always a positive integer greater than the index of the last element if one exists. (In the example below,'Dusty' is indexed at30, socats.length returns30 + 1).

Remember, JavaScript Array indexes are 0-based: they start at0, not1. This means that thelength property will be one more than the highest index stored in the array:

const cats = [];cats[30] = ["Dusty"];console.log(cats.length); // 31

You can also assign to thelength property.

Writing a value that is shorter than the number of stored items truncates the array. Writing0 empties it entirely:

const cats = ["Dusty", "Misty", "Twiggy"];console.log(cats.length); // 3cats.length = 2;console.log(cats); // [ 'Dusty', 'Misty' ] - Twiggy has been removedcats.length = 0;console.log(cats); // []; the cats array is emptycats.length = 3;console.log(cats); // [ <3 empty items> ]

A common operation is to iterate over the values of an array, processing each one in some way, as follows:

const colors = ["red", "green", "blue"];for (let i = 0; i < colors.length; i++) {  console.log(colors[i]);}

If you know that none of the elements in your array evaluate tofalse in a boolean context—if your array consists only ofDOM nodes, for example—you can use a more efficient idiom:

const divs = document.getElementsByTagName("div");for (let i = 0, div; (div = divs[i]); i++) {  /* Process div in some way */}

This avoids the overhead of checking the length of the array, and ensures that thediv variable is reassigned to the current item each time around the loop for added convenience.

TheforEach() method provides another way of iterating over an array:

const colors = ["red", "green", "blue"];colors.forEach((color) => console.log(color));// red// green// blue

The function passed toforEach is executed once for every item in the array, with the array item passed as the argument to the function. Unassigned values are not iterated in aforEach loop.

Note that the elements of an array that are omitted when the array is defined are not listed when iterating byforEach, butare listed whenundefined has been manually assigned to the element:

const sparseArray = ["first", "second", , "fourth"];sparseArray.forEach((element) => {  console.log(element);});// Logs:// first// second// fourthif (sparseArray[2] === undefined) {  console.log("sparseArray[2] is undefined"); // true}const nonsparseArray = ["first", "second", undefined, "fourth"];nonsparseArray.forEach((element) => {  console.log(element);});// Logs:// first// second// undefined// fourth

Since JavaScript array elements are saved as standard object properties, it is not advisable to iterate through JavaScript arrays usingfor...in loops, because normal elements and all enumerable properties will be listed.

TheArray object has the following methods:

Theconcat() method joins two or more arrays and returns a new array.

let myArray = ["1", "2", "3"];myArray = myArray.concat("a", "b", "c");// myArray is now ["1", "2", "3", "a", "b", "c"]

Thejoin() method joins all elements of an array into a string.

const myArray = ["Wind", "Rain", "Fire"];const list = myArray.join(" - "); // list is "Wind - Rain - Fire"

Thepush() method adds one or more elements to the end of an array and returns the resultinglength of the array.

const myArray = ["1", "2"];myArray.push("3"); // myArray is now ["1", "2", "3"]

Thepop() method removes the last element from an array and returns that element.

const myArray = ["1", "2", "3"];const last = myArray.pop();// myArray is now ["1", "2"], last = "3"

Theshift() method removes the first element from an array and returns that element.

const myArray = ["1", "2", "3"];const first = myArray.shift();// myArray is now ["2", "3"], first is "1"

Theunshift() method adds one or more elements to the front of an array and returns the new length of the array.

const myArray = ["1", "2", "3"];myArray.unshift("4", "5");// myArray becomes ["4", "5", "1", "2", "3"]

Theslice() method extracts a section of an array and returns a new array.

let myArray = ["a", "b", "c", "d", "e"];myArray = myArray.slice(1, 4); // [ "b", "c", "d"]// starts at index 1 and extracts all elements// until index 3

Theat() method returns the element at the specified index in the array, orundefined if the index is out of range. It's notably used for negative indices that access elements from the end of the array.

const myArray = ["a", "b", "c", "d", "e"];myArray.at(-2); // "d", the second-last element of myArray

Thesplice() method removes elements from an array and (optionally) replaces them. It returns the items which were removed from the array.

const myArray = ["1", "2", "3", "4", "5"];myArray.splice(1, 3, "a", "b", "c", "d");// myArray is now ["1", "a", "b", "c", "d", "5"]// This code started at index one (or where the "2" was),// removed 3 elements there, and then inserted all consecutive// elements in its place.

Thereverse() method transposes the elements of an array, in place: the first array element becomes the last and the last becomes the first. It returns a reference to the array.

const myArray = ["1", "2", "3"];myArray.reverse();// transposes the array so that myArray = ["3", "2", "1"]

Theflat() method returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

let myArray = [1, 2, [3, 4]];myArray = myArray.flat();// myArray is now [1, 2, 3, 4], since the [3, 4] subarray is flattened

Thesort() method sorts the elements of an array in place, and returns a reference to the array.

const myArray = ["Wind", "Rain", "Fire"];myArray.sort();// sorts the array so that myArray = ["Fire", "Rain", "Wind"]

sort() can also take a callback function to determine how array elements are compared. The callback function is called with two arguments, which are two values from the array. The function compares these two values and returns a positive number, negative number, or zero, indicating the order of the two values. For instance, the following will sort the array by the last letter of a string:

const sortFn = (a, b) => {  if (a[a.length - 1] < b[b.length - 1]) {    return -1; // Negative number => a < b, a comes before b  } else if (a[a.length - 1] > b[b.length - 1]) {    return 1; // Positive number => a > b, a comes after b  }  return 0; // Zero => a = b, a and b keep their original order};myArray.sort(sortFn);// sorts the array so that myArray = ["Wind","Fire","Rain"]

• ifa is less thanb by the sorting system, return-1 (or any negative number)
• ifa is greater thanb by the sorting system, return1 (or any positive number)
• ifa andb are considered equivalent, return0.

TheindexOf() method searches the array forsearchElement and returns the index of the first match.

const a = ["a", "b", "a", "b", "a"];console.log(a.indexOf("b")); // 1// Now try again, starting from after the last matchconsole.log(a.indexOf("b", 2)); // 3console.log(a.indexOf("z")); // -1, because 'z' was not found

ThelastIndexOf() method works likeindexOf, but starts at the end and searches backwards.

const a = ["a", "b", "c", "d", "a", "b"];console.log(a.lastIndexOf("b")); // 5// Now try again, starting from before the last matchconsole.log(a.lastIndexOf("b", 4)); // 1console.log(a.lastIndexOf("z")); // -1

TheforEach() method executescallback on every array item and returnsundefined.

const a = ["a", "b", "c"];a.forEach((element) => {  console.log(element);});// Logs:// a// b// c

TheforEach method (and others below) that take a callback are known asiterative methods, because they iterate over the entire array in some fashion. Each one takes an optional second argument calledthisArg. If provided,thisArg becomes the value of thethis keyword inside the body of the callback function. If not provided, as with other cases where a function is invoked outside of an explicit object context,this will refer to the global object (window,globalThis, etc.) when the function isnot strict, orundefined when the function is strict.

Themap() method returns a new array of the return value from executingcallback on every array item.

const a1 = ["a", "b", "c"];const a2 = a1.map((item) => item.toUpperCase());console.log(a2); // ['A', 'B', 'C']

TheflatMap() method runsmap() followed by aflat() of depth 1.

const a1 = ["a", "b", "c"];const a2 = a1.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);console.log(a2); // ['A', 'a', 'B', 'b', 'C', 'c']

Thefilter() method returns a new array containing the items for whichcallback returnedtrue.

const a1 = ["a", 10, "b", 20, "c", 30];const a2 = a1.filter((item) => typeof item === "number");console.log(a2); // [10, 20, 30]

Thefind() method returns the first item for whichcallback returnedtrue.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.find((item) => typeof item === "number");console.log(i); // 10

ThefindLast() method returns the last item for whichcallback returnedtrue.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.findLast((item) => typeof item === "number");console.log(i); // 30

ThefindIndex() method returns the index of the first item for whichcallback returnedtrue.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.findIndex((item) => typeof item === "number");console.log(i); // 1

ThefindLastIndex() method returns the index of the last item for whichcallback returnedtrue.

const a1 = ["a", 10, "b", 20, "c", 30];const i = a1.findLastIndex((item) => typeof item === "number");console.log(i); // 5

Theevery() method returnstrue ifcallback returnstrue for every item in the array.

function isNumber(value) {  return typeof value === "number";}const a1 = [1, 2, 3];console.log(a1.every(isNumber)); // trueconst a2 = [1, "2", 3];console.log(a2.every(isNumber)); // false

Thesome() method returnstrue ifcallback returnstrue for at least one item in the array.

function isNumber(value) {  return typeof value === "number";}const a1 = [1, 2, 3];console.log(a1.some(isNumber)); // trueconst a2 = [1, "2", 3];console.log(a2.some(isNumber)); // trueconst a3 = ["1", "2", "3"];console.log(a3.some(isNumber)); // false

Thereduce() method appliescallback(accumulator, currentValue, currentIndex, array) for each value in the array for the purpose of reducing the list of items down to a single value. Thereduce function returns the final value returned bycallback function.

IfinitialValue is specified, thencallback is called withinitialValue as the first parameter value and the value of the first item in the array as the second parameter value.

IfinitialValue isnot specified, thencallback's first two parameter values will be the first and second elements of the array. Onevery subsequent call, the first parameter's value will be whatevercallback returned on the previous call, and the second parameter's value will be the next value in the array.

Ifcallback needs access to the index of the item being processed, or access to the entire array, they are available as optional parameters.

const a = [10, 20, 30];const total = a.reduce(  (accumulator, currentValue) => accumulator + currentValue,  0,);console.log(total); // 60

ThereduceRight() method works likereduce(), but starts with the last element.

reduce andreduceRight are the least obvious of the iterative array methods. They should be used for algorithms that combine two values recursively in order to reduce a sequence down to a single value.

You can transform back and forth between arrays and other data structures.

TheObject.groupBy() method can be used to group the elements of an array, using a test function that returns a string indicating the group of the current element.

Here we have an inventory array that contains "food" objects that have aname and atype.

const inventory = [  { name: "asparagus", type: "vegetables" },  { name: "bananas", type: "fruit" },  { name: "goat", type: "meat" },  { name: "cherries", type: "fruit" },  { name: "fish", type: "meat" },];

To useObject.groupBy(), you supply a callback function that is called with the current element, and optionally the current index and array, and returns a string indicating the group of the element.

The code below uses an arrow function to return thetype of each array element (this usesobject destructuring syntax for function arguments to unpack thetype element from the passed object). The result is an object that has properties named after the unique strings returned by the callback. Each property is assigned an array containing the elements in the group.

const result = Object.groupBy(inventory, ({ type }) => type);console.log(result);// Logs// {//   vegetables: [{ name: 'asparagus', type: 'vegetables' }],//   fruit: [//     { name: 'bananas', type: 'fruit' },//     { name: 'cherries', type: 'fruit' }//   ],//   meat: [//     { name: 'goat', type: 'meat' },//     { name: 'fish', type: 'meat' }//   ]// }

Note that the returned object references thesame elements as the original array (notdeep copies). Changing the internal structure of these elements will be reflected in both the original array and the returned object.

If you can't use a string as the key, for example, if the information to group is associated with an object that might change, then you can instead useMap.groupBy(). This is very similar toObject.groupBy() except that it groups the elements of the array into aMap that can use an arbitrary value (object orprimitive) as a key.

Arrays can contain "empty slots", which are not the same as slots filled with the valueundefined. Empty slots can be created in one of the following ways:

// Array constructor:const a = Array(5); // [ <5 empty items> ]// Consecutive commas in array literal:const b = [1, 2, , , 5]; // [ 1, 2, <2 empty items>, 5 ]// Directly setting a slot with index greater than array.length:const c = [1, 2];c[4] = 5; // [ 1, 2, <2 empty items>, 5 ]// Elongating an array by directly setting .length:const d = [1, 2];d.length = 5; // [ 1, 2, <3 empty items> ]// Deleting an element:const e = [1, 2, 3, 4, 5];delete e[2]; // [ 1, 2, <1 empty item>, 4, 5 ]

In some operations, empty slots behave as if they are filled withundefined.

const arr = [1, 2, , , 5]; // Create a sparse array// Indexed accessconsole.log(arr[2]); // undefined// For...offor (const i of arr) {  console.log(i);}// Logs: 1 2 undefined undefined 5// Spreadingconst another = [...arr]; // "another" is [ 1, 2, undefined, undefined, 5 ]

But in others (most notably array iteration methods), empty slots are skipped.

const mapped = arr.map((i) => i + 1); // [ 2, 3, <2 empty items>, 6 ]arr.forEach((i) => console.log(i)); // 1 2 5const filtered = arr.filter(() => true); // [ 1, 2, 5 ]const hasFalsy = arr.some((k) => !k); // false// Property enumerationconst keys = Object.keys(arr); // [ '0', '1', '4' ]for (const key in arr) {  console.log(key);}// Logs: '0' '1' '4'// Spreading into an object uses property enumeration, not the array's iteratorconst objectSpread = { ...arr }; // { '0': 1, '1': 2, '4': 5 }

For a complete list of how array methods behave with sparse arrays, seetheArray reference page.

Arrays can be nested, meaning that an array can contain another array as an element. Using this characteristic of JavaScript arrays, multi-dimensional arrays can be created.

The following code creates a two-dimensional array.

const a = new Array(4);for (let i = 0; i < 4; i++) {  a[i] = new Array(4);  for (let j = 0; j < 4; j++) {    a[i][j] = `[${i}, ${j}]`;  }}

This example creates an array with the following rows:

Row 0: [0, 0] [0, 1] [0, 2] [0, 3]Row 1: [1, 0] [1, 1] [1, 2] [1, 3]Row 2: [2, 0] [2, 1] [2, 2] [2, 3]Row 3: [3, 0] [3, 1] [3, 2] [3, 3]

Arrays can also be used like objects, to store related information.

const arr = [1, 2, 3];arr.property = "value";console.log(arr.property); // "value"

For example, when an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match. An array is the return value ofRegExp.prototype.exec(),String.prototype.match(), andString.prototype.split(). For information on using arrays with regular expressions, seeRegular Expressions.

Some JavaScript objects, such as theNodeList returned bydocument.getElementsByTagName() or thearguments object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods. Thearguments object provides alength attribute but does not implement array methods likeforEach().

Array methods cannot be called directly on array-like objects.

function printArguments() {  arguments.forEach((item) => {    console.log(item);  }); // TypeError: arguments.forEach is not a function}

But you can call them indirectly usingFunction.prototype.call().

function printArguments() {  Array.prototype.forEach.call(arguments, (item) => {    console.log(item);  });}

Array prototype methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:

Array.prototype.forEach.call("a string", (chr) => {  console.log(chr);});

• Previous
• Next