cft

JavaScript Array methods

In this blog, I have discussed some useful JavaScript array methods using which you can make your code efficient and decrease the lines of code you write!


user

Shreyas Pahune

2 years ago | 2 min read

We have a lot of array methods in JavaScript but in this blog, you are gonna see only the most useful methods and after reading this, I am pretty sure that you are going to master these methods and use them to optimize your codeπŸ˜‡

Before getting started, I am going to use arrow function and in case you don't know the arrow functions don't worry, I have used normal functions (ES5 syntax) also!

So Let's get started :

This blog includes β†’

  1. For Each
  2. Filter
  3. Map
  4. Sort
  5. Reduce

1.) For Each:

This is a simple for loop.

Normal For Loop
Normal For Loop

Now let's try this same thing using for Each loop.

For Each Loop
For Each Loop

For each helps you to reduce the lines of code and makes the code much more readable.

You can also give index in for each loop:

For Each Loop with Index
For Each Loop with Index


The first parameter is the variable in which all the values are stored one by one, and the second parameter is the index of the current iteration.


2.) Filter:

As the name suggests, .filter() is a method that helps us to filter some values according to a given condition.

The .filter() method creates a new array with the values which is falling under the given condition from the existing array.

Filter Method
Filter Method


3.) Map:

.map() method creates a new array and performs a particular function for each element in the array.

This does not change the original array as it creates a new array.

Map Method
Map Method


4.) Sort:

As the name suggests .sort() method helps us to sort the array according to our condition.

If the condition is true then we return 1 or else we return -1, to get a better idea about it, we can use an example:

If we want to sort the companies according to their start years.

Sort Method
Sort Method

.sort() also makes a new array and the original array is untouched.

Here in this function, we have 2 parameters 'a' and 'b' which will be assigned to 2 values from the array and then they will be compared and then filled in the new array.

5.) Reduce:

.reduce() method reduces the whole array to a single value.

reduce method executes a given function for each value in the array from left to right (starting from index 0 to array's length - 1), for example, we have to find the sum of all the ages, so without for loop we can do this using reduce function.

Reduce Method
Reduce Method

We have to give 0 to set the initial value from which the values will start although it is optional so you may skip it.


BONUS 🎈

6.) indexOf:

This is a bonus array method for y'all!

This method checks if the entered value is in the array or not.

If the searched value is found, it will return the position/index else it will return -1.

Note: idexOf() is cases sensitive.

Bonus: IndexOf Method
Bonus: IndexOf Method


Thank you so much for reading the whole blog πŸŽ‰, if you liked it do share it with your developer friends, feel free to comment and give suggestions.

Upvote


user
Created by

Shreyas Pahune

I am a Flutter and a Full-Stack Web Developer who loves to write blogs, and play games in my free time.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles