JavaScript Array Methods

In this tutorial you will learn about JavaScript Array Method and Properties.

If you are a JavaScript developer, then you should have knowledge of the most widely used JavaScript array methods because the array method makes code a lot easier and also make code lool clean and easy to understand.

I strongly recommend you, before going through this article, Read our JavaScript array tutorial so that you have familiar with JavaScript at least.

So in this article, we will explore some of the most popular and widely used JavaScript array methods with the help of the examples.

JavaScript Array Methods

JavaScript array provides a lot of methods that make things easier. JavaScript array methods are capable of manipulating the array.

The toString() Method

The toString() method is used to convert JavaScript array to string.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];

// convert array to string.
console.log(languages.toString());

The join() Method

The join() method is used to join all the array elements into string.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
var newString = languages.join('*');
console.log(newString);

Remove item to an array

The pop() Method

The pop() is used to remove last element of an array and return removed item.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
languages.pop();

pop() return the value that is popped out.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
var x = languages.pop();
console.log(x);

In above example value of x will be “JavaScript“.

Shifting Element

The shift() method removes the first array element and “shifts” all other elements to a lower index.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
languages.shift();
console.log(languages);

shift() method return the string that was shifted.

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
var x = languages.shift();
console.log(x);

Add item to an Array

The push() method add a new element to the array at the end.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
languages.push('C++');
console.log(languages);

The unshift() method

The unshift() method add new element to an array ( at the beginning ) and “unshift” older element.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
languages.unshift('C++');
console.log(languages);

unshift() method return new array.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
var x = languages.unshift('C++');
console.log(x); 

Deleting Array Element

To delete array element, use delete keyword.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
delete languages[2];
console.log(languages);

Splicing an Array

The splice() method is used to add new item to an array.

• The first parameter defines the position where new elements should be added (spliced in).
• The second parameter defines how many elements should be removed.
• And the rest of the parameter represent the element.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
console.log("The old array is:- ", languages);
languages.splice(2, 0, "C++", "R");
console.log("The new array is:- ", languages);

Removing element using splice()

You can use splice() method to remove elements from array as well.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
languages.splice(0, 1);
console.log(languages);

Merging Two Array

To merge two array you have to use concat() method.

Example

var languages1 = ['PHP', 'Python'];
var languages2 = ['jQuery', 'JavaScript'];
var x = languages1.concat(languages2);

Output

PHP,Python,jQuery,JavaScript

Slicing an array

The slice() method slice out a piece of array into a new array.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
var x = languages.slice(1);
console.log(x); // Python

Note:- The slice() method creates a new array. It does not remove any elements from the source array. slice() take two arguments, start argument and end argument.

The Array.forEach() Method

The Array.forEach() Method execute the provided function for every element of an array.

Example

const months = ['January', 'February',' March', 'April','May','June','July'];

months.forEach(function(value){
console.log(value)
});

/*
January
February
March
April
May
June
July

*/

The Array.map() method

The Array.map() method is one of the most popular used methods among other methods. This methods execute a function for every element of an array and return a new transformed array.

Example

const months = ['January', 'February',' March', 'April','May','June','July'];

const newArray = months.map(function(month){
return month.toUpperCase()
});

// display new arrays

console.log(newArray); 

/* Output
["JANUARY", "February", " MARCH", "APRIL", "MAY", "JUNE", "JULY"]

*/

The Array.filter() Method

The Array.filter() method is create a array filled with all the array elements that are fulfil the condition.

Example

const ages = [12, 40, 45, 23, 10, 20];
function checkAge(age)
 {
 if (age >= 18 )
 {
	return age;
 }
}

const newAges = ages.filter(checkAge);
console.log(newAges); // [40, 45, 23, 20]

The Array.find() Method

The Array.find() method returns a first item that is fulfil the condition.

Example

const ages = [12, 40, 45, 23, 10, 20];
function checkAge(age)
 {
 if (age >= 18 )
 {
	return age;
 }
}

const newAges = ages.find(checkAge);
console.log(newAges); // 40

The Array.from() Method

The Array.from() method is used to create an array from an object.

Example

let myString = "268497531";
let newArray  = Array.from(myString);
console.log(newArray);

The Array indexOf() Method

The JavaScript array indexOf() method search an item for specified item and returns it position.
If the item not found it will return -1.

Example

const months = ["JANUARY", "FEBRURARY", " MARCH", "APRIL", "MAY", "JUNE", "JULY"]

console.log(months.indexOf("MARCH")); // 2
console.log(months.indexOf("AUGUST")); // -1 

The Array.findIndex() Method

The Array.findIndex() method returns the first element in an array that passed a specified condition. The findIndex() method executes the function once for each element present in the array.

Example

const months = ["JANUARY", "FEBRURARY", " MARCH"]
function myFunction(value, index, array)
{
	if ( value.length >= 8)
	{
		return index;
	}

	
}
console.log(months.findIndex(myFunction)); // 1

The Array.every() Method

The Array.every() method is used to test whether all the items in an array pass the provided test condition and returns the boolean value: true or false.

Example

const ages = [12, 40, 45, 23, 10, 20];
function checkAge(age)
 {
 if (age >= 18 )
 {
	return age;
 }
}


const newAges = ages.every(checkAge);
console.log(newAges); // false

The Array.fill() Method

The Array fill() method is used to fills the specified value in an array.

Syntax

array.fill(value, start, end);

• value:- A value to be filled.
• start:- Position to start filling array.
• end:- Position to end filling array.

Example

const months = ["JANUARY", "FEBRURARY", " MARCH", "APRIL", "MAY", "JUNE", "JULY"]
months.fill('Programming', 2, 5);
console.log(months);

/*

["JANUARY", "FEBRURARY", "Programming", "Programming", "Programming", "JUNE", "JULY"]

*/

Changing Element of an array

To change Array element, use index number.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
languages[2] = 'C++';
console.log(languages); // ["PHP", "Python", "C++", "JavaScript"]

The Length Property

To get the length of the array, use length property.

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];
var x = languages.length;
console.log(x); // 4

Summary

So in this article, we have seen all about JavaScript Array methods that are the most popular and widely used methods. If you want to become a JavaScript developer, Then you can’t ignore the JavaScript array and its methods because the array and array methods in JavaScript very useful to handle a large amount of data.

If you like this article, please share and keep visiting for further JavaScript tutorials.