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.
