Simplify javascript use .map(), .reduce(), and .filter()

#.map()

Basically, it takes 2 arguments, a callback and an optional context(will be considered as ```this``` in the callback). The callback runs for each value in the array and returns each new value in the resulting array and the resulting array will always be the same length as the original array. 

let's say that you have received an array containing multiple objects - each one represent a sudent and you need only the array that containing only the id of each student.  

```javascript
var students = [
   { id: 1, name: 'Pich' },
   { id: 2, name: 'Oudom' },
   { id: 3, name: 'Doe' },
   { id: 4, name: 'John' },
   { id: 5, name: 'Joy' }
];

//output
[1, 2, 3, 4, 5]
```
We can get the result in many ways like creating empty array then using ```forEach()```, ```for(...of)```, or a simple ```for()```.

let's see the code:

```javascript
var studentIds = [];

students.forEach(function (student) {
   studentIds.push(student.id);
});
```

using ```.map()``` instead:

```javascript
var studentIds = students.map(function (student) {
   return student.id
});
```
To be more concise with arrow function we can code something like this:

```javascript
const studentIds = students.map(student => student.id);
```


#.reduce()


It runs a callback for each element of an array and passes the result of this callback(the accumulator) from one array element to the other. The accumulator can be pretty
much anything like integer, string, object, etc. and it must be instantiated or passed when calling ```.reduce()```.

```javascript
let result = arr.reduce(callback);
// Optionally, you can specify an initial value
let result = arr.reduce(callback, initValue);
```
```result``` — the single value that is returned.
```arr``` — the array to run the reduce function on.
```callback``` — the function to execute on each element in the array.
```initValue``` — an optionally supplied initial value. If this value is not supplied, the 0th element is used as the initial value.

```callback``` function can take four arguments. You will recognize three of the arguments from the map() and filter() methods. The new argument is the accumulator.

```accumulator``` — the accumulator accumulates all of the callbacks returned values.
```val``` — the current value being processed
```index``` — the current index of the value being processed
```arr``` — the original array

Example:

```javascript
var a = [2, 48, 16]; 
var sum = a.reduce((total, val) => total + val);
sum // 66
```

#.filter()

What if you have an array, but only want some of the elements in it? That’s where ```.filter()``` comes in! The ```.filter()``` method creates a new array with all elements that pass the test implemented by the provided function.

Let's see the example:

```javascript
var students = [
   {
     id: 1,
     name: "Adel",
     gender: "girl"
   },
   {
     id: 2,
     name: "Bob",
     gender: "boy"
   },
   {
     id: 3,
     name: "Jonh",
     gender: "boy"
   },
   { 
     id: 4,
     name: "Janny",
     gender: "boy"
   },
   {
     id: 5,
     name: "Dane",
     gender: "girl"
  }
]
```
We want two arrays now, one for boy and one for girl with ```.filter()```:

```javascript
const g = students.filter(girl => girl.gender === 'girl');
const b = students.filter(boy => boy.gender === 'boy');
```