DEV Community: muhd

JavaScript Closures: Demystified

muhd — Sat, 23 Dec 2023 00:13:53 +0000

In the smoky, dimly lit room of JavaScript, a concept lurks in the shadows, waiting to be unveiled. We call it a "closure." Now, hang on to your hats because we're about to embark on a journey into the heart of this enigmatic creature.

When functions can be treated as values and local bindings are recreated upon each function call, an intriguing question arises: When the function call is no longer active, what happens to the local bindings?

For example;

    function rememberValue(n) {
      let local = n;
      return () => local;
    }

    let wrap1 = rememberValue(1);
    let wrap2 = rememberValue(2);

    console.log(wrap1());
    // → 1
    console.log(wrap2());
    // → 2

The code snippet above is permitted and works as expected - both instances of the binding remain accessible. This scenario effectively illustrates that local bindings are created afresh for each function call, and different calls do not interfere with each other's local bindings.

What are local bindings?

Let's start by defining bindings. In JavaScript, the term 'binding' is the formal language used to describe what many individuals commonly call a variable.

    let totalHoursSpentOnArticle = 42;
    const name = "Ford Arthur";

Bindings defined outside of any function or block have a scope that encompasses the entire program. As a result, you can reference such bindings from any part of your code. These bindings are commonly referred to as "global" bindings.

Bindings declared using let and const are, in fact, local to the block where they are declared.

Therefore, if you create one of these bindings within a loop, the code segments located before and after the loop lack access to it. In the JavaScript version before 2015, scopes were only introduced by functions. Consequently, old-style bindings, created with the var keyword, remained accessible throughout the function in which they were defined or at the global scope if not within a function.

Bindings generated for function parameters or declared within a function have a scope limited to that specific function, earning them the name of local bindings. Upon each function call, fresh instances of these bindings are generated. This separation between functions offers a degree of isolation, where each function call operates within its unique context (local environment), often requiring minimal awareness of the broader global environment.

    let x = 10;

    if (true) {
      let y = 20;
      var z = 30;
      console.log(x + y + z);
      // → 60
    }

    console.log(x + y)
    // → Uncaught ReferenceError: y is not defined
    // y is not visible here

    console.log(x + z);
    // → 40

In the code snippet above, y and z are the local bindings, while x is a global binding.

Every scope can "look into" surrounding the scope, making x visible inside the block within the provided example. However, an exception arises when multiple bindings share the same name - under such circumstances, the code can exclusively access the innermost binding with that name. For instance, when the code within the square function references n, it specifically refers to its n, not the n in the global scope.

    const square = function(n) {
      return n ** 2;
    };

    let n = 42;
    console.log(square(2));
    // → 4
    console.log(n);
    // → 42

This behavior, wherein a variable's scope is dictated by its position within the source code hierarchy, serves as an instance of lexical scoping. Lexical scoping enables inner functions, like square in this case, to access variables from their enclosing scopes based on their respective positions within the code's structure.

Now, let's direct our gaze to the central element: Closures

What is a closure?

A closure combines a function enveloped with references to its surrounding context (the lexical environment). A lexical environment in programming refers to the environment in which code is written and executed.
You might want to find out more about lexical environments here.

To put it differently, closure provides the means to reach the scope of an outer function from within an inner function.

To use a closure, create a function within another function and make it accessible. You can render a function accessible by returning it or passing it to another function.
Even after the outer function has been completed and returned, the inner function will retain access to the variables in the outer function's scope.
Note the first part of the definition; "A closure is the combination of a function enveloped with references to its surrounding context." That's essentially a description of lexical scope!
But we require including the second part of this definition to give an example of a closure. "Even after the outer function has been completed and returned, the inner function will retain access to the variables in the outer function's scope."

Let us examine fascinating instances of closures:

    function theAnswer() {
      var say = () => console.log(answer); 
      // Local variable that ends up within the closure 
      var answer = "'Forty-two,' said Deep Thought";
      return say;
    }
    var tellUs = theAnswer(); 
    tellUs(); // ''Forty-two,' said Deep Thought'

Here, we have two functions:

An outer function theAnswer has a variable answer and returns the inner function say.
An inner function that returns the variable answer when tellUs is invoke.

Duplicate the provided code example above and give it a go. What do you think?

In the code example above:

theAnswer is called and creates an environment in which it defines a local variable answer and returns an inner function say.
Next, we call the theAnswer function and save the resulting inner function in the variable tellUs. Logging the variable tellUs returns something like what we have below:


    ƒ theAnswer() {
      var say = () => console.log(answer); 
      // Local variable that ends up within the closure 
      var answer = "'Forty-two,' said Deep Thought";
      return say;
    }

So that when we later call tellUs, it proceeds to run the inner function say, which subsequently logs the value of answer to the console, as shown below:

'Forty-two,' said Deep Thought

Getting your head around programs like these requires a bit of mental gymnastics. Picture function values as these packages carry both their inner workings and the surroundings they grew up in. When you evoke them, they bring that homey environment they were born in - no matter where you make the call from.

Use cases of closures

Data Privacy
Closures can be used to create private variables and functions. This ensures that certain data is inaccessible outside the scope, providing privacy and encapsulation.
Here's an illustration:

      function createCounter() {
      let count = 0; // Private variable enclosed by the closure

      return function() {
        count++;
        return count;
      };
    }

    const incrementCounter = createCounter();
    console.log(incrementCounter()); // Output: 1
    console.log(incrementCounter()); // Output: 2

Allow me to offer a concise breakdown of its operation:

createCounter is a function that initializes by establishing a private variable named count with an initial value of 0 within its scope.
It returns an enclosed function, a closure, which, when called, increases the count by 1 and returns the current value.
incrementCounter is assigned the result of invoking createCounter, which means it holds the inner function (closure) that was returned.
When incrementCounter() is called, it triggers the execution of the inner function, increasing the count and the return of the updated value.
With every further use of incrementCounter(), count increments.

Callback functions
Closures are often used in dealing with asynchronous tasks and event-driven programming. They help create callback functions that remember and work with their surrounding environment, which is crucial when explaining event-based systems in documentation.
Here's a code example demonstrating closures in callback functions:

    function fetchData(url, callback) {
      setTimeout(function() {
        const data = `Data from ${url}`;
        callback(data); // Closure captures 'data'
      }, 1000); // Simulate a 1-second delay
    }

    function processData(data) {
      console.log(`Processing: ${data}`);
    }

    fetchData('https://example.com/api/data', processData);

In our scenario, the fetchData function simulates an asynchronous data retrieval process. It accepts both a URL and a callback function as its parameters.
Inside the setTimeout, it generates some data and invokes the callback function, which captures the data variable from its surrounding scope due to closure.
The processData function serves as our callback, responsible for handling and logging the data we receive.
We call fetchData with a URL and the processData callback, demonstrating how closures empower the callback to reach and employ the data variable from its surrounding scope.

Closures are a fundamental component of functional programming and may be found everywhere in JavaScript and other languages (not only functional ones).
More use cases are;

Memoization
Partial Applications
Currying

You can check out more here on wikipedia

Clos(ure)ing remarks or thoughts?

So, there you have it - the tale of JavaScript closures. They may seem cryptic initially, but once you've grasped their essence, you'll find they're a powerful tool in your programming arsenal. Use them wisely, and you'll unlock new realms of possibility in your technical journey. Happy coding, my friends.

Okay real quick

What would this return?


    for(var i = 0; i < 3; i++) {
      const log = () => {
        console.log(i);
      }

      setTimeout(log, 10);
    }

Resources

MDN has a fantastic page on closures, as you might imagine, and
The Wikipedia article on closure delves deeper into closure applications and how they work in various programming languages.
You know what's fantastic? There's a treasure trove of valuable information waiting for you online! If you type "closures" into your Google search bar, you'll uncover an abundance of thrilling and fantastic insights on the topic. It's truly amazing and fascinating to dive into!

# GitHub Education Pack: The North Star in Your Coding Sky

muhd — Fri, 06 Oct 2023 23:37:38 +0000

Are you a student, aspiring to be a developer? Are you frustrated by expensive tools? If so, this article is meant for you!

Lots of tech-loving students face a tough challenge: they can't get the important tools and resources they need. Here's where GitHub Education steps in. It's a platform that gives students real-world experience by providing free access to a range of developer tools. So, what's in it for you, for free through GitHub Education?

What is the GitHub Education Pack?

Imagine the GitHub Education Pack as a handy kit of free software development tools and resources from GitHub, designed to make it easier for students to learn and work together on coding projects.

Students get a variety of resources including code editors, hosting services, cloud credits, and learning platforms. It's all there to help them enhance their skills and work on coding projects effectively-- and all of that at no cost. Yes, you heard it correctly, my friend!

Let's take a look at some exciting benefits of the GitHub Student Developer Pack and how you can get your hands on them.

Benefits of the GitHub Education Pack

This pack offers a wide range of deals spanning various tech areas. No matter your specialization, there's probably an offer that will give your career a boost and grant you free access to top-notch developer tools used in that field.
n short, it's safe to say they've made a significant effort with this pack

Here are a few examples of what you'll be able to get your hands on:

Microsoft Azure

Microsoft provides a collection of cloud services tailored to assist students in building, overseeing, and deploying applications. These services come with free credits, empowering students to utilize the cloud's potential for their development projects.

Bootstrap Studio

A desktop app for creating responsive websites using the Bootstrap framework

Educative

Thanks to the GitHub Student Developer pack, students like you can enjoy six months of free access to over 60 courses that cover high-demand subjects. This valuable resource can assist you in mastering coding, enhancing your skills, and even excelling in technical interviews.

Namecheap

As a component of the GitHub Student Developer Pack, Namecheap provides a complimentary one-year registration for a .me domain, complete with an SSL certificate.

1Password

Highlighting the crucial importance of security is essential. Through the Student Developer Pack, you can acquire 1Password, a tool that aids in protecting your accounts. It helps you stay vigilant about password breaches and spot other security issues.

As a student, this empowers you to maintain the safety of your online accounts, and you'll receive 1Password free of charge for a year.

The beloved GitHub campus Experts Program

The GitHub Campus Expert program aims to empower university students, turning them into student leaders who champion technology and open-source collaboration. These Campus Experts are equipped to arrange events, guide fellow students, and cultivate a thriving tech community at their own universities.

However, it's crucial to remember that having the GitHub Student Developer Pack is a requirement to apply for this program.

There are plenty more apps and services in the pack, and I'll use them as the need arises. One that caught my eye is Polypane, a browser that assists in web development. They also offer several automated mail services for free, although there may be some usage limits. GitKraken Client and GitLens+ are incredibly handy tools for Git work, and now I have access to them, along with Tower, another popular Git client. There are multiple icon services available, and I can enjoy credits for Microsoft Azure, DigitalOcean, and Heroku. With the pack, I can install apps that assess and enhance code performance and design, as well as testing tools, no-code services, and CI platforms. There are discounts on hardware from Adafruit, free domains, and a variety of analysis and marketing tools as well.

Being a student is all about learning, and the pack has plenty of academic perks. As a Global Campus student, you get six months of Frontend Masters and Educative, and some weeks of InterviewCakeenter link description here, all for free. You can also access MongoDB University credit and three months of JetBrains Academy related to the offered products.

Bruh..

Overall, this pack offers students a valuable collection of crucial developer tools and resources that are often costly or come with subscription fees, all for free. Utilizing and mastering these tools can be a significant step forward in advancing your career.

There's an abundance of these fantastic products available for free; you simply have to explore them for yourself, my friend.

Prerequisites

To be eligible for all these fantastic offers, you just need to meet these requirements:

You need to be at least 13 years old.
You should have a GitHub user account.
You need either a verifiable school email address or valid documents proving you're currently a student.
When you apply, you must be currently enrolled in a program that leads to a degree or diploma.

To get a better understanding of how to apply and which documents are accepted, please take a look at the detailed Education documentation.

How to apply

Log in to your GitHub account or sign up for one if you haven't already.
If you've already signed up, simply include your school-issued email address in your account's Email settings section.
Visit the Education Pack Section and log in using your GitHub account.
Click on Sign Up and fill in all the details as required about your usage of GitHub and your school/college details.
Click on Submit My Application and wait for approval from the GitHub team.

To sum it up, the GitHub Education Pack is your ace in the hole. With an abundance of free tools and resources at your disposal, It is literally a goldmine of free tools. Seize the opportunity, enhance your skills, and open doors to a world of coding possibilities. Don't overlook this essential resource.

# "JavaScript Closures: Demystified."

muhd — Fri, 22 Sep 2023 08:38:47 +0000

In the smoky, dimly lit room of JavaScript, there's a concept lurking in the shadows, waiting to be unveiled. We call it a "closure." Now, hang on to your hats, because we're about to embark on a journey into the heart of this enigmatic creature.

When functions can be treated as values and local bindings are recreated upon each function call, an intriguing question arises: What occurs with these local bindings when the function call that created them is no longer active?

For example;

function rememberValue(n) {
let local = n;
return () => local;
}

let wrap1 = rememberValue(1);
let wrap2 = rememberValue(2);
console.log(wrap1());
// → 1
console.log(wrap2());
// → 2

This is permitted and works as you'd hope - both instances of the binding remain accessible. This scenario effectively illustrates that local bindings are created afresh for each function call, and different calls do not interfere with each other's local bindings.

What are local bindings?

First, what are bindings??

In JavaScript, the term 'binding' is the formal language used to describe what many individuals commonly call a variable

let totalHoursSpentOnArticle = 42;
const name = "Ford Arthur";

Bindings that are defined outside of any function or block have a scope that encompasses the entire program. As a result, you can reference such bindings from any part of your code. These bindings are commonly referred to as "global" bindings.

Bindings declared using let and const are, in fact, local to the block where they are declared. Therefore, if you create one of these bindings within a loop, the code segments located before and after the loop lack visibility of it. In the JavaScript version prior to 2015, scopes were only introduced by functions. Consequently, old-style bindings, created with the var keyword, remained accessible throughout the entirety of the function in which they were defined, or at the global scope if they were not within a function

Bindings generated for function parameters or declared within a function have a scope limited to that specific function, earning them the name of local bindings. Upon each function call, fresh instances of these bindings are generated. This separation between functions offers a degree of isolation, where each function call operates within its own unique context (local environment), often requiring minimal awareness of the broader global environment.

let x = 10;
if (true) {
  let y = 20;
  var z = 30;
  console.log(x + y + z);
  // → 60
}

console.log(x + y)
// → Uncaught ReferenceError: y is not defined
// y is not visible here
console.log(x + z);
// → 40

The variables y and z are the local bindings in this code sample. x is a global binding.

Every scope possesses the capability to "look into" the scope that surrounds it, making x visible inside the block within the provided example. However, an exception arises when multiple bindings share the same name - under such circumstances, the code can exclusively access the innermost binding with that name. For instance, when the code within the square function references n, it specifically refers to its own n and not the n in the global scope.

const square = function(n) {
  return n ** 2;
};

let n = 42;
console.log(square(2));
// → 4
console.log(n);
// → 42

This behavior, wherein a variable's scope is dictated by its position within the source code hierarchy, serves as an instance of lexical scoping. Lexical scoping enables inner functions, like square in this case, to access variables from their enclosing scopes based on their respective positions within the code's structure.

Lexical scoping

Closures and lexical scope are frequently intertwined and misunderstood by many in the JavaScript community.

Lexical scope refers to how nested functions can access variables defined in their enclosing scopes. This behavior is illustrated in the code block above…

Now, let's direct our gaze to the central element: Closures.

What is a closure?
A closure is the combination of a function enveloped with references to its surrounding context (the lexical environment). To put it differently, closure provides the means to reach the scope of an outer function from within an inner function.

To make use of a closure, create a function within another function and make it accessible. You can render a function accessible by either returning it or passing it to another function.

Even after the outer function has been completed and returned, the inner function will retain access to the variables in the outer function's scope.

Note the first part of the definition; "A closure is the combination of a function enveloped with references to its surrounding context". That's essentially a description of lexical scope!

But we require the inclusion of the second part of this definition to give an example of a closure… "Even after the outer function has been completed and returned, the inner function will retain access to the variables in the outer function's scope."

Let us examine fascinating instances of closures;

function theAnswer() {
  var say = () => console.log(answer); 
  // Local variable that ends up within the closure 
  var answer = "'Forty-two,' said Deep Thought";
  return say;
}
var tellUs = theAnswer(); 
tellUs(); // ''Forty-two,' said Deep Thought'

Here, we have two functions;

An outer function theAnswer has a variable answer and returns the inner function say.
An inner function that returns the variable answer when tellUs is invoked…

Duplicate the provided code example and give it a go

Let's attempt to understand and comprehend what's unfolding…

In the code example;

theAnswer is called and creates an environment in which it defines a local variable answer and returns an inner function say.
Next, we call the theAnswer function and save the resulting inner function in the variable tellUs. Logging the variable tellUs returns something like this;

ƒ theAnswer() {
  var say = () => console.log(answer); 
  // Local variable that ends up within the closure 
  var answer = "'Forty-two,' said Deep Thought";
  return say;
}

So that when we later call tellUs, it proceeds to run the inner function say, which subsequently logs the value of answer to the console.

'Forty-two,' said Deep Thought

Use cases of closures

Data Privacy

Closures can be used to create private variables and functions. This ensures that certain data is not accessible from outside the scope, providing a level of data privacy and encapsulation.
Here's an illustration:

function createCounter() {
  let count = 0; // Private variable enclosed by the closure

  return function() {
    count++;
    return count;
  };
}

const incrementCounter = createCounter();
console.log(incrementCounter()); // Output: 1
console.log(incrementCounter()); // Output: 2

Allow me to offer a succinct breakdown of its operation:

createCounter is a function that initializes by establishing a private variable named count with an initial value of 0 within its own scope.
It returns an enclosed function, a closure, which, when called, increases the count by 1 and returns the current value.
incrementCounter is assigned the result of invoking createCounter, which means it holds the inner function (closure) that was returned.
When incrementCounter() is called, it triggers the execution of the inner function, resulting in the increase of the count and the return of the updated value.
With every further use of incrementCounter(), count increments.

Callback functions

Closures are often used in dealing with asynchronous tasks and event-driven programming. They help create callback functions that remember and work with their surrounding environment, which is crucial when explaining event-based systems in documentation.

Here's a code example demonstrating closures in callback functions:

function fetchData(url, callback) {
  setTimeout(function() {
    const data = `Data from ${url}`;
    callback(data); // Closure captures 'data'
  }, 1000); // Simulate a 1-second delay
}

function processData(data) {
  console.log(`Processing: ${data}`);
}

fetchData('https://example.com/api/data', processData);

In our scenario, the fetchData function simulates an asynchronous data retrieval process. It accepts both a URL and a callback function as its parameters.
Inside the setTimeout, it generates some data and invokes the callback function, which captures the data variable from its surrounding scope due to closure.
The processData function serves as our callback, responsible for handling and logging the data that we receive.
We call fetchData with a URL and the processData callback, demonstrating how closures empower the callback to reach and employ the data variable from its surrounding scope.

Closures are a fundamental component of functional programming and may be found everywhere in JavaScript as well as in other languages (not only functional ones).

More use cases are;

Memoization
Partial Applications and currying etc…

You can definitely check out more here on wikipedia

Clos(ure)ing remarks, or thoughts? lmao 😂

So, there you have it - the tale of JavaScript closures. They may seem cryptic at first, but once you've grasped their essence, you'll find they're a powerful tool in your programming arsenal. Use them wisely, and you'll unlock new realms of possibility in your technical journey. Happy coding, my friends.

Okay real quick

What would this return??

for(var i = 0; i < 3; i++) {
  const log = () => {
    console.log(i);
  }

  setTimeout(log, 10);
}

More resources

MDN has a fantastic page on closures, as you might imagine, and the Wikipedia article on the topic goes into great length regarding further applications as well as how they function in other languages.

DEV Community: muhd

JavaScript Closures: Demystified

What are local bindings?

Now, let's direct our gaze to the central element: Closures

Use cases of closures

Clos(ure)ing remarks or thoughts?

Okay real quick

Resources

# GitHub Education Pack: The North Star in Your Coding Sky

What is the GitHub Education Pack?

Benefits of the GitHub Education Pack

Microsoft Azure

Bootstrap Studio

Educative

Namecheap

1Password

The beloved GitHub campus Experts Program

Prerequisites

How to apply

# "JavaScript Closures: Demystified."

What are local bindings?

First, what are bindings??

Lexical scoping

Now, let's direct our gaze to the central element: Closures.

Use cases of closures

Data Privacy

Callback functions

Memoization

Partial Applications and currying etc…

Clos(ure)ing remarks, or thoughts? lmao 😂

Okay real quick

More resources