Basically, Javascript array method is one of the imperial factor in development that helps us to write more clean and better code. Collecting the list of useful array method will surely help you from any complex dilemma. This article is completely aimed to list down the 10 useful JavaScript array methods which you can utilize it in a better way.
Array.map()
map() method creates a new array with the result of calling a function on every element in an array. If you want to change all the elements in an array at the time then we can use the map() method.
For example converting all array elements in uppercase,
let fruits = ["apple", "mango", "orange", "banana"]; const fruits_map = fruits.map(fruit => fruit.toUpperCase()); console.log(fruits); //["apple", "mango", "orange", "banana"] console.log(fruits_map); //["APPLE", "MANGO", "ORANGE", "BANANA"]
Array.filter()
filer() method creates a new array based on the array elements which passed certain conditions so if we want to filter out the specific element from the array then we can use this filter() method.
Let’s consider the following array,
let fruits = ["apple", "mango", "orange", "banana"];
From the fruits array, we can filter out fruit name which has the length more than 5.
const result = fruits.filter(fruit => fruit.length > 5); console.log(result); //["orange", "banana"]
Also Read: 3 Must Known Features Of JavaScript ECMAScript 6 (ES6)
Array.forEach()
forEach() method used for iterating array elements. It calls the provided callback function once in every array element & it is a modern way that used to write “for” loop.
Let’s consider the following array,
const fruits = ["apple", "mango", "orange", "banana"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
Array.indexOf()
indexOf() method is used to find the index of a given element in an array. If the element is duplicated, it returns the first index of an array so when an element is not found then it will return -1.
let fruits = ["apple", "mango", "orange", "banana"];
console.log(fruits.indexOf('orange')); // it returns 2
console.log(fruits.indexOf('grape')); // it returns -1
Array.every()
Every() method executes the provided function once for every element in an array until it finds the element where the callback function returns falsy value. If any element returns falsy value then every() method will immediately return false. Similarly, If all the element returns truthy values then every() method also will return true.
let fruits = ["banana", "apple", "mango", "orange"];
All the elements in the above array have more than 4 characters so when all the elements in the array returns truthy value, then it will return us the value “True”.
console.log(fruits.every(fruit => fruit.length > 4)); // true
Now ‘apple’ element from an array will return falsy value, so immediately every() method also returns false so the moment it returns false this function will not be executed for other elements.
console.log(fruits.every(fruit => fruit.length > 6 )); //false
Array.splice()
Using splice() method we can remove and replace the existing element or even add a new element in the array. If the inserted element differs from the number of elements being deleted then the array length will be different at the end.
let fruits = ["banana", "apple", "mango", "orange"];
It will insert the grape element at first index of an array.
fruits.splice(1,0,"grape"); console.log(fruits); //["banana", "grape", "apple", "mango", "orange"];
After inserting an element the array will look like this [“banana”, “grape”, “apple”, “mango”, “orange”], below code will help us to remove one element from index 2.
fruits.splice(2,1); console.log(fruits) //["banana", "grape", "mango", "orange"];
After removing an element the array will look like this [“banana”, “grape”, “mango”, “orange”], now if we need to replace the index element 1 with apple then you can follow this,
fruits.splice(1,1,'apple'); console.log(fruits); // ["banana", "apple", "mango", "orange"];
Array.includes()
includes() methods used to find a particular element in an array so if the given element is found in the array it will return true otherwise it will return false.
let fruits = ["banana", "apple", "mango", "orange"];
console.log(fruits.includes("apple")); // returns true
console.log(fruits.includes("grape")); // returns false
Best Read: 10 App Ideas Using Javascript That Turned Into Million-Dollar Startups
Array.push(), Array.unshift()
push() method adds one or more elements at the end of the array and it also returns the new length of an array.
let fruits = ["banana", "apple", "mango", "orange"];
console.log(fruits.push('grape')); // returns 5
console.log(fruits); // ["banana", "apple", "mango", "orange", "grape"]
unshift() method adds one or more elements at the beginning of the array and this will also return the new length of the array.
let fruits = ["banana", "apple", "mango", "orange", "grape"]
console.log(fruits.unshift('Avocado', 'Strawberry')); // returns 7
console.log(fruits); // ["Avocado", "Strawberry", "banana", "apple", "mango", "orange", "grape"]
Array.pop(), Array.shift()
pop() method removes the last element of an array. Also, It changes the array length and it will return the removed element.
let fruits = ["banana", "apple", "mango", "orange"]; console.log(fruits.pop()); // It returns "orange" console.log(fruits); // ["banana", "apple", "mango"]
The shift() method removes the first element of an array and returns the removed element. It also changes the array.
let fruits = ["banana", "apple", "mango"] console.log(fruits.shift()); // It returns "banana" console.log(fruits); //["apple", "mango"]
Array.some()
some() method executes the provided function once for all the elements in an array until it finds the element in which callback function returns a truthy value. If any element returns a truthy value then some() method immediately returns true. Otherwise, it will return false.
let fruits = ["banana", "apple", "mango", "orange"];
Here the above array value ‘banana’ has a length of 6 so it will pass the following condition and returns true.
console.log(fruits.some(fruit => fruit.length > 5)); // true
Now, some() method returns false value for all the elements returns false.
console.log(fruits.some(fruit => fruit.length > 10)); //false
Hope you guys find it helpful. Try these array methods and let us know your result in the comment section.
[contact-form-7 404 "Not Found"]
