From 844930f44cf0705f016922ea7e6aff193cb522ba Mon Sep 17 00:00:00 2001
From: Ashish Rao <ashishrao2598@gmail.com>
Date: Mon, 15 Oct 2018 13:26:15 +0530
Subject: [PATCH] update article for filter function (#19197)

* update article for filter function

* Remove HTML markup and fix grammar and formatting

There was a lot of old HTML markup that I replaced with markdown markup.
Fixed grammar and sentence structure
Fix code block formatting
---
 .../higher-order-functions/index.md           | 82 +++++++++++++++++--
 1 file changed, 75 insertions(+), 7 deletions(-)

diff --git a/client/src/pages/guide/english/javascript/higher-order-functions/index.md b/client/src/pages/guide/english/javascript/higher-order-functions/index.md
index 5246f0b6ce..51b2f10765 100644
--- a/client/src/pages/guide/english/javascript/higher-order-functions/index.md
+++ b/client/src/pages/guide/english/javascript/higher-order-functions/index.md
@@ -8,9 +8,9 @@ A Higher Order Function is any function that returns a function when executed, t
 When you use `Array.map`, you provide a function as its only argument, which it applies to every element contained in the array.
 
 ```javascript
-var arr = [ 1, 2, 3 ];
+const arr = [ 1, 2, 3 ];
 
-var arrDoubled = arr.map(function(num) {
+const arrDoubled = arr.map(function(num) {
   return num * 2;
 });
 
@@ -26,15 +26,83 @@ function multiplyBy(num1) {
   }
 }
 
-var multiplyByTwo = multiplyBy(2);
+const multiplyByTwo = multiplyBy(2);
 
-var arr = [ 1, 2, 3 ];
+const arr = [ 1, 2, 3 ];
 
-var arrDoubled = arr.map(multiplyByTwo);
+const arrDoubled = arr.map(multiplyByTwo);
 
 console.log(arrDoubled); // [ 2, 4, 6 ]
 ```
 
-See the guide on <a href='https://guide.freecodecamp.org/javascript/closures' target='_blank' rel='nofollow'>Closures</a> for more information on how `multiplyByTwo` keeps a reference to `num1` in the example above.
+### Filter Method Example
 
-<a href='https://eloquentjavascript.net/05_higher_order.html' target='_blank' rel='nofollow'>More info about Closures</a>
+One amazing example of higher order function is the filter function.
+
+* Filter: It is the function on the array which loops through the array and filter out the value we are looking for.
+
+Below example:
+
+```javascript
+const animals = [
+  {name: 'Fluffykins', species: 'rabbit'},
+  {name:'Caro', species: 'dog'},
+  {name: 'Hamilton', species: 'dog'},
+  {name: 'Harold', species: 'fish'},
+  {name: 'Ursula', species: 'cat'}
+]
+```
+
+This example illustrates filtering using imperative programming to simply return a list of species belonging to **dog**.
+
+```javascript
+let dogs = [];
+for(let i = 0; i < animals.length; i++) {
+  if(animals[i].species === 'dog')
+  dogs.push(animals[i])
+}
+```
+
+Now if we wanted to do the same but this time using filter.
+
+```javascript
+const dogs = animals.filter(function(animal) {
+  return animal.species === 'dog';
+})
+```
+
+So what is happening here is that filter function takes in an argument, which is another function. A function passed as an argument inside another function is called a callback function. Here `function animal()` is an callback function.
+
+As you can see, the higher-order function has lot less code as compared to the traditional for-loop code. It's not because the syntax is shorter, but because there is lot less logic involved. The only logic used in the filter function in the above example is `return animal.species === 'dog'` which determines which animal goes into the array.
+
+Another reason there is a lot less code, is because this code below
+
+```javascript
+for(let i = 0; i < animals.length; i++) {
+  if(animal[i].species === 'dog') {
+    dogs.push(animals[i])
+  }
+}
+```
+
+is already handled inside the filter function for us so we dont have to worry about it.
+
+The callback function and the filter function just **compose** in one another.
+
+We can decouple the callback function from the filter function like this...
+
+```javascript
+const isDog = function(animal) {
+  return animal.species === 'dog'
+}
+
+const dogs = animals.filter(isDog)
+```
+
+#### More Information
+
+See the guide on [Closures](https://guide.freecodecamp.org/javascript/closures) for more information on how `multiplyByTwo` keeps a reference to `num1` in the example above.
+
+- [More info about Closures](https://eloquentjavascript.net/05_higher_order.html)
+- [Eloquent Javascript](https://eloquentjavascript.net/05_higher_order.html)
+- [Medium Article](https://medium.freecodecamp.org/higher-order-functions-in-javascript-d9101f9cf528)