JavaScript Array Methods

Array Length

The length property returns the number of elements in an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];let size = fruits.length; // 4

‍

Array toString()

The toString() method converts an array to a string of (comma-separated) array values:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.toString();// "Banana,Orange,Apple,Mango"

‍

Array at()

The at() method returns an element at a specific index in an array. Introduced in ES2022:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];let fruit = fruits.at(2); // "Apple"

‍

Equivalent using bracket notation:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];let fruit = fruits[2]; // "Apple"

‍

Array join()

The join() method joins all array elements into a string and allows you to specify a separator:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.join(" * ");// "Banana * Orange * Apple * Mango"

‍

Popping and Pushing

Popping and pushing refer to removing and adding elements to an array, respectively.

Array pop()

The pop() method removes the last element from an array:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];let fruit = fruits.pop(); // "Mango", fruits now ["Banana", "Orange", "Apple"]

‍

Array push()

The push() method adds a new element to the end of an array:

‍

const fruits = ["Banana", "Orange", "Apple"];let length = fruits.push("Kiwi"); // ["Banana", "Orange", "Apple", "Kiwi"], length is 4

‍

Shifting Elements

Shifting refers to removing and adding elements at the beginning of an array.

Array shift()

The shift() method removes the first element from an array:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];let fruit = fruits.shift(); // "Banana", fruits now ["Orange", "Apple", "Mango"]

‍

Array unshift()

The unshift() method adds a new element to the beginning of an array:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];let length = fruits.unshift("Lemon"); // ["Lemon", "Banana", "Orange", "Apple", "Mango"], length is 5

‍

Changing Elements

Array elements are accessed and changed using their index number:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[0] = "Kiwi"; // ["Kiwi", "Orange", "Apple", "Mango"]

‍

Array delete()

Using delete leaves undefined holes in the array. It's better to use pop() or shift():

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];delete fruits[0]; // [undefined, "Orange", "Apple", "Mango"]

‍

Merging Arrays (Concatenating)

Array concat()

The concat() method merges (concatenates) arrays:

‍

const arr1 = ["Cecilie", "Lone"];const arr2 = ["Emil", "Tobias", "Linus"];const myChildren = arr1.concat(arr2); // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]‍

The concat() method can take any number of arrays as arguments:

‍

const arr1 = ["Cecilie", "Lone"];const arr2 = ["Emil", "Tobias", "Linus"];const arr3 = ["Robin", "Morgan"];const myChildren = arr1.concat(arr2, arr3); // ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin", "Morgan"]

‍

The concat() method can also take values as arguments:

‍

const arr1 = ["Emil", "Tobias", "Linus"];const myChildren = arr1.concat("Peter"); // ["Emil", "Tobias", "Linus", "Peter"]

‍

Array copyWithin()

The copyWithin() method copies elements within an array to another position:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.copyWithin(2, 0); // ["Banana", "Orange", "Banana", "Orange"]‍

Flattening an Array

Array flat()

The flat() method creates a new array with sub-array elements concatenated to a specified depth:

‍

const myArr = [[1, 2], [3, 4], [5, 6]];const newArr = myArr.flat(); // [1, 2, 3, 4, 5, 6]

‍

Splicing and Slicing Arrays

Array splice()

The splice() method adds/removes items to/from an array:

Adding items:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2, 0, "Lemon", "Kiwi"); // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

‍

Removing items:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];let removed = fruits.splice(2, 2); // ["Banana", "Orange"], removed is ["Apple", "Mango"]

‍

Array toSpliced()

The toSpliced() method, introduced in ES2023, splices an array without altering the original array:

‍

const months = ["Jan", "Feb", "Mar", "Apr"];const spliced = months.toSpliced(0, 1); // ["Feb", "Mar", "Apr"], months is ["Jan", "Feb", "Mar", "Apr"]

‍

Array slice()

The slice() method slices out a piece of an array into a new array:

‍

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];const citrus = fruits.slice(1, 3); // ["Orange", "Lemon"]

‍

Automatic toString()

JavaScript automatically converts an array to a comma-separated string when a primitive value is expected:

‍

const fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits;// "Banana,Orange,Apple,Mango"‍

Summary

• The length property returns the number of elements in an array.
• The toString() and join() methods convert arrays to strings.
• The pop(), push(), shift(), and unshift() methods add or remove elements from arrays.
• The concat(), copyWithin(), flat(), splice(), and slice() methods manipulate arrays in various ways.
• JavaScript arrays automatically convert to strings when needed.

‍