Learn JavaScript functional programming from Avengers

Functional programming concepts based on my understanding on Avengers and JavaScript

I am a big fan of Avengers. In this post I am trying to explain the JavaScript functional programming concepts based on my understanding on Avengers and JavaScript.

Pure Functions

I have lot of sympathy towards Gamora as she is deprived of her parent’s love,emotionally manipulated and finally killed by her adopted father. She had a lifetime of torment and victimhood.

We will try to represent her character at different time intervals in a function.

One of the major setback of this function is that its not pure. With change in time, for the same input it will give different output. To make it pure, we should rewrite it like below by taking time out of the function and receive it as a parameter.

A pure function gives same output for a given input always and it will not change the anything outside its scope. Now the above gamora function is time independent.

Immutability

Time travel concept is a blessing in disguise for the Avengers. It helped them to win against Thanos. Thanos did a great mistake by not freezing the world after he destroyed half of the world population. It gave a chance for Avengers to come back and do a time travel where they were finally successful in not only restoring the world to its old state but also won the battle.

Avengers came and changed the world object .

Now the world object is changed and everyone is happy.

If Thanos had frozen the world after destruction, using Object.freeze, then avengers never had a chance.

Shared state

Some of the Avengers successfully overpowered Thanos in a scene. Both Spider-man and Iron-man were almost successful in taking Infinity Gauntlet from Thanos’s hand. But Star-Lord foils the attempt as he physically attacks Thanos after coming to know about Gamora’s death which makes Mantis loose her control over Thanos. In their quest to win over Thanos, Avengers failed as their result was affected by the action of one of their peers.

Likewise, in Javascript when we are having a state which is shared between different functions gets updated, there is always a chance that we wont get the desired result. Let us understand it with an example.

Thanos has given us the responsibility to keep track of his stone collection. At first his basket is empty and whenever he collects a stone the basket has to be updated and he is not sure in which order he will collect them. He also wants to know the current status of his basket anytime he wants.

In the above function, we are taking an object ‘basket’ as input. we are using () after arrow function to directly return the resultant object. Then we are creating an object, where we are using spread operator to copy the object and modifying only one member.

Here we are not modifying the original basket instead we are creating a new object which will hold the current status. Even though multiple functions are updating the basket, we don’t have to worry as we are not sharing the state but creating new objects which will hold the current state.

Referential Transparency

If Thanos can get hold of the 6 infinity stones, he will assume absolute power and it is certain that he can make a huge destruction. He used this power to reduce the world population by half. We can write a function depicting this.

So we can replace the function haveSixStones directly with ‘absolutePower’. It is called Referential Transparency.

Also if we take the above thanosBasket example, we can run the functions in any order and it will always return the same result. Its one of the important concept of Referential transparency. It also eliminates side-effects by creating new object every time instead of mutating the original object.

These functions are also pure as they will give same output for a given input always and they are not modifying any object outside of its scope.

When a function is pure and if it is immutable, then Representational Transparency comes into picture. To Sum up, all the above paradigms are closely interrelated which form the basics of functional programming in Javascript.

 

 

Source:  https://medium.com/javascript-in-plain-english/learn-javascript-functional-programming-from-avengers-36fc40fca7ab

Written by

 

Radhakrishnan Kanagaraj

 

JavaScript in Plain English

JavaScript in Plain English