The Techies' pub

Functional programming concepts in Javascript

Hope you are all well. I have been busy working on a whole new series for you guys on Reactive programming with RxJs. Before we dive into reactive programming I felt that familiarity with a couple of functional programming concepts would help you grab rxjs easily.

So in this post we are going to talk about Higher order functions and Closures.

Higher order functions

Okay, let’s simplify things rather than throw in programming jargons.

1) Functions can be expressed as values and these values can be passed around like regular values in javascript.

2) When a function takes another function as a parameter or returns a function it is termed to be a higher order function.

I explain this a bit better in my video here.

For example look at the below code.

1

2

3

4

5

6

7

8

9

functionprintsomething(cb){

cb('Hello World);

}

varsenddata=function(message){

console.log(message);

}

printsomething(senddata);

Now if you run the above function you would get the result as Hello World. If you watch the code you will see that I am passing the function that is expressed as senddata to another function as an argument. Then that function makes a call sending Hello World as an argument which the subsequent function prints on the console. This is an example of a higher order function.

If you had dabbled around in javascript before, you would also realise that this is a callback function.

Now let’s see an example that we use commonly. Look at the below code.

1

2

3

4

5

6

7

vara=[1,2,3];

varb=a.map((arrval)=>{

return'This is the '+arrval+' one';

});

console.log(b);

If you run this code you will get the below output.

[‘This is the 1 one’, ‘This is the 2 one’, ‘This is the 3 one’]

Now map is a common function that we use while playing with arrays. as you can see above this map function takes another function as an argument. Hence this is a higher order function.

Closures:

Closure is another interesting concept when it comes to functional programming.

I have explained closure in a screencast video below.

Now look at the below code:

1

2

3

4

5

6

7

8

9

10

11

12

functionfnone(){

varsometext='Raja';

varfntwo=function(){

console.log('From fntwo '+sometext);

}

fntwo();

}

fnone();

You can see that fntwo is written or composed inside another function fnone. sometext is a variable that is declared in fnone. But fntwo is able to access it as well.

If you run this code you will get the below output:

From fntwo Raja

So, the fntwo is able to access and make use of a variable that is outside of its local scope. In simple terms this is closure.

Let’s look at another example.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

varsomeglobaltext='Vince';

functionfnone(){

varfntwo=function(){

console.log('From fntwo '+someglobaltext);

}

fntwo();

console.log('From fnone '+someglobaltext);

}

fnone();

Here someglobaltext is a variable that is declared globally. If you notice both the functions fnone and fntwo are able to access and make use of the value stored in someglobaltext.

If you run the above code this is the output you would get.

From fntwo Vince
From fnone Vince

So, a function can access the value that is declared in the function inside which it itself is composed or a function can make use of variables declared in the global scope as well.

Let’s make a few changes and observe what happens.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

varsomeglobaltext='Vince';

functionfnone(){

varfntwo=function(){

someglobaltext='Dominic';

console.log('From fntwo '+someglobaltext);

}

fntwo();

console.log('From fnone '+someglobaltext);

}

fnone();

Notice that I have changed the value of someglobaltext in fntwo(). Now if I run this code I will get the below output.

From fntwo Dominic
From fnone Dominic

As you can see the value of the global variable gets changed overall. Even though I have just changed it in a local function it gets changed globally and returns Dominic while using it in fnone as well.

This phenomenon is called a leak and it is a drawback of closures. A large-scale application should be having very little leaks or no leaks.

These are two concepts in javascript that are crucial while writing functional code. Now that you have read/watched this you would get a better grasp of concepts in RxJS. I will try to make posts as simple as possible while dealing with Reactive programming.