DEV Community

Madhan Raj
Madhan Raj

Posted on

Array Methods In Javascript

JavaScript Array Methods

Basic Array Methods

Array length
Array toString()
Array at()
Array join()
Array pop()
Array push()
Array shift()
Array unshift()
Array isArray()
Array delete()
Array concat()
Array copyWithin()
Array flat()
Array slice()
Array splice()
Array toSpliced()

JavaScript Array length
The length property returns the length (size) of an array:
Example

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

let size = fruits.length;
Enter fullscreen mode Exit fullscreen mode

The length property can also be used to set the length of an array:
Example

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

fruits.length = 2;

Enter fullscreen mode Exit fullscreen mode

JavaScript Array toString()

The toString() method returns the elements of an array as a comma separated string.
Example

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

let myList = fruits.toString();

Enter fullscreen mode Exit fullscreen mode

Every JavaScript object has a toString() method.

The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string.

JavaScript Array at()
ES2022 introduced the array method at():
Examples

Get the third element of fruits using at():
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

Get the third element of fruits using []:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

Enter fullscreen mode Exit fullscreen mode

JavaScript Array join()

The join() method also joins all array elements into a string.

It behaves just like toString(), but in addition you can specify the separator:
Example

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

Result:
Banana * Orange * Apple * Mango

Enter fullscreen mode Exit fullscreen mode

Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.

JavaScript Array pop()

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

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

The pop() method returns the value that was "popped out":
Enter fullscreen mode Exit fullscreen mode

Example

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

Enter fullscreen mode Exit fullscreen mode

JavaScript Array push()

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

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
Enter fullscreen mode Exit fullscreen mode

The push() method returns the new array length:
Example

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

Enter fullscreen mode Exit fullscreen mode

Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the last.
JavaScript Array shift()
The shift() method removes the first array element and "shifts" all other elements to a lower index.
Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
Enter fullscreen mode Exit fullscreen mode

The shift() method returns the value that was "shifted out":
Example

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

Enter fullscreen mode Exit fullscreen mode

JavaScript Array unshift()

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Enter fullscreen mode Exit fullscreen mode

The unshift() method returns the new array length:
Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

Enter fullscreen mode Exit fullscreen mode

Changing Elements

Array elements are accessed using their index number:

Array indexes start with 0:

[0] is the first array element
[1] is the second
[2] is the third ...
Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
Enter fullscreen mode Exit fullscreen mode

JavaScript Array length

The length property provides an easy way to append a new element to an array:
Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

Enter fullscreen mode Exit fullscreen mode

Reference
https://www.w3schools.com/js/js_array_methods.asp

Top comments (0)