DEV Community

Saba Shavidze
Saba Shavidze

Posted on • Updated on


Functional Programming - Javascript

Today I want to talk about functional programming, which has become very popular for JavaScript developers.
Simply put, functional programming is a paradigm where applications are composed using pure functions,
avoiding shared mutable state and side-effects. JavaScript has the most important features needed for functional programming:

  • First class functions: The ability to use functions as data values: pass functions as arguments, return functions, and assign functions to variables and object properties.

  • Anonymous functions and concise lambda syntax: x => x + 3 is a valid function expression in JavaScript.

  • Closures: When a function is defined inside another function, it has access to the variable bindings in the outer function, even after the outer function exits.

All three listed properties come from lambda calculus, which we will touch on in the next post, how it started and where the idea of lambda calculus came from. Functional programming is entirely based on the lambda calculus.

Functional programming is usually more declarative than imperative, meaning that we express what to do rather than how to do it.
Functional code is more concise, more predictable, we are almost sure what the result will be and accordingly it becomes easier to test than arbitrary imperative or object-oriented code.
Let's explain all the basic and significant concepts we have in functional programming. First of all, this is it pure functions, let's explain it. A pure function is a function that, first: always returns the same outputs for the same input.For example in mathematics the pure function is

Enter fullscreen mode Exit fullscreen mode

We know exactly and always that when x will be
30 degrees, the answer will be 1/2.
We have no side effects in functional programming that means no mutation of local static variables, non-local variables, mutable reference arguments or input/output streams.
Function composition: This is the process when we combine one or more functions for some computation.For example, if we have a function g(x) and another function composition of them, it will be new function h(x) = f(g(x));

Shared state: is state which is shared between more than one function or more than one data-structure. When the state is immutable (can't be changed), this is relatively harmless and is basically a memory saving mechanism. If shared state is mutable and used simultaneously by multiple threads, then the program will need to use locks or other mechanisms to operate on the state.
Immutability: Immutability is a key concept because without it we lose all the flow of states, we lose the history of state changes.
Side effects: Any operation that is not directly related to the final output of the function is called a Side Effect. For example Writing to a file is a side effect, or modify any external variable or object property ((e.g., a global variable, or a variable in the parent function scope chain).
Side effects are mostly avoided in functional programming, which makes the effects of a program easier to extend,
refactor, debug, test, and maintain.

Let's consider an example of composition, let's say we have 2 functions and we want that between the composing log the current values.
Let's take the following two function for more visibility.

code of two give functions

Let's write the union of these three functions:

union of the functions

We know from algebra that (f ◦ g)(x) = f (g(x)) , let's rewrite the same by code, we will have something like this
union of the functions

That is it, we can describe this union of functions in an even more general way, directly getting an array of functions as an argument.

Image description

As we know we want to log the results returned by each function.
Let's write a logger function that takes the label and the value we want to print, and returns it, so the chaining process is not broken, and from this value we calculate a new value.
trace function

Now let's put the functions in order, after which we want them to be executed.

Image description

Top comments (0)

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓