Javascript Mini Series: Closures in Javascript

Closure in JavaScript is totally different from what you think it is, and it is also very fun. In this article, you will find out what JavaScript Closure is and a way to use it for your programming code. You will also find out more than one way to carry out closure in JavaScript. Finally, you will see code examples of how to finish your closure to support everything you have discovered.

What is a closure in JavaScript?

Closure in JavaScript is a form of lexical scoping used to hold variables from the outer scope of a function within the inner scope of a function. Lexical scoping is the method used to define the scope of a variable with its position inside the source code.

When you define a function, any variables inside the function are the only ones available. Attempting to access variables inside a function from outside will bring about a scope error; that is where closure comes in.

The inner function can get access to variables and parameters of an outer function; however, it cannot get access to arguments of the outer function. Consider the following instance:

function OuterFunction() {
  var outerVariable = 1;
  function InnerFunction() {
    alert(outerVariable);
  }

  InnerFunction();
}

In the above example, InnerFunction() can get access to outerVariable.

Now, as per the definition above, InnerFunction() can get access to outerVariable even though it will likely be executed one after the other. Consider the following instance:

Example

function OuterFunction() {
  var outerVariable = 100;
  function InnerFunction() {
    alert(outerVariable);
  }
  return InnerFunction;
}

var innerFunc = OuterFunction();
innerFunc(); // 100

In the above instance, return InnerFunction; returns InnerFunction from OuterFunction while you use OuterFunction(). A variable innerFunc references the InnerFunction()  and no longer the OuterFunction. So now, when you call innerFunc(), it is still able to access outerVariable, which is declared in OuterFunction(). This is known as closure.

A function can return every other function in JavaScript. A function that is assigned to a variable is called a function expression.

One important function of closure is that outer variables can hold their states between numerous calls. Remember, the inner function no longer preserves a separate copy of outer variables; however, it references outer variables, which means the value of the outer variables will be modified if you alternate it using the inner function.

Example

function Counter() {
  var counter = 0;
  function IncreaseCounter() {
    return counter += 1;
  };
  return IncreaseCounter;
}

var counter = Counter();

alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3
alert(counter()); // 4

In the above example, the outer function Counter returns the reference to the inner function IncreaseCounter(). IncreaseCounter will increase the outer variable counter to at least one. So calling inner function more than once will boom the counter to at least one whenever.

Closure is legitimate in a couple of stages of inner capabilities.

Example

function Counter() {
  var counter = 0;
  setTimeout( function () {
    var innerCounter = 0;
    counter += 1;
    alert("counter = " + counter);
    setTimeout( function () {
      counter += 1;
      innerCounter += 1;
      alert("counter = " + counter + ", innerCounter = " +       innerCounter)
    }, 500);
  }, 1000);
};

Counter();

According to the closure definition, if the inner function accesses the variables of the outer function, only then is it called a closure.

The following isn't a closure.

var Counter = (function () {
  var i = 0;
  return { counter : i += 1 };
})();

When to apply Closure?

Closure is beneficial for hiding implementation elements in JavaScript. In other words, it could be useful to create private variables or functions.

The following instance suggests how to create private functions and variables.

Example

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

alert(counter.value()); // 0
counter.increment();
counter.increment();

alert(counter.value()); // 2
counter.decrement();

alert(counter.value()); // 1

In the above example, increment(), decrement(), and value() will become public functions because they're protected within the return object, while changeBy() function becomes a private function because it isn't back and is only used internally by increment() and decrement().

Conclusion

When mastering any programming idea, the best way to get ahead is to practice what you have discovered. Practice is even more essential with closures because the concern count can be intricate. As a result of this fact, it's useful to discover or even create closures to study what closures can appear like in specific situations. Each case is a little extraordinary, and you can use closures to perform many tasks that might otherwise be a good deal harder. Identifying closures is the first-class way to solidify your know-how of closures and a way to create them.

How much is a great User Experience worth to you?

Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.

Learn More Already have an account? Sign in.