Functional Programming - Javascript

Saba Shavidze — Sat, 24 Dec 2022 17:22:18 +0000

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

sinx

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.

Let's write the union of these three 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

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.

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.

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

ES6: Promises

Saba Shavidze — Thu, 22 Dec 2022 15:53:12 +0000

ES6 Promises is probably the topic that is the worst explained everywhere and always 🫣 .
Promise is an object✨, if you open web inspector, click the console and print :

You will see that it has actually 3 properties but we are interested in two:

[[PromiseState]] - a state that has 3 states itself,
and [[PromiseResult]].

Let's explain what [[PromiseState]] values are and what each one means.

First one is fulfilled: it means that everything was completed successfully,
Second one is rejected: an error occurred and it was rejected,
and last one is pending: we are still waiting for a response, neither resolved nor rejected.

As for [[PromiseResult]], it has two states:

undefined - when nothing has been returned yet.
and the value that we pass to the either the resolved or rejected method as their argument.

Now let's explain how these conditions change. In the promise printed above, we put an arrow function that does nothing, however, the promise callback function is generally given two arguments, resolve and reject, which will be called depending on how successfully the callback function completed. Let's make it clearer so that we can write something like that

We will see that

PromiseState - is already fullfiled (even though it prints resolved in the console, it is a bug of the browser)
and PromiseResult: completed, similarly, if we returned rejected("reject"), the state would be: "rejected" and value: "reject" .

If we take a look into the Promise prototype, we will see 3 built-in methods:

then() - which is called if the Promise is resolved,
catch() - which is called if it is rejected,
and finally() - which is always called, regardless of the return state. then() and catch() returns a Promise itself, which gave us possibility to pass another callback function , so it allows us to build a whole chain of promises.

Let's talk about where the promise goes in the event loop. As we know, the asynchronous calls that the browser sends first go to web api -> then the results goes in the queue -> and when the call stack finishes, they will return in sequence from the queue.
Queue- itself is divided into 2 types of queues,

the first is the queue of macrotasks: setTimeOut, setInterval, setImmediate etc.
the second is the queue of microtasks: process.nextTick, Promise callback, async functions, queueMicrotask...

When the stack is finished, first it returns microtasks and then the macrotasks are released from the queue. That is, the promise will always return from the queue earlier than setTimeOut 🤌.

DEV Community: Saba Shavidze

Functional Programming - Javascript

ES6: Promises