JavaScript Functional Programming

|Functional programming is one of the most important things for any programming language aspect. Today, I will share some basic knowledge about this topic.

Photo by Clément H on Unsplash

Functional Programming: It means all about functions. So, what is a function? Functions are just input and output.

Here some important buzz words for functional programming.

1. Pure Function
2. Function Composition
3. Shared State
4. Mutable Data
5. Side Effect

Let’s share some basic concepts about his buzz words.

Pure Function: When function never depends on another function or any coding materials & all the output depends on the same input like one to one function those concepts are called pure function. Such as

function greetings(name, greet){
     return (greet + ' ' + name);
}
let output = greetings('Bangladesh', 'Hello');
console.log(output); // "Hello, Bangladesh"

Function Composition: This is a huge programming terminology. Function Composition is the process of combining two or more functions to produce a new function. This programming concept largely uses for mathematics calculation.

const add = (a, b) => a + b;
const mult = (a, b) => a * b;
add(2, mult(3, 5))

Shared State: It could be variable, object, or memory space that exists in a shared scope or as the property of an object being passed between scopes. A shared scope can include global scope or closure scopes. Often, in object-oriented programming, objects are shared between scopes by adding properties to other objects. Keep in mind, Functional programming avoids shared state — instead of relying on immutable data structures and pure calculations to derive new data from existing data.

Mutable Data: When a state can be modified after it is created that is called Mutable Data. Examples of mutable data are objects, arrays, functions, classes, sets, and maps.

Side Effects: A side effect is any application state change that is observable outside the called function other than its return value. Side effects are mostly avoided in functional programming, which makes the effects of a program much easier to understand, and much easier to test.

First Class Function: Basically, there are six conditions for First Class Function. If our function is matched anyone then it’s called the first-class function. Let’s follow some examples for each condition.

1. A function can be stored in a Variable

Output:

Hello, Maruf Ahmed

2. A Function can be stored in an Array

Output:

[ 1, 2, 3, [Function: sayName] ]

3. A Function can be stored as an Object Field or Property

Output:

{
    name: 'Maruf Ahmed',
    sayName: [Function: sayName],
    print: [Function: print]
}

4. We can create function as needed

Output:

Result: 60

5. We can pass a function as agreements

Output:

Hello, Maruf Ahmed

6. We can return function form another function

Output:

Result: 1000

I think, After showing this example you have a clear understanding of JavaScript first-class function.

Closure: It is a very important topic for functional JavaScript programming. Most of the beginner is confused to learn this amazing thing. Don’t worry, I am here to crystal clear explanation on that topic with a simple example of code.

var name = 'Maruf Ahmed';
function sayName() {
   console.log('Hello, ' + name);
}
sayName(); // Output: Hello, Maruf Ahmed

I think, you worked this type of simple function several times and I am dam sure you even don’t know this is a closure. How amazing! Well, let me explain.

Actually, When a scope has access to the outer (enclosing) scope or global variables that is simply called closure. Follow the example, Here name is a global scope or variable and a sayName() function. This function opens curly brackets to close curly brackets is a scope. In this scope, the name variable comes to a global scope. So, simple right. But how this function is a closure?

According to our closure definition, this example is closure because here function scope access to the outer scope variable. Let’s see the screenshot, please.

Go to VS Code and run this exact code and debug. After debug your all confusion has gone.