Closure in JavaScript Explanation done RIGHT

OzIheb — Sat, 23 Jul 2022 21:32:00 +0000

Introduction

Closure is arguably the most essential part of javascript to understand, once you do get it everything else will naturally fall into place.
Closure is often used in :

Data-privacy with objects pro-level functions like once that allows you to run a function one time only.
event handlers in asynchronous javascript which I will get into in a different article.
Use closure to hide away functionality that you generally do not want people to mess with.

How does it work?

Simply put, when you return a function ( from another function call ) in JavaScript you will also return with it a "Backpack" of saved data ( Part of the local memory of the parent function execution context that the returned function uses ).

Hold on just a minute, returning a function? Execution context? A function with a backpack??
Do not worry we will answer all these questions and more below.

Execution context

When a function is called the JavaScript interpreter starts what you can call a "sub-program" that has it own state ( memory ) where it stores it locally defined variables and passed arguments and it own thread of execution ( the method javascript uses to interpret code, going through it line by line ) where you find the function specific instructions ( code ).
For example, take a look at the following code block

const myLibrary = [];
function isLibraryEmpty(library) {
  const length = library.length;
  length <  0 ? console.log("library is empty") : console.log("library is not empty") ;
};
isLibraryEmpty(myLibrary);

On line 6 the function is called which triggers the creation of a brand new execution context for it as the code is being run which will have it own local state ( as in local memory )
that will store the following :

library : myLibrary
length : 0 ( since the array is empty )

then it will execute the condition check which will lead to the console log of "library is not empty" followed by the deletion of the execution context including all of it local state.

Returning a function from another function

For more clarity, review this modified version of our earlier example :

const myLibrary = [];
function isLibraryEmpty(library) {
  const length = library.length;
  return function checker(length) {length <  0 ? console.log("library is empty") : console.log("library is not empty") ; }
};
const newfunc = isLibraryEmpty(myLibrary);
newfunc()//"library is empty"

With const newfunc = isLibraryEmpty(myLibrary) the isLibraryEmpty execution context will run eventually returning to newfunc a function that checks if the myLibrary array specifically is empty or not then all the local memory stored in the execution context will be deleted

If you run the following code but at add at line 6 myLibrary.push("test") you will notice that it console logs that the library is not empty anymore.
But hold on! How could it do that when we have established clearly that the isLibraryEmpty execution context was deleted which means all of the local memory was also gone? How could the length have incremented to 1 knowing that?

What it means to have closure?

Continuing from the previous section, the truth is, when we returned the function we returned with it what you can call a backpack that contains some important data that the returned function requires to run, in another words that data is persistant, it is not the data that was deleted in the isLibraryEmpty execution context, it is a copy or a reference of that data.
Only newfunc function has access to that backpack, the data in it is lexically scoped.

In technical words, the function when it returned it brought with it a P.L.S.R.D (Persistant Lexically Scoped Referenced Data) also known as closure as you can see in the figure below

Review

To sum it up, closure, is a javascript feature that allows us to return lexically scoped data from the invoked function local memory with the returned function X so X can run without any errors or issues.

3 Javascript utility functions to show you why they matter

OzIheb — Sun, 17 Jul 2022 13:29:01 +0000

Many developers, especially juniors and beginners push understanding js utility functions like map(), reduce() to the side not realising that once you get it you will start seeing ways to use them to improve your code everywhere.

What are JS utility functions?

A utility function is :

A standalone function ( it is not a member of any class and is in the global namespace )
Has no side effects ( It does not change any of it parameters or any global variable )
It output is directly dependent on it input.

Why and When Utility Functions?

As mentioned earlier, utility functions are highly reuseable to perform common tasks.

They simplify things by making it easier to refactor code and minimize it.

Utility functions are generic snippets that will make your code more efficient.

Utilizing utility function is a great way to remain consistent across your projects and when you want to modify the underlying functionality, you only need to modify it from one place.

Do something an X number of times

A prevalent task to do in javascript is to repeat something many times.
Using the times(_numberOfTimes_ , _function_) will do exactly that in a clean, practical way.

You can implement this functionality by using _. helper library.

Remove duplicates from an array

There are many utility functions for modifying arrays as you would expect which you can find on here
One useful one is removeDuplicates(array) it returns a new array with all the duplicates stripped away.

Find the difference of two arrays

Finds the repeating values in both arrays and return them in a string just by typing a simple one liner intersection(arr1,arr2, ...args)

Utility functions are a sea of information and it is very easy to get lost in it, so becareful and be wary of the bloat that you may unintentionally add with implementing all these libraries like lodash.

Personally, I recommend that you build your own lightweight utility functions library, adding only the ones you find extremely useful.

DEV Community: OzIheb