Array Methods in Javascript: 8 Useful Methods + Examples

Javascript offers many Array Method for us to use. However, many methods don’t necessarily mean easy. Instead, many beginners confuse one array method in javascript with another. Well, If you are still confused about the array methods in Javascript, This article will guide you through it. And hopefully, it will also end your confusion.

In This article, we are going to take a look at some of the most common Array Methods in Javascript & How to use those methods. 

This article covers the following Array methods – 

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • concat() 
  • slice()
  • join()

1.push()

The push() method is one of the most common array methods in Javascript. push() is used to push or add a new element at the end of the array. The length of the array will change after adding or appending an element or elements using the push() method.

Syntax:

Array. push(element1, element2 ….., elementN) – You can insert as many elements as you want.

Example:

Array Methods in JavaScript

Code : 

const cars = [‘BMW’, ‘Lamborghini’, ‘Tesla’];

cars.push(‘Audi’); //adding a new element

console.log(`Array After Adding Audi = ${cars} & Length = ${cars.length}`);

cars.push(‘Ferrari’, ‘Jaguar’, ‘Porsche’); //adding multiple elements

console.log(`Final Array = ${cars} & Length = ${cars.length}`);

Output : 

Array After Adding Audi = BMW,Lamborghini,Tesla,Audi & Length = 4

Final Array = BMW,Lamborghini,Tesla,Audi,Ferrari,Jaguar,Porsche & Length = 7

Also Read: 12 Best Dom Manipulation Methods in Javascript

2.pop()

The pop () method is the exact opposite of the push() method, It removes the last element of the array. It also returns the element it removes. Just like the push() method, it also changes the length of the array.

Syntax: 

array.pop()

Example:

Array Methods in Javascript

Code : 

const Movies = [‘Mission Impossible’,’The Avengers’,’Skyfall’,’The conjuring’];

console.log(`The Array = ${Movies} & Length = ${Movies.length}`); 

Movies.pop();

console.log(`The Array After Removing = ${Movies} & Length = ${Movies.length}`);

Output:

The Array = Mission Impossible,The Avengers,Skyfall,The conjuring & Length = 4

The Array After Removing = Mission Impossible,The Avengers,Skyfall & Length = 3 

Also Read: Four Ways to Make an API Call in Javascript

3.shift()

The shift () method removes the first element from the array. This method returns the removed element. It also reduces the original array size by 1. Just like the pop() method, it doesn’t accept any parameter.

Array Methods in Javascript

Example:

Code : 

const Languages = [‘Javascript’,’C++’,’Java’,’Go’];

const Javascript = Languages.shift(); //Removing the first element (Javascript)

console.log(Languages); //after removing Javascript from the array

console.log(Javascript );

Output:

[“C++“,”Java“,”Go“]

Javascript

Related:How to Create a Bootstrap 2 Column Form Easily

4.unshift()

Unshift() method adds a new element or number of elements to the beginning of the given array in javascript. It is one of the most useful Array Methods in Javascript. This method also changes the overall length of the array. You can add as many elements as you want.

Syntax: 

array.unshift(element1, element2, …, elementN)

Array Methods in Javascript

Example:

Code : 

const anime = [“Naruto”,”Shield Hero”,”DB Super”];

console.log(anime); 

console.log(anime.length); // Array Length Before = 3

anime.unshift(“Tensura”, “Black Clover”); // Using Unshift to add to the array

console.log(anime); // Array After Adding 2 Elements to the beginning using Unshift()

console.log(anime.length); // Array Length After = 5

Output:

[“Naruto”,”Shield Hero”,”DB Super”]

3

[“Tensura”,”Black Clover”,”Naruto”,”Shield Hero”,”DB Super”]

5

Also Read: How to Split a String in Javascript Easily? – 2 Methods

5.splice()

splice() method is one of the best Array Methods in Javascript as it can be super useful sometimes. But it is also one of those confusing array methods. The splice() method is an array method used to add and/or remove array elements or overwrite the original array. 

Syntax:  

Array.splice( index, remove_count, elements )

Array Methods in Javascript

Example:

Code : 

const Producers = [“Martin Garrix”,”Avicii”,”Hardwell”]; //Original Array

Producers.splice(1, 0, “tiesto”, “Illenium”); // Adding Two Element at position 1

console.log(Producers); // Final array 

Output :

[“Martin Garrix”,”tiesto”,”Illenium”,”Avicii”,”Hardwell”]

Note: This method can be hard to understand for beginners, but with proper practice, you can understand this method.

6.concat() 

As the name suggests, the concat() method is used to join or merge or concatenate two or more arrays. the concat() method doesn’t change the original array, but it returns a new array. It is also one of the most important array methods in javascript.

Syntax:

Array.concat(array1, array2,…, arrayN)

Array Methods in Javascript

Example:

Code : 

//Two Arrays 

const A1 = [“A”, “B”,”C”];

const A2 = [“D”,”E”,”F”];

const alphabet = A1.concat(A2); //Merging Two Arrays using concat()

console.log(alphabet);

Output:

[“A”, “B”, “C”, “D”, “E”, “F”]

Also Read : 10 Best NPM Packages for Beginners

7.slice()

Array slice() method extracts & returns a part of the given array. It doesn’t change the original array. It accepts two parameters (Start & End), however, the parameters are optional.

Syntax:  

Array.slice(start,end)  

Array Methods in Javascript

Example:

Code : 

var numbers =[‘1′,’2′,’3′,’4’];  

var result=numbers.slice(1,2); //extracting the 2nd element = 2

console.log(result);

Output: 

[“2”]

8. join()

The join() method in javascript allows you to join multiple array elements or items into a string

 Syntax:  

Array.join();

Array Methods in Javascript

Example: 

Code:

const Animals = [“Cat”, “Dog”, “Dragon”, “Unicorn”,”Griffin”];// an array of animals 

const all_Animals = Animals.join(” + “); // joining the array using “+” 

console.log(all_Animals); 

Output: 

Cat + Dog + Dragon + Unicorn + Griffin

Conclusion:

Other than these eight methods, there are a few more array methods in javascript. However, these eight methods are probably the most used and essential array methods (must know).

Images : Pexels.

Editor / IDE : playcode

Leave a Comment