Ramkrishna

Posted on May 1 • Updated on May 4

Important Array Method in JavaScript

#webdev #javascript #beginners #tutorial

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 changes the array elements 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();//names1 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' ]

Top comments (5)

Jon Randy 🎖️ • May 1 • Edited

It's important to note that map doesn't transform the array (as is stated in the post), rather it creates a new array by transforming the elements of the array.