DEV Community

Cover image for JS Array Methods ! πŸ±β€πŸ
Mayank Kumar
Mayank Kumar

Posted on

JS Array Methods ! πŸ±β€πŸ

WHAT IS A JS ARRAY ?

The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.

Arrays provide a lot of methods. To make things easier.

We will be talking about 4 Array Methods :

1.map

2.filter

3.sort

4.reduce

gif

1) Array.prototype.map()

So the basic need for using the map() method is to modify a given data, the map() method creates a new array populated with the results of calling a provided function on every element in the calling array. it return the same amount of data passed by the array but in a modified form

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
Enter fullscreen mode Exit fullscreen mode
const fullName = inventors.map(
        inventor => `${inventor.first} ${inventor.last}`
      );
      console.log(fullName); // it returns the full name of the inventors using the map method
Enter fullscreen mode Exit fullscreen mode

2) Array.prototype.filter()

So the basic need for using the filter() method is to filter out a given data, the filter() method creates a new array with all elements that pass the test implemented by the provided function.
Its returns the filtered arrays which might not include every element you have passed init.

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
Enter fullscreen mode Exit fullscreen mode
 const filter = inventors.filter(
        inventor => inventor.year >= 1500 && inventor.year <= 1599
      );
      console.table(filter); // filter helps us here to filter out the list of inventors year dates
Enter fullscreen mode Exit fullscreen mode

3) Array.prototype.sort()

So the basic need for using the sort() method is to sort out a given data, the sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending. It will return the same amount of data that has been passed !

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
Enter fullscreen mode Exit fullscreen mode
const sorted = inventors.sort((a, b) => (a.passed > b.passed ? 1 : -1));
      console.table(sorted); // this method helps with the sorting of the results/arrays
Enter fullscreen mode Exit fullscreen mode

3) Array.prototype.reduce()

So the basic need for using the reduce() method is to sort out a given data, the reduce() method executes a reducer function i.e (that you provide) on each element of the array, resulting in a single output value, It returns a single value.

const inventors = [
        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }
Enter fullscreen mode Exit fullscreen mode
 const total = inventors.reduce((total, inventor) => {
        return total + (inventor.passed - inventor.year);
      }, 0); // this method helps us to calculate the total number of years that were lived by the inventors using the reduce method
      console.log(total);
Enter fullscreen mode Exit fullscreen mode

Some more JS Array Methods are:-
img

That's IT

gif

This Blog was inspired was Wes Bos JavaScript30 course

BONUS MEME

image

HAPPY CODING πŸš€

Discussion (7)

Collapse
jonrandy profile image
Jon Randy

No mention of forEach?

Also, arrays in Lua do in fact start at index 1 by convention

Collapse
mayank0508 profile image
Mayank Kumar Author • Edited on

Actually I have kept forEach for another blog where I will be discussing about in much further detail, and the Lua things is fresh knowledge to me, thanks 🀝

Collapse
ptejada profile image
Pablo Tejada

I am just going to to leave this MDN link here for those that are interested in learning more about arrays

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

Collapse
mayank0508 profile image
Mayank Kumar Author

πŸ™ŒπŸ€

Collapse
meo3w profile image
Phil Hasenkamp

Well done! Thank you for sharing your knowledge with us πŸ™πŸΌ

Collapse
jesuswalks1101 profile image
jesuswalks1101

Very clear, thank you)

Collapse
mayank0508 profile image
Mayank Kumar Author

Your Welcome 🀝