Looking for the easiest way to add, remove or find elements from an array? After reading this article you’ll be able to do basic JS operations related to an array in just one line. Each method is explained with a code example.

Array

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name and has members for performing common array operations.

Array Methods

Overall there are several methods available in the JavaScript ecosystem. This article will cover the basic 7 methods through which you will be able to add, remove or find elements from an array in no time.

Let’s get started by assuming five fruit emojis in an array.

const fruits = ["🍇", "🥭", "🍍", "🍉", "🍓"];

1. push()

The push method adds an element to the last position of an array.

const fruits = ["🍇", "🥭", "🍍", "🍉", "🍓"];

fruits.push("🍋");

console.log(fruits); // ["🍇", "🥭", "🍍", "🍉", "🍓", "🍋"]

2. unshift()

The unshift method adds an element to the first position of an array.

const fruits = ["🍇", "🥭", "🍍", "🍉", "🍓"];

fruits.unshift("🍒");

console.log(fruits); // ["🍒", "🍇", "🥭", "🍍", "🍉", "🍓"]

The unshift() can be used to add a nested array at the beginning of an array.

const fruits = ["🍇", "🥭"];

fruits.unshift(["🍍", "🍉", "🍓"], ["🍒"]);

console.log(fruits); // [["🍍", "🍉", "🍓"], ["🍒"], "🍇", "🥭"]

3. pop()

The pop method removes the last element from an array.

const fruits = ["🍍", "🍉", "🍓", "🍒", "🍇", "🥭"];

fruits.pop(); // 🥭

console.log(fruits); // ["🍍", "🍉", "🍓", "🍒", "🍇"]

Using pop() method on an empty array will returns undefined.

4. shift()

The shift method removes the first element from an array.

const fruits = ["🍍", "🍉", "🍓", "🍒", "🍇", "🥭"];

fruits.shift(); // 🍍

console.log(fruits); // ["🍉", "🍓", "🍒", "🍇", "🥭"]

The shift() can be used to iterate through the array while printing the results.

const fruits = ["🍍", "🍉", "🍓", "🍒", "🍇", "🥭"];

while (typeof (fruit = fruits.shift()) !== "undefined") {
  console.log(fruit);
}
// 🍍, 🍉, 🍓, 🍒, 🍇, 🥭

5. concat()

The concat method can merge multiple arrays and returns a single combined array.

const basket1 = ["🍇", "🥭"];
const basket2 = ["🍍", "🍉"];
const basket3 = ["🍓", "🍒"];

const fruits = basket1.concat(basket2, basket3);
console.log(fruits); // ["🍇", "🥭", "🍍", "🍉", "🍓", "🍒"]

The conact() can be used to merge any type of object in an array.

6. indexOf()

The indexOf method returns the first position of an element that can be found in an array.

const fruits = ["🍇", "🥭", "🍍", "🍉", "🍓", "🍒"];

fruits.indexOf("🍍"); // 2

This indexOf() can be used to find occurrences of an element in an array.

const indices = [];
const fruits = ["🥭", "🍍", "🥭", "🍉", "🍓", "🥭", "🍒"];
const element = "🥭";
let idx = fruits.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = fruits.indexOf(element, idx + 1);
}
console.log(indices); // [ 0, 2, 5 ]

7. lastIndexOf()

The lastIndexOf method returns the last position of an element that can be found in an array.

const fruits = ["🍇", "🥭", "🍍", "🍉", "🍓", "🍍", "🍒"];

fruits.lastIndexOf("🍍"); // 5

Conclusion

I hope you enjoyed this article. Now, you’ll be able to perform basic operations using array methods. In another upcoming article, I'll cover more advanced methods of the array. If you liked it, you are more than welcome to make some comments below or leave a like (: