DEV Community

loading...
Cover image for JavaScript Array methods

JavaScript Array methods

Shreyas Pahune
Hey there, I am Shreyas Pahune and I love to code.I am a Full-Stack Web and a Flutter developer
ใƒปUpdated on ใƒป3 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 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.

for loop

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

for each

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 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 which 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

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

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

.sort() also makes a new array and the original array is un-touched.
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

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


Next Blog's topic -> Features introduced in ES6.


Do visit the community made by me and my friend @sumeet16 for more amazing and informative stuff, and if you wanna recommend something or give feedback, feel free to comment๐Ÿ˜‡!

CodeBox's handles:
https://linktr.ee/CodeBox

Discussion (16)

Collapse
jimhol profile image
jimhol

indexOf is good when you need the index. If you just want to know whether the value is in the array or not, you then have to test the result against -1. Alternatively you could use .includes() to get true or false directly.

Collapse
shreyazz profile image
Shreyas Pahune Author

Yup thatโ€™s correct! But indexOf tells you precisely where the value is foundโ€ฆโœ…

Collapse
larsonnn profile image
Lars Feldeisen

Just a reminder that arrow functions are not just another syntax. An alternative expression with limited use.

developer.mozilla.org/en-US/docs/W...

Collapse
mardiya profile image
Mardiya Zubairu

Thanks for this post. I just finally understood reduce method๐Ÿ˜Š

Collapse
shreyazz profile image
Shreyas Pahune Author

Awesome ๐Ÿ˜‡

Collapse
mohan077 profile image
Mohan Rawat

Amzing thanks

Collapse
shreyazz profile image
Shreyas Pahune Author

Thanks bro!

Collapse
someshium profile image
someshium

Also, how to make these code snippets images?

Collapse
shreyazz profile image
Shreyas Pahune Author

Copy and Paste your code in this website : carbon.now.sh/

Collapse
rlancer profile image
Robert Lancer

sort() also makes a new array and the original array is un-touched

That's not true, sort modifies the array in place

Collapse
deniskatsapov profile image
deniskatsapov

Thanks ๐Ÿ‘ .
I am still confused about the methods .

Collapse
shreyazz profile image
Shreyas Pahune Author • Edited

confused about methods discussed in this blog?? or the term method?

Collapse
someshium profile image
someshium

I am not getting how the sort function adds the elements to a new array based on return value 1 or -1. Can you please explain this?

Collapse
shreyazz profile image
Shreyas Pahune Author

That is how the sort function is made...you just have to give it a variable, and if the values matches then it will get pushed into the new variable we created.

Collapse
tahavepari profile image
Tahavepari

It's very helpful to me Keep it up bro ๐Ÿ”ฅ

Collapse
shreyazz profile image
Shreyas Pahune Author

Thanks bro