EZ JavaScript ! Part 1 ( Closures )

Hello everyone!

Today, I'm thrilled to start a delightful journey as I share my learnings on JavaScript in simple words. As a young coder, I've had the incredible opportunity to dive into the fascinating world of javascript and unravel the concepts of this powerful language. I'll try to explain everything in as simple words as I can ( hence Eazy javaScript).

This is going to be my first blog which is long overdue. Let's hope that it's not the last and you guys enjoy it. Please feel free to provide feedback and pointers if you feel that something can be improved. Let's start!

What are Closures ?

To understand closures, let's start with what we already know: functions. Functions are like little blocks of code that can do amazing things. Now, imagine a function that not only does its own job but also remembers something from the place where it was created. That's a closure!

Example 1:

function greet(name) {
  let message = "Hello, " + name + "!";

  function sayHello() {
    console.log(message);
  }

  return sayHello;
}

let greeting = greet("Alice");
greeting(); // Outputs: Hello, Alice!

In the above code example, we have a function called greet that takes a name parameter. Inside greet, we have another function called sayHello that logs a message to the console. The special thing is that sayHello can still access the message variable even after greet has finished executing. This is possible because sayHello forms a closure over the message variable.

In the last two lines, we call greet("Alice") and assign the returned function to the variable greeting. When we invoke greeting(), it still remembers the message value from when it was created and logs "Hello, Alice!" to the console.

The closure preserves the variables and environment of the outer function, even after the outer function has finished running.

Example 2: Counting with Closures

function counter() {
  let count = 0;

  function increment() {
    count++;
    console.log("Current count:", count);
  }

  function decrement() {
    count--;
    console.log("Current count:", count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
}

let myCounter = counter();
myCounter.increment(); // Outputs: Current count: 1
myCounter.increment(); // Outputs: Current count: 2
myCounter.decrement(); // Outputs: Current count: 1

In this example, we have a counter function that creates two inner functions: increment and decrement. The count variable is part of the closure created by these functions. Every time we call myCounter.increment(), the count increases, and calling myCounter.decrement() decreases it. The closure remembers the count variable's value between function invocations.

Congratulations! We've learned about closures in JavaScript, and that's an incredible accomplishment. Closures allow functions to remember values even after they have finished running. They are like little pockets of memory that hold special information.

Have a look at these closure questions to improve the concept!

References:

Below are a few resources which I used to learn javascript closures and tried to explain in as simple words as possible.

Dev Journey !