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"].