Clean • Professional
JavaScript provides a rich set of array methods to perform adding, removing, transforming, searching, sorting, and iterating operations efficiently.
These methods help manipulate arrays without manually writing loops.
Returns or sets the number of elements in an array. It’s always one more than the highest index.
Setting the length can truncate or extend the array (extending adds undefined elements).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length; // size = 4
fruits.length = 2; // fruits = ["Banana", "Orange"]
fruits[fruits.length] = "Kiwi"; // fruits = ["Banana", "Orange", "Kiwi"]
Converts an array into a comma-separated string of its elements.
It is automatically called when an array is converted to a string, for example in HTML.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let myList = fruits.toString(); // "Banana,Orange,Apple,Mango"
document.getElementById("demo").innerHTML = fruits; // same result
Returns the element at the specified index, supporting both positive and negative indices (e.g., -1 for the last element).
Browser Support: Chrome 92+, Edge 92+, Firefox 90+, Safari 15.4+, Opera 78+
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit1 = fruits.at(2); // "Apple"
let fruit2 = fruits.at(-1); // "Mango"
let fruit3 = fruits[2]; // same as fruits.at(2)
Joins all array elements into a single string with a specified separator (defaults to a comma).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let result = fruits.join(" * "); // "Banana * Orange * Apple * Mango"
Removes and returns the last element of an array, modifying the original array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let popped = fruits.pop(); // popped = "Mango", fruits = ["Banana", "Orange", "Apple"]
Adds one or more elements to the end of an array and returns the new length.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi"); // length = 5, fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
Removes and returns the first element, shifting all other elements to a lower index.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let shifted = fruits.shift(); // shifted = "Banana", fruits = ["Orange", "Apple", "Mango"]
Adds one or more elements to the beginning of an array and returns the new length.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.unshift("Lemon"); // length = 5, fruits = ["Lemon", "Banana", "Orange", "Apple", "Mango"]
Merges two or more arrays or values into a new array without modifying the originals.
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
// ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]
const newArr = myGirls.concat("Peter");
// ["Cecilie", "Lone", "Peter"]
const all = myGirls.concat(myBoys, ["Robin"], "Morgan");
// ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin", "Morgan"]
Copies elements within the same array to another position, overwriting existing elements.
Syntax: copyWithin(target, start, end)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0); // ["Banana", "Orange", "Banana", "Orange"]
fruits.copyWithin(2, 0, 2); // ["Banana", "Orange", "Banana", "Orange"]
Flattens a nested array into a new array up to a specified depth.
Browser Support: Chrome 66+, Edge 79+, Firefox 61+, Safari 12+, Opera 50+
const myArr = [[1, 2], [3, 4], [5, 6]];
const newArr = myArr.flat(); // [1, 2, 3, 4, 5, 6]
const deepArr = [1, [2, [3, 4]]];
const flatDeep = deepArr.flat(2); // [1, 2, 3, 4]
Maps each element using a function, then flattens the result by one level into a new array.
const myArr = [1, 2, 3, 4];
const newArr = myArr.flatMap(x => [x, x * 10]);
// [1, 10, 2, 20, 3, 30, 4, 40]
Adds or removes elements from an array at a specified index, modifying the original array.
Syntax: splice(start, deleteCount, ...items)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
// ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
fruits.splice(2, 2, "Pear");
// ["Banana", "Orange", "Pear"]
fruits.splice(0, 1);
// ["Orange", "Pear"]
A non-mutating version of splice(). Returns a new array with the specified changes without modifying the original.
Browser Support: ES2023+
const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1);
// spliced = ["Feb", "Mar", "Apr"], months unchanged
Returns a shallow copy of a portion of an array into a new array without modifying the original.
Syntax: slice(start, end) where end is exclusive.
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1); // ["Orange", "Lemon", "Apple", "Mango"]
const subset = fruits.slice(1, 3); // ["Orange", "Lemon"]
Removes an element at a specific index but leaves an undefined hole.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // [undefined, "Orange", "Apple", "Mango"].