In this article, we will try to understand various important Array methods (like forEach(), reduce() and so on) with the help of certain examples.
First, we create an array in JavaScript.
let array = [value1, value2, value3, value4];
In this above example we created an array which name is array and we can assign the value in value1,value2 and so on the index of array starts with 0 and end on last array element - 1
forEach() Method
The forEach() method is used to execute a provided function once for each element in an array. It's a convenient way to loop through array elements without the need for traditional for or while loops.
Example: In this example, we will print each element of the array using the forEach() method.
const users = ["Hey", 1,2,4.5,{key1: "value1", key2: "value2"}];
users.forEach((user) => {
console.log(user);
})
Output:
Hey
1
2
4.5
{ key1: 'value1', key2: 'value2' }
map() Method
This method transforms the array according to user specific condition and returns the new array.
Example: In this example we get a new array which is square of every num element of previous array.
const userNum = [5,3,4,6,3,1,6];
const squareUserNum = userNum.map((num) =>{
return num*num;
})
console.log(squareUserNum);
Output:
[25, 9, 16, 36, 9, 1, 36]
filter() Method
In this method if the return condition gets true the value of the array returns as a new array.
Example: In this example filter()Method returns the even number of the array as a new array.
let number = [2,5,8,3,11,23,34,12,68,];
let evenNumber = number.filter((num) =>{
return num % 2 === 0;
});
console.log(evenNumber);
Output: [2,8,34,12,68]
reduce() Method
The reduce method reduces arrays to a single value and returns a single value. The function takes four arguments: accumlator, current value, current index and array itself.
Example: Here we reduce the array value and returns.
const number = [2,5,3,6,7,4];
const sumOfNumber = number.reduce((accumlator, currentValue) =>{
return accumlator+currentValue;
});
console.log(sumOfNumber);
Output: 27
reduce Method tracing:
Note: if we set accumlator value 0 the currentValue starts with array 0th index.
sort() Method
sort method changes the current array into ascending or descending order. (In words, first short by capital latter then small latter.)
Example:
const names1 = ["arun", "monu", "Ajit", "Sonu", "Rohit", "Ram"];
//For Ascending Order
names1.sort();//Name1 sorted in ascending order
console.log(names1);// [ 'Ajit', 'Ram', 'Rohit', 'Sonu', 'arun', 'monu' ]
//For Descending Order
names1.sort((a,b)=>{
return a > b ? -1 : 1;
});
console.log(names1);// [ 'monu', 'arun', 'Sonu', 'Rohit', 'Ram', 'Ajit' ]
const num = [2,5,1,34,22,21,95,52];
//For Ascending Order
num.sort((a,b)=>{
return a-b;
});
console.log(num);// [1, 2, 5, 21, 22, 34, 52, 95]
//For Descending Order
num.sort((a,b) =>{
return b-a;
});
console.log(num);// [95, 52, 34, 22, 21, 5, 2, 1]
find() Method
it returns the first index value where returns condition gets true.
Example:
const number = [2,5,1,34,22,21,95,52];
const checkedNumber = number.find((num) =>{
return num>30;//here checked array number greater then 30
})
console.log(checkedNumber);
Output: 34
every() Method
If every array element passes through the condition return true the method itself return the true if any of the condition gets false it returns false.
Example:
const number = [2,5,1,34,22,21,95,52];
const checkNumber = number.every((num) =>{
return num<100;// it true for every array element so it returns true
})
console.log(checkNumber);// true
const isEven = number.every((num) =>{
return num % 2 === 0;// it's not true for every array element
})
console.log(isEven);// false
Output:
true
false
some() Method
if any one or more array element passes through the condition returns true the method will return true else it will return false.
Example:
const number = [2,5,1,34,22,21,95,52];
const checkNumber = number.some((num) =>{
return num<50;// it true for some(95and 52) array element so it returns true
})
console.log(checkNumber);// true
const recheckNumber = number.some((num) =>{
return num>100;// it's not true for every array element
})
console.log(recheckNumber);// false
Output:
true
false
fill() Method
structure array.fill(value, start index, end index)
it change the current array and assign the value from start index to before end index or it returns the array when we assign a new array.
Example:
const number = [2,5,1,34,22,21,95,52];
number.fill(0, 3, 5);// assigning value 0 to 3rd index to 4th index
console.log(number);// modified array
//assign new array
const numFive = new Array(5).fill(7);//assigning 5 times 7
console.log(numFive);//[7,7,7,7,7]
Output:
[2, 5, 1, 0, 0, 21, 95, 52]
[ 7, 7, 7, 7, 7 ]
splice() Method
Structure array.splice(start index, delete, insert)
it modifies the current array it can insert the new element in array and it can delete elements from the as well. When we delete elements it returns the deleted elements array.
Example:
const number = [2,5,1,34,22,21,95,52];
const deletedNumber = number.splice(1,3,67,20);
//from 1st index 3 element deleted and 67,20 inserted
console.log(number);//[2,67,20,22,21,95,52];
console.log(deletedNumber);//[5,1,34];
Output:
[2,67,20,22,21,95,52]
[5,1,34]
push(), pop(), shift(), unshift() Methods
- push() method add variable from last of the array
- pop() method removes variable from last of the array
- shift() method removes variable from start of the array element
- unshift() method add variable from start of the array element
Example:
let fruits = ["apple", "orange"];
fruits.push("mango", "banana");//adding mango and banana in last of the array
console.log(fruits);// ["apple", "orange", "mango", "banana"]
fruits.pop();//removing from last of the array
console.log(fruits);//["apple", "orange", "mango",]
fruits.unshift("guava", "grapes");//adding guava and grapes in starting of array
console.log(fruits);//["guava", "grapes", "apple", "orange", "mango",]
fruits.shift();//removing from start of the array
console.log(fruits);//["grapes", "apple", "orange", "mango",]
Output:
[ 'apple', 'orange', 'mango', 'banana' ]
[ 'apple', 'orange', 'mango' ]
[ 'guava', 'grapes', 'apple', 'orange', 'mango' ]
[ 'grapes', 'apple', 'orange', 'mango' ]