DEV Community

loading...
Cover image for Quick Review of 5 Of The Most Powerful JavaScript Methods

Quick Review of 5 Of The Most Powerful JavaScript Methods

thefierycoder profile image Rishi Purwar Updated on ・4 min read

Simple Technology Blog Banner (1).png
Hello 👋Everyone,

In this article, I am going to discuss 5 of the most powerful JavaScript methods.

Now, let's start discussing these methods one by one.

  1. Split:

This method is used to split a string into an array of substrings and it returns the new array. Splitting of a string is done by searching for a pattern where the pattern is provided as the first parameter in the method's call.

Let's take one example so that you can understand it clearly:

const string = "Javascript is a programming language."
const newArr = string.split(" ");
console.log(newArr);
Enter fullscreen mode Exit fullscreen mode

If you noticed in the above code, I add space inside the .split method.

This space is used as a separator to split a string into an array of substrings. A split method doesn't change the value of the original string.

If you do console.log(newArr). You'll get a new array that looks like this.

["Javascript", "is", "a", "programming", "language."]
Enter fullscreen mode Exit fullscreen mode

Now, your string is converted into an array. This method is one of the most powerful method.

2.
Math.random:

This method returns a random number between 0 (inclusive) and 1 (exclusive).

It basically returns a random floating-point number(decimal number).

const randomNum = Math.random();
console.log(randomNum);
Enter fullscreen mode Exit fullscreen mode

If you run the above code, you see a number between 0 and 1 like 0.4795164735135027.

If you want an integer instead of a floating-point number, you should wrap Math.random() with Math.floor(). Math.floor() method round a number downward to its nearest integer like so.

const randomNum = Math.floor(Math.random());
console.log(randomNum);
Enter fullscreen mode Exit fullscreen mode

Now, if you want an integer between 0 and 20. Your code should look like this.

const number = 20;
const randomNum = Math.floor(Math.random()*number);
console.log(randomNum);
Enter fullscreen mode Exit fullscreen mode

I hope you'll understand how Math.random() method works.
Now, let's move to our third method.

3.
forEach:

This method is used to loop through an array. If you used for loop to loop through an array, after reading this, you'll never go to use that.

let say we have an array:

const numbers = [1,2,3,4,5];
Enter fullscreen mode Exit fullscreen mode

Now, if you want to multiply each number inside an array by 2, How do you do that?

Here, the forEach() method comes into play. Let see how it works.

Basically, the forEach() method calls a function once for each element in an array, in order.

const numbers = [1,2,3,4,5];
numbers.forEach(number => {
    console.log(number*2);
});

//2
//4
//6
//8
//10 
Enter fullscreen mode Exit fullscreen mode

So, in the above code for each number in an array, we call a function which multiplies each number by 2. I think, now you understand how to use forEach method.

4.
filter():

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Now, let's take one example to clearly understand it.

const ages = [18,15,10,20,22];
const filterArr = ages.filter(age => age>18);
console.log(filterArr);
Enter fullscreen mode Exit fullscreen mode

So, in the above example, I take an array of ages and apply the filter method to it.

Filter method executes a function for each element in an array and checks whether it is satisfying the condition provided by the given function or not. If it satisfies the given condition, it returns that element to the new array otherwise it doesn't store that element in the filterArr array.

I hope now you have a clear understanding of how to use the filter method. This method is basically used to implement delete functionality in various apps

Note: filter() method does not change the value of the original array.

filter() method does not run the function for array elements without values.

5.
Map method:-

This method calls a provided function for each element in an array and then it creates a new array with the results of calling a function for every array element.

Now, let's take an example to understand it better.

const numbers = [1,2,3,4,5];
const newArr = numbers.map(number => {
    return number*number;
});
console.log(newArr);
Enter fullscreen mode Exit fullscreen mode

In the above code, I take a numbers array and then apply the .map method to it. For each number, I call a function that returns a square of that number and creates a new array named newArr

Now, if you do console.log(newArr). You will get a new array that contains a square of numbers like this.

[1, 4, 9, 16, 25]
Enter fullscreen mode Exit fullscreen mode

This method doesn't change the value of the original array.

Summary:-

Now, We have covered 5 of the most powerful javascript methods. These methods are very useful and help us to write cleaner code.

Thanks for reading this blog

If you find the blog helpful, feel free to subscribe to our newsletter so whenever our post goes live, you'll get the notification first.

Do leave your feedback and suggestions as comments.

Check out my youtube channel

Let's connect on Twitter

Discussion (9)

pic
Editor guide
Collapse
kretaceous profile image
Abhijit Hota

These are actually essential methods without which, modern JavaScript is...umm...not very modern.

You have provided a good summary of all of them but the title is misleading.

Consider changing it to something like "5 essential modern JavaScript methods".

P.S. Don't get discouraged by this. Keep writing =)

Collapse
thefierycoder profile image
Rishi Purwar Author

Thanks for your feedback...
I'll change the title...

Collapse
slash851 profile image
Karol

Those are really common methods, so disappointed

Collapse
matthewpardini profile image
Matthew Pardini

Probably THE most common

Collapse
nektro profile image
Meghan (she/her)

these are the most common methods in the language

Collapse
kellycode profile image
Kearnan Kelly

Nice article. And it's nice how a short review of JS methods can start sparking reminders of it's multitude of cleverness. Like CSS, it's still getting better every year.

Collapse
thefierycoder profile image
Rishi Purwar Author

I'm glad you liked it...🙂🙂

Collapse
tshinnic profile image
Tom Shinnick

Stunningly commonly known. .foreach() and .map() are basic knowledge for list/array manipulation. Next you'll be telling us about shoelaces?

Collapse
enyichiaagu profile image
Enyichi A. Agu

These are common methods. But pretty powerful