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.
Headings of Contents
- 1 JavaScript Array Methods
- 2 Remove item to an array
- 3 Splicing an Array
- 4 Merging Two Array
- 5 Slicing an array
- 6 The Array.forEach() Method
- 7 The Array.map() method
- 8 The Array.filter() Method
- 9 The Array.find() Method
- 10 The Array.from() Method
- 11 The Array indexOf() Method
- 12 The Array.findIndex() Method
- 13 The Array.every() Method
- 14 The Array.fill() Method
- 15 Changing Element of an array
- 16 Summary
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.