JavaScript Closures. Here’s What You Have To Know

Posted by TotalDC

In this article we will learn about JavaScript Closures. JavaScript variable’s scope can be global or local. A global variable can be accessed and manipulated anywhere in the program, while the local variable can only be accessed and manipulated by the function they are declared in.

But there are situations when you want a variable to be available through the script, but perhaps you don’t want or need any part of your code to be able to change its value accidentally.

Here’s an example of what happens if you try to do this with with global variable:

// Global variable
let counter  = 0;

// A function dedicated to manipulate the 'counter' variable
function makeCounter() {
    return counter += 1;

// Calling the function
console.log(counter); // Result: 1

console.log(counter); // Result: 2

// Trying to manipulate the 'counter' variable from outside
counter = 10;
console.log(counter); // Result: 10

As you can see in the above example, the value of the counter variable can be changed from anywhere in the program, without calling the makeCounter().

Now, here’s the same thing with the local variable:

function makeCounter() {
    // Local variable
    let counter  = 0;
    // Manipulating the 'counter' variable
    return counter += 1;

// Calling the function
console.log(makeCounter()); // Result: 1
console.log(makeCounter()); // Result: 1

As you can see, the counter variable can’t be manipulated from outside, since it is local to makeCounter() function. But its value will not increase after function call, because every time you call the function it reset the counter value.

A closure is basically an inner function that has access to the parent function’s scope, even after the parent function has finished executing. This is accomplished by creating a function inside another function. Let’s take a look at the following example to see how it works:

function makeCounter() {
    let counter = 0;
    // Nested function
    function make() {
        counter += 1;
        return counter;
    return make;

/* Execute the makeCounter() function and store the
returned value in the myCounter variable */
let myCounter = makeCounter();

console.log(myCounter()); // Result: 1
console.log(myCounter()); // Result: 2

Here the inner function make() is returned from the outer function makeCounter(). So the value of the myCounter is the inner make() function, and calling myCounter effectively calls make(). In JavaScript functions can assigned to variables, passed as arguments to other functions, can be nested inside other functions, and more.

Inner function make() is able to access the value of counter variable defined in the outer function, even when makeCounter() function has already finished executing. It happens because functions in JavaScript form closures. Closures internally store references to their outer variables, and can access and update their values. In the example above, the make() function is a closure whose code refers to the outer variable counter. This implies that whenever the make() function is invoked, the code inside it is able to access and update the counter variable because it is stored in the closure. Since the outer function has finished executing, no other part of the code can access or manipulate the counter variable. Only the inner function has exclusive access to it.

How To Create The Getter And Setter Functions In JavaScript

In this example we will create a function and protect it from being directly manipulated from outside using closure. And then we will create getter and setter functions to get and set its value :

let getValue, setValue;

// Self-executing function
(function() {
    let protected = 0;
    // Getter function
    getValue = function() {
        return protected;
    // Setter function
    setValue = function(x) {
        if(typeof x === "number") {
            protected = x;

// Calling the functions
getValue(); // Result: 0
getValue(); // Result: 10
getValue(); // Result: 10

Last time we talked about JavaScript Hoisting. You can find this article here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: