Post
Ask Question

Voice of a Developer: JavaScript Closures - Part Fourteen

Introduction

 
JavaScript is a language of Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.
 
Before moving further let us look at the previous articles of the series:
In an aspiration to write better code, JavaScript provides closure. We’ll understand it now, but before that, I'll shift gears to a few other concepts like scope & callback
 

Scoping

 
In programming, scoping is the part of a computer program where you bind a variable and its visibility. There are two types of scope, i.e. lexical and dynamic. JavaScript is based on lexical or static scoping. The functions are lexically rather than dynamically scoped. JavaScript blocks scope using {}, and a new scope is created when you create a new function.
 
A quick glance at another concept called callback:
 

Callback

 
A callback is basically a function that accepts another function as a parameter, I hope it recalls your memory of higher-order functions. At some point, the higher-order function can call the function passed as a parameter, this is a callback. 
 
The common use of closure we are familiar with is setTimeout function.
 
code
 

Closures

 
A closure is an inner function that has access to the outer function’s variables. It can access complete chain of variables. Illustration:
 
Closures
 
Closure function can access own variables, function variables in which it’s created and global variables. See from code perspective now,
  1. var globalVar = 10;  
  2.   
  3. function localFunction() {  
  4.     var localFuncVar = 20;  
  5.     var closureFnc = function() {  
  6.         var closureVar = 30;  
  7.         console.log(globalVar);  
  8.         console.log(localFuncVar);  
  9.         console.log(closureVar);  
  10.     };  
  11.     closureFnc();  
  12. } 
 
output
 
I added debugger and checked Stack. We can notice Closure (localFunction) created.
 
code
 

Use of closure

 
A very popular use case is Module pattern, so it can implement OOPS public, private methods concept. Closure help to emulate this, example:
  1. var modularpattern = (function() {  
  2.     // your module code goes here    
  3.     var sum = 0;  
  4.     return {  
  5.         add: function() {  
  6.             sum = sum + 1;  
  7.             return sum;  
  8.         },  
  9.         reset: function() {  
  10.             return sum = 0;  
  11.         }  
  12.     }  
  13. }());  
  14. console.log(modularpattern.add()); // 1    
  15. console.log(modularpattern.add()); // 2    
  16. console.log(modularpattern.reset()); // 0 

Stack

 
If you observe the value of sum will increment or reset.
 
code
 
The objective is to hide variable accessibility from the outside world.
 

Disadvantage of closure

 
Memory leaks: Closure occupies memory and GC (Garbage collector) cannot collect memory within active closures. Hence, the chance of memory leaks is high if closure is not used well.
 
Debug: I found it comparatively difficult to debug closure if there is big nesting, i.e., function within function, and so on...
 
Please share your feedback or comments.


Similar Articles