8 javascript array methods you must know!

Almost every project you do using javascript we often deal with arrays and we perform many operations on it. So, it is important to have a good grip on javascript array methods. There are many javascript array methods but in this article I want to explain some of the most important methods which make things easier for you.

They are -

• forEach
• filter
• map
• find
• some
• every
• reduce
• includes

1.forEach

forEach method is used to iterate over all the elements in the given array. It's a fancy way of writing for loop. Also forEach is somewhat easier to write and looks in a clean way to iterate the elements rather than for loop. Consider the code below

const emp=[
    {name:'john',expenses:100},
    {name:'watt',expenses:10},
    {name:'noah',expenses:10},
    {name:'james',expenses:500},
    {name:'lucas',expenses:300},
    {name:'liam',expenses:35},
    {name:'peter',expenses:1000},
]

emp.forEach((eachEmp)=>console.log(eachEmp.expenses));

/* output- 
100
10
10
500
300
35
1000
 */

2.filter

filter method is used to filter some of the elements in the given array based on some condition. It returns the array of elements which satisfies the given conditions.

const emp=[
    {name:'john',expenses:100},
    {name:'watt',expenses:10},
    {name:'noah',expenses:10},
    {name:'james',expenses:500},
    {name:'lucas',expenses:300},
    {name:'liam',expenses:35},
    {name:'peter',expenses:1000},
]

/*returning the employees whose expenses are >=500 */
const filteredEmp=emp.filter(eachEmp=>eachEmp.expenses>=500);
console.log(filteredEmp);

/* output - 
      [ 
          { name: 'james', expenses: 500 }, 
          { name: 'peter', expenses: 1000 }
      ] 
 */

NOTE : filter doesnot modify the original array.

3.map

map method in javascript creates an array by calling a specific function on each element present in the parent array. It is a non-mutation method. Consider the example below

const emp=[
    {name:'john',expenses:100},
    {name:'watt',expenses:10},
    {name:'noah',expenses:10},
    {name:'james',expenses:500},
    {name:'lucas',expenses:300},
    {name:'liam',expenses:35},
    {name:'peter',expenses:1000},
]

const newEmp=emp.map((eachEmp)=>{
    return eachEmp.expenses*10;
});
console.log(newEmp);

/* ouput - 
        [  1000,  100,  100, 5000,3000,  350,10000]
     */

4.find

find method is used to find a specific element in the given array. If one or more elements satisfies the given condition then the first element which is matched is returned.

const emp=[
    {name:'john',expenses:100},
    {name:'watt',expenses:10},
    {name:'noah',expenses:10},
    {name:'james',expenses:500},
    {name:'lucas',expenses:300},
    {name:'liam',expenses:35},
    {name:'peter',expenses:1000},
]

/* returns the item  as soon as it finds one  and  leaves the code */
const findEmp=emp.find(eachEmp=>eachEmp.expenses==10);
console.log(findEmp);

/* output - 
     { name: 'watt', expenses: 10 } 
 */

5.some

some method is used to check whether a element is present in the given array that satisfies the given condition. Unlike find method it returns a bool value. It returns true if some of them satisfy the condition else returns false.

const emp=[
    {name:'john',expenses:100},
    {name:'watt',expenses:10},
    {name:'noah',expenses:10},
    {name:'james',expenses:500},
    {name:'lucas',expenses:300},
    {name:'liam',expenses:35},
    {name:'peter',expenses:1000},
]

/* returns a bool value */
const empWithLowExpExists=emp.some(eachEmp=>eachEmp.expenses<=10);
console.log(empWithLowExpExists);

/* output -  true  */

6.every

every method checks that, does every element in the given array satisfies the given condition?. It returns true only if all the elements satisfies the given condition else returns false.

const emp=[
    {name:'john',expenses:100},
    {name:'watt',expenses:10},
    {name:'noah',expenses:10},
    {name:'james',expenses:500},
    {name:'lucas',expenses:300},
    {name:'liam',expenses:35},
    {name:'peter',expenses:1000},
]

const everyEmpOfLowExp=emp.every(eachEmp=>eachEmp.expenses<=10);
console.log(everyEmpOfLowExp);

/* output -  false */

7. reduce

let's say we want to calculate the total expenses i.e., the sum of each and every employee expenses.we use reduce method for it. reduce method takes the two parameters, the first one is callback and the second one is a value .In our case the second parameter is 0 since the initial sum of the expenses is 0. Look at the code below

const emp=[
    {name:'john',expenses:100},
    {name:'watt',expenses:10},
    {name:'noah',expenses:10},
    {name:'james',expenses:500},
    {name:'lucas',expenses:300},
    {name:'liam',expenses:35},
    {name:'peter',expenses:1000},
]

const totalSum=emp.reduce((sum,currentEmp)=>{ 
    return sum+currentEmp.expenses;
},0);
console.log(totalSum);

/* output - 1995 */

Initially the sum has the value 0. After this for Every time the sum has the value sum=sum+currentEmp.expenses. At last the sum value is returned.

8.includes

includes returns a boolean value. It returns true if the element is present in the given array else returns false.

const values=[1,2,3,4];

const someEmpExists=values.includes(4);
console.log(someEmpExists);

/* output - true */

That's how easy they are. If you still don't understand or have a doubt, please let me know down in the comments section.

Let's connect on Twitter

Thanks for the read.