Array Methods
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.
Array length Property
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"]
Array toString() Method
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
Array at() Method
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)
Array join() Method
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"
Array pop() Method
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"]
Array push() Method
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"]
Array shift() Method
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"]
Array unshift() Method
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"]
Array concat() Method
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"]
Array copyWithin() Method
Copies elements within the same array to another position, overwriting existing elements.
Syntax: copyWithin(target, start, end)
- target: index to copy to
- start: index to start copying from
- end (optional): index to stop copying (exclusive)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0); // ["Banana", "Orange", "Banana", "Orange"]
fruits.copyWithin(2, 0, 2); // ["Banana", "Orange", "Banana", "Orange"]
Array flat() Method
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]
Array flatMap() Method
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]
Array splice() Method
Adds or removes elements from an array at a specified index, modifying the original array.
Syntax: splice(start, deleteCount, ...items)
- start: index to start
- deleteCount: number of elements to remove
- items: elements to add
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"]
Array toSpliced() Method
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
Array slice() Method
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"]
Array delete Operator
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"].