This page details modern JavaScript's array methods. JavaScript tends to get the popular array methods from every other language added to it over time, so expect syntactic sugar and duplication here.

Note that we are mixing static methods, static properties, instance methods (the majority of this page), and instance properties here. This is mainly just to have one page with all the juice at once, baby. For detailed information, check out MDN's incredible array documentation.

• Array .indexOf()
• Array .lastIndexOf()
• Array .length
• Array .toString()
• Array .at()
• Array .join()
• Array .pop()
• Array .push()
• Array .shift()
• Array .unshift()
• Array .copyWithin()
• Array .flat()
• Array .splice()
• Array .toSpliced()
• Array .slice()

Pass .indexOf() an element to find the first index in the array (one instance only, not a list of instances). If the element is not found, -1 is returned.

The comparison here uses strict equality (===).

1const arr = ["a", "b", "c"];
2console.log(arr.indexOf("b")); // 1
3console.log(arr.indexOf("d")); // -1

Just line .indexOf(), but this time it searches from the end of the array and returns the last index of the element.

1const arr = ["a", "b", "c", "b"];
2console.log(arr.lastIndexOf("b")); // 3

Use the .length property on your array to return its length.

Note: Arrays in JavaScript are zero-indexed, so .length is equal to the last element's index plus 1.

1const arr = ["a", "b", "c"];
2console.log(arr.length); // 3
3console.log(arr[2]); // "c"

Using .toString() on an array is the same as .join(","). It returns the elements of the array in a string separated by commas.

Array .toString() works recursively and will flatten nested arrays.

1const arr = ["a", "b", "c"];
2console.log(arr.toString()); // "a,b,c"
3const nested = [ [1, 2], [3, 4] ];
4console.log(nested.toString()); // "1,2,3,4"

The .at() method of an array instance takes an integer and returns the element at that position in the array. Negative integers count back from the end of the array. Invalid values return undefined.

.at() is similar to accessing the array element with [], but with the added benefit of being able to count backwards from the end of the array with negative integers. Compared to other languages that allow negative bracket indexing, [-1] is used to check the element at index -1 (ex: to the left of index 0), and many JavaScript array methods return an array position -1 to indicate the element is not in the array.

1const arr = ["a", "b", "c"];
2console.log(arr.at(1)); // "b"
3console.log(arr.at(-3)); // "a"
4console.log(arr.at(4)); // undefined

Calling .join() returns a string with all the elements of the array concatenated together. If no argument is passed, a comma is used to separate the elements. Use any other string as an argument for the separator.

1const arr = ["a", "b", "c"];
2console.log(arr.join()); // "a,b,c"
3console.log(arr.join("-")); // "a-b-c"
4console.log(arr.join("")); // "abc"

Mutate the array by using .pop() to pop off the last element and return it.

1const arr = ["a", "b", "c"];
2const popped = arr.pop();
3console.log(arr); // ["a", "b"]
4console.log(popped); // "c"

Mutate the array by using .push() to push an element into the end of the array and return the new length of the array.

1const arr = ["a", "b", "c"];
2const length = arr.push("d");
3console.log(arr); // ["a", "b", "c", "d"]
4console.log(length); // 4

Mutate the array by using .shift() to remove the first element and shift all other elements left. The element that was removed is returned.

1const arr = ["a", "b", "c"];
2const shifted = arr.shift();
3console.log(arr); // ["b", "c"]
4console.log(shifted); // "a"

Mutate the array by using .unshift() to shift an element into the start of the array, shifting all other elements to the right. Returns the new length of the array.

1const arr = ["a", "b", "c"];
2const length = arr.unshift("letter before a");
3console.log(arr); // ["letter before a", "a", "b", "c"]
4console.log(length); // 4

Merge two or more arrays with .concat(). This method returns a new array instance - it does not mutate the existing arrays.

1const first = ["a", "b", "c"];
2const second = ["d", "e", "f"];
3const concatenated = first.concat(second);
4console.log(concatenated); // ["a", "b", "c", "d" ,"e", "f"]

.concat() creates a shallow copy of the arrays being copied. This means that any nested elements are copied by reference rather than by value.

1const first = ["a", ["b", "c"]]; // Note that "b" and "c" are in a nested array.
2const second = ["d", "e", "f"];
3const concatenated = first.concat(second);
4console.log(concatenated); // ["a", ["b", "c"], "d" ,"e", "f"]
5first[1][0] = "mutated"; // Mutate a nested element in an array we've already .concat()'d.
6console.log(concatenated); // ["a", ["mutated", "c"], "d" ,"e", "f"]

Mutate the existing array by copying elements internally. Here's one you don't see too frequently! Using .copyWithin() on an array instance takes a shallow copy of one or more desired elements, copies them over other target elements, and returns the resulting array.

The first argument the method takes is the target position where the copying-over will start. The second argument is the start position, where the copying happens from. The third (optional) argument is where the copying should end.

1const arr = ["a", "b", "c", "d", "e", "f"];
2const copied = arr.copyWithin(2, 3, 5);
3console.log(arr); // ["a", "b", "d", "e", "e", "f"]
4console.log(copied); // ["a", "b", "d", "e", "e", "f"] (same)

Flatten nested arrays recursively to your desired depth with .flat(). Optionally, pass an integer for depth to specify how many levels of nesting you would like to flatten (this defaults to 1). Returns a new array.

1const arr = [0, 1, [2, [3, [4, 5]]]];
2console.log(arr.flat()); // [0, 1, 2, [3, [4, 5]]]
3console.log(arr.flat(2)); // [0, 1, 2, 3, [4, 5]]
4console.log(arr.flat(Infinity)); // [0, 1, 2, 3, 4, 5]

Mutate the array by using .splice() to remove elements from the array and optionally add new elements in their place. Returns an array of the removed elements. The arguments for .splice() are:

• start - the index of where you want to start mutating the array
• deleteCount (optional) - how many elements to remove
• item1, ..., itemN (optional) - items to be added to the array

1const arr = [1, 2, 3, 4, 5];
2const removed = arr.splice(1, 2, 'a', 'b', 'c');
3console.log(arr); // [1, 'a', 'b', 'c', 4, 5]
4console.log(removed); // [2, 3]

.toSpliced() is just like .splice(), but it doesn't mutate the original array, and instead returns a new array with the changes.

1const arr = [1, 2, 3, 4, 5];
2const spliced = arr.toSpliced(1, 2, 'a', 'b', 'c');
3console.log(arr); // [1, 2, 3, 4, 5]
4console.log(spliced); // [1, 'a', 'b', 'c', 4, 5]

Use .slice() to create a shallow copy of a portion of an array without mutating the original array. If no arguments are passed, the entire array is copied. Optionally, pass start to choose an start position other than the default 0. Also optionally, pass end to choose an end position (exclusive, not including the element at end). Returns a new array.

1const arr = ['a', 'b', 'c', 'd', 'e'];
2const sliced = arr.slice(1, 4);
3console.log(arr); // ['a', 'b', 'c', 'd', 'e']
4console.log(sliced); // ['b', 'c', 'd']