DEV Community

Shivang Chauhan
Shivang Chauhan

Posted on

Top Javascript methods which i use the most ✔️

Introduction

In this post I will go through some of Javascript methods which I use most and which I absolutely love to use in my day to day Javascript coding.

Please note that this list is compiled based on my personal experience and it may be different for other people.

So without delaying more let's go through the list, I will explain what each of the method does with an example and then explain about what is going on in the example as well.

Using Array Filter()

This method is one of the most used methods in Javascript and I also use it almost daily when I want to to filter an array or remove any element from an array, let's understand this method using an example.

const numbers = [1, 2, 3, 4, 5];
const modifiedArr = numbers.filter((el) => el !== 2);
console.log(modifiedArr); // [1, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Explanation

Let's try to understand this, this method takes a callback function as an argument and this callback function gets called with a condition of our choice, each element in an array gets checked for that condition, if the element matches the condition the callback function returns true and otherwise false.

If the callback function returns true that array element gets pushed in a new array and in case of false that element gets skipped and doesn't gets added to the new array.

Array forEach()

I think most of the people who don't even use Javascript know about this famous method, which is basically used to loop through an array, let's see with an example.

const arr = [1, 2, 3, 4, 5];

arr.forEach((el, index, array) => console.log('element', el, 'index', index, 'arr', array);

// output
// element 1 index 0 arr (5) [1, 2, 3, 4, 5]
// element 2 index 1 arr (5) [1, 2, 3, 4, 5]
// element 3 index 2 arr (5) [1, 2, 3, 4, 5]
// element 4 index 3 arr (5) [1, 2, 3, 4, 5]
// element 5 index 4 arr (5) [1, 2, 3, 4, 5]

Enter fullscreen mode Exit fullscreen mode

Explanation

This method accepts a callback function as an argument which gets called for each element in an array, this callback function accepts up to three arguments.

First argument is the element itself for which the callback function is executing, next argument is the index position of that element and last argument is the copy of the whole array on which forEach is being executed.

Array map()

I use this method mostly on the frontend side with ReactJs, whenever i want to map any element for an array, but this can be used in the backend as well with NodeJs, let's see an example.

const arr = [{ name: 'John', age: 18 }, { name: 'Max', age: '20' }];

const names = arr.map((el) => el.name);

console.log('names', names); // names ['John', 'Max']

Enter fullscreen mode Exit fullscreen mode

Explanation

This method also accepts a callback function and returns a new array, this callback functions gets executed for each element in an array and whatever value is returned from this callback function gets pushed into the new array.

In our example we are just mapping through an array of objects and creating an array of only names using map().

Array find()

I use this method to find out if any particular value is present in an array, let's see an example of this

const arr = [2, 3, 5, 6, 8];

const val = arr.find((el) => el % 2 === 0)

console.log('val', val); // val 2

Enter fullscreen mode Exit fullscreen mode

Explanation

This method also accepts a callback function and this callback function starts getting executed on the elements and as soon as any element matches the condition defined inside the callback function, the execution stops and that particular element gets returned.

If no element matches the condition then undefined gets returned.

Array reduce()

I use this method whenever i want to do some calculation by using the current and previous element of an array and keep doing this for all the elements and get a single result in return, let's try to see this through an example.

const arr = [2, 2, 2, 2, 2];
const result = arr.reduce((prev, current) => prev * current);

console.log('result', result) // result 32

Enter fullscreen mode Exit fullscreen mode

Explanation

The reducer callback function gets called with the return of previous calculation with elements and current element in an array and it returns a single value.

For the first iteration if no default value is being passed then the first element of the array gets used as the previous value.

Conclusion

So these are the methods which i use very frequently and i love using these methods because they are so intuitive to me, i guess you also use these methods a lot.

Let me know in the comments section that among these which one do you use the most and which one is your favourite to work with, i look forward to hear from you all :)

Check more articles like this

AWS DynamoDB Pricing and Features

DynamoDB Global Secondary Index: Detailed Guide

Most Common Methods Used In Javascript and FAQ

Javascript Math floor(), Math ceil() and Math round()

Discussion (0)