JavaScript Array Methods
JavaScript Basics

JavaScript Array Methods

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 =; // "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"‍


  • 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.

Take a look into your desired course