what is the advantage of using functional programming in this example? I have used JavaScript

Question

Using Descriptive way

    //Declare variables

    var arr1 = [1,2,3];
            arr2 = [];

  //Immediate Invoked Functions      
(function(){
        for(var i = 0 ; i<arr1.length ; i++){
            arr2.push(3 * arr1[i]);
        }

    //logging the values

    console.log(arr2);
        console.log(arr1);

        })();

Using Functional Programming and First Class function

//Declare variables

    var arr1 = [1,2,3];

//creating a function to push values  

function mapEachArrayValue(arr,fn){

        var newArr=[];

        for(var i=0; i<3 ; i++){

        newArr.push(fn(arr1[i]));

        }
        return newArr;

    }
    var arr2 = mapEachArrayValue(arr1,function(item){
        return 3 * item;
    })

why do we need to use functional programming in this example? It's works fine with normal descriptive way.

I think that this question is primarily opinion-based and off-topic for [so]. — user202729, Mar 11 '18 at 07:39
Opinions on best practice are worth discussing, and perfectly within the scope of this place. — , Mar 11 '18 at 07:51

ayushgp · Accepted Answer · 2018-03-11T10:01:48.227

You're doing this wrong. You can shorten this using the inbuilt map function. For example,

let arr1 = [1, 2, 3]
let arr2 = arr1.map(item => item * 3)
console.log(arr2) // [3, 6, 9]

This is much more concise. This doesn't use any external iterators. This also doesn't mutate the original array(though you also don't mutate it in your example). This is more readable if you know what map is.

So this is how map works: You call map on an Array and pass it a function. This is where a function being first class comes into picture. You're passing it to another function. Map basically takes this function and the array and calls this function on each entry in the array. The value your function returns is stored in another array at the corresponding indices and this newly constructed array is returned by map.

Head over to MDN Docs to learn more about map, how it works and some more examples. There are other functions like filter, reduce, etc that once you learn are very hard to not use while writing JS. Read through all the examples for these three functions and try to apply them when you code.

I'll just put this code here so that you can see how concise and expressive it can be to use these functions once you understand their syntax and what they do.

let myArr = [1,2,3,4,5,6,7,8,9]
let sumOfDoubleOfOddNumbers = myArr.filter(num => num % 2)
                                   .map(num => num * 2)
                                   .reduce((acc, currVal) => acc + currVal, 0);

First we filter out all numbers that do not pass the test. Then we double all these filtered numbers. Finally using a reducer and a starting value we reduced this array down to a final value. In this process, we used 3 different functions that were passed as arguments(reiterating on the functions being first class citizens point).

Thanks, man! Actually, I didn't know about the map. It would be better for me if you can explain to me what is the purpose of using the first-class function in this example. @ayushgp — Mainak Chakrabortty, Mar 11 '18 at 08:52
@MainakChakrabortty I've added some more details to the answer. — ayushgp, Mar 11 '18 at 10:02
Would you write three loops in a row? Because this would be the equivalent of your `sumOfDoubleOfOddNumbers` in imperative style. — , Mar 11 '18 at 13:25
@ftor I've also been thinking about that since I've answered that question. I have posted a question for the same here: https://stackoverflow.com/questions/49221528/how-to-reduce-iterations-when-chaining-map-reduce-filter — ayushgp, Mar 11 '18 at 15:15
Thanks a lot for your effort you have nicely explained. @ayushgp — Mainak Chakrabortty, Mar 11 '18 at 17:09

what is the advantage of using functional programming in this example? I have used JavaScript

1 Answers1