Be wise in using collections

What are collections?

Collections are a data type that we often use to store data in the form of a list of values, called specific arrays, sets and maps.

Why should I care about it?

In JavaScript, we often have to work with collections, such as pointing to each element in turn, filtering out the needed items, finding an element or even reducing the original array in various ways.
There are 3 main methods for manipulating collections: .map() , .filter() , and .reduce() .
Mastering these 3 methods is an important step to writing a code sạch , clear and understandable code.
Let’s start with an array containing the following developer information:

Map pattern

The map will apply a function to each molecule in the array and return a new array with the value that results from running that function.
Enough with it is enough. Understand as simple as we now have an array of objects, if you want to modify the data of each element, or simply retrieve the necessary attributes, use .map() .
For example, we just need to retrieve the birth date of each developer, how to do it.
Input: An array of developers data
Output: An array of data containing only the names of the developers

When not using map ():

Use for() :

Use .forEach() :

And when using map ()

Use .map() :

What just happened? Why only one line has reached the other. Let me explain what happened when using the map in the example above:

1. Create a mapArr array
2. Loop through the developers array elements
3. Call mapFunc function with current element as argument
4. Push the result of mapFunc to mapArr array
5. Returns the mapArr array after having browsed all the elements

Quite similar to using .for() and .forEach right.

Also you can handle data (add, modify) via map ()

Help me get the developer age:

How to create the map () function

The .map() function can be implemented via recursion.

Filter Pattern

The filter will apply a function that checks the condition of passing each element individually, thereby returning a new array with data containing the elements that passed that condition (returning true).
The name says it all, whenever you want to filter data from an array, use the filter. Let’s start with retrieving developers born after 1950.
Input: An array of developers data
Output: An array of data only containing developers born after 1950

Best way

Let’s go step by step to see how the .filter() function works:

1. Create an empty array filterArr.
2. Loop through array elements.
3. Call the filterFunc function with the current element as argument.
4. If the result is correct, push the element into the filterArr array.
5. Returns the filterArr array after passing all the elements.

When not using filters

And here is the result returned:

How to create the filter () function

We can create the filter () function by using recursive functions.

Reduce Pattern

Reduce will convert the array into a value by combining each element together.
For example, if you have an array of subject transcripts, now you want to know your comma, reduce will easily help you calculate and return the comma for you. Now we want to know what is the average year of developer development:
Input: An array of developers data
Output: The average birth year of the developer

Best way

Using .reduce() is really simple:

When not using reduce

Bonus

How to use join ()

If you want to get enough information of the developer then how?

Everything looks good, but we should write the following:

How to use .min () or .max ()

Comparing two values ​​with each other and then returning a smaller or larger value is quite common: The typical way to solve that problem is:

Why so? The Math.min() function will return the smallest value of any set of numbers, right. Each parameter is passed in turn rather than passed directly into an array. To make it easier to understand, see the example below:

Before the ES6 / ES2015 .apply () function was used to solve that problem. Also can use Spread syntax (…) for ES6

How to create the sum () function

The .sum () function returns the sum of all values ​​in a given array.

Refer

https://levelup.gitconnected.com/use-collections-wisely-in-javascript-c1440f2ff595
https://www.freecodecamp.org/news/how-to-write-your-own-map-filter-and-reduce-functions-in-javascript-ab1e35679d26/