What is a practical use for a closure in JavaScript

Question

I m trying my hardest to wrap my head around JavaScript closures   I get that by returning an inner function  it will have access to any variable defined in its immediate parent   Where would this be useful to me  Perhaps I haven t quite got my head around it yet  Most of the examples I have seen online don t provide any real world code  just vague examples   Can someone show me a real world use of a closure   Is this one  for example   var warnUser   function  msg        var calledCount   0      return function            calledCount           alert msg     nYou have been warned     calledCount     times                var warnForTamper   warnUser  You can not tamper with our HTML     warnForTamper    warnForTamper

User · Answer

Here I have one simple example of the closure concept which we can use for in our E-commerce site or many others as well.

I am adding my JSFiddle link with the example. It contains a small product list of three items and one cart counter.

JSFiddle

_x000D_

// Counter closure implemented function;
var CartCouter = function(){
  var counter = 0;

  function changeCounter(val){
      counter += val
  }

  return {
      increment: function(){
        changeCounter(1);
    },
    decrement: function(){
      changeCounter(-1);
    },
    value: function(){
      return counter;
    }
  }
}

var cartCount = CartCouter();

function updateCart() {
  document.getElementById('cartcount').innerHTML = cartCount.value();
}

var productlist = document.getElementsByClassName('item');
for(var i = 0; i< productlist.length; i++){
  productlist[i].addEventListener('click', function(){
    if(this.className.indexOf('selected') < 0){
      this.className += " selected";
      cartCount.increment();
      updateCart();
    }
    else{
      this.className = this.className.replace("selected", "");
      cartCount.decrement();
      updateCart();
    }
  })
}

_x000D_

.productslist{
  padding: 10px;
}
ul li{
  display: inline-block;
  padding: 5px;
  border: 1px solid #DDD;
  text-align: center;
  width: 25%;
  cursor: pointer;
}
.selected{
  background-color: #7CFEF0;
  color: #333;
}
.cartdiv{
  position: relative;
  float: right;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #F1F1F1;
}

_x000D_

<div>
    <h3>
        Practical use of a JavaScript closure concept/private variable.
    </h3>

    <div class="cartdiv">
        <span id="cartcount">0</span>
    </div>

    <div class="productslist">
        <ul>
            <li class="item">Product 1</li>
            <li class="item">Product 2</li>
            <li class="item">Product 3</li>
        </ul>
    </div>
</div>

_x000D_

User · Answer

JavaScript closures can be used to implement throttle and debounce functionality in your application  Throttling Throttling puts a limit on as a maximum number of times a function can be called over time  As in  quot execute this function at most once every 100 milliseconds  quot  Code  const throttle    func  limit    gt      let isThrottling   return function         const args   arguments     const context   this     if   isThrottling          func apply context  args        isThrottling   true       setTimeout      gt  isThrottling   false  limit               Debouncing Debouncing puts a limit on a function not be called again until a certain amount of time has passed without it being called  As in  quot execute this function only if 100 milliseconds have passed without it being called  quot  Code  const debounce    func  delay    gt      let debouncing   return function         const context   this     const args   arguments     clearTimeout debouncing      debouncing   setTimeout      gt  func apply context  args   delay         As you can see closures helped in implementing two beautiful features which every web application should have to provide smooth UI experience functionality

User · Answer

Much of the code we write in front-end JavaScript is event-based     we define some behavior  then attach it to an event that is triggered by the user  such as a click or a keypress   Our code is generally attached as a callback  a single function which is executed in response to the event    size12  size14  and size16 are now functions which will resize the body text to 12  14  and 16 pixels  respectively  We can attach them to buttons  in this case links  as follows    function makeSizer size        return function         document body style fontSize   size    px             var size12   makeSizer 12   var size14   makeSizer 14   var size16   makeSizer 16    document getElementById  size-12   onclick   size12  document getElementById  size-14   onclick   size14  document getElementById  size-16   onclick   size16    Fiddle

User · Answer

Explaining the practical use for a closure in JavaScript When we create a function inside another function  we are creating a closure  Closures are powerful because they are capable of reading and manipulating the data of its outer functions  Whenever a function is invoked  a new scope is created for that call  The local variable declared inside the function belong to that scope and they can only be accessed from that function  When the function has finished the execution  the scope is usually destroyed  A simple example of such function is this  function buildName name        const greeting    quot Hello   quot    name      return greeting     In above example  the function buildName   declares a local variable greeting and returns it  Every function call creates a new scope with a new local variable  After the function is done executing  we have no way to refer to that scope again  so it   s garbage collected  But how about when we have a link to that scope  Let   s look at the next function   x000D   x000D  function buildName name        const greeting    Hello      name     Welcome        const sayName   function             console log greeting              return sayName     const sayMyName   buildName  Mandeep    sayMyName        Hello  Mandeep Welcome x000D   x000D   x000D   The function sayName   from this example is a closure  The sayName   function has its own local scope  with variable welcome  and has also access to the outer  enclosing  function   s scope  In this case  the variable greeting from buildName    After the execution of buildName is done  the scope is not destroyed in this case  The sayMyName   function still has access to it  so it won   t be garbage collected  However  there is no other way of accessing data from the outer scope except the closure  The closure serves as the gateway between the global context and the outer scope

User · Answer

In the given sample  the value of the enclosed variable  counter  is protected and can be altered only using the given functions  increment  decrement   Because it is in a closure   x000D   x000D  var MyCounter   function         var counter   0      return           increment function     return counter    1            decrement function     return counter -  1            get function     return counter              var x   MyCounter       Or var y   MyCounter     alert x get        0 alert x increment        1 alert x increment        2  alert y increment        1 alert x get        x is still 2 x000D   x000D   x000D

User · Answer

I ve used closures to do things like  a    function          var privatefunction   function              alert  hello               return           publicfunction   function                  privatefunction                           As you can see there  a is now an object  with a method publicfunction   a publicfunction     which calls privatefunction  which only exists inside the closure   You can not call privatefunction directly  i e  a privatefunction      just publicfunction    It s a minimal example  but maybe you can see uses to it  We used this to enforce public private methods

User · Answer

There are various use cases of closures Here  I am going to explain most important usage of Closure concept   Closure can be used to create private methods and variables just like an object-oriented language like java  c   and so on  Once you implemented private methods and variables  your variables defined inside a function won t be accessible by window object  This helps in data hiding and data security   const privateClass        gt      let name    quot sundar quot     function setName changeName        name   changeName        function getName         return name        return       setName  setName      getName  getName           let javaLikeObject   privateClass       similar to new Class   in OOPS   console log javaLikeObject getName       this will give sundar javaLikeObject setName  quot suresh quot    console log javaLikeObject getName       this will give suresh    Another real-life example of closure    Create index html   lt html lang  quot en quot  gt     lt head gt       lt meta charset  quot UTF-8 quot    gt       lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0 quot    gt       lt title gt Program with Javascript lt  title gt     lt  head gt     lt body gt       lt p id  quot first quot  gt  lt  p gt       lt p id  quot second quot  gt  lt  p gt       lt button onclick  quot applyingConcepts   quot  gt Click lt  button gt       lt script src  quot   index js quot  gt  lt  script gt     lt  body gt   lt  html gt    2 In index js    let count   0    return      gt        document getElementById  quot first quot   innerHTML   count                  In this example  when you click a button  then your count will be updated on p id  Note  You might be wondering what s special in this code  When you inspect  you will notice that you can t change the value of count using the window object  This means you have declared private variable count so this prevents your states from being spoiled by the client

User · Answer

This thread has helped me immensely in gaining a better understanding of how closures work  I ve since done some experimentation of my own and came up with this fairly simple code which may help some other people see how closures can be used in a practical way and how to use the closure at different levels to maintain variables similar to static and or global variables without risk of them getting overwritten or confused with global variables  This keeps track of button clicks  both at a local level for each individual button and a global level  counting every button click  contributing towards a single figure  Note I haven t used any global variables to do this  which is kind of the point of the exercise - having a handler that can be applied to any button that also contributes to something globally  Please experts  do let me know if I ve committed any bad practices here  I m still learning this stuff myself   lt  doctype html gt   lt html gt    lt head gt       lt meta charset  quot utf-8 quot  gt       lt title gt Closures on button presses lt  title gt        lt script type  quot text javascript quot  gt           window addEventListener  quot load quot    function                                     Grab the function from the first closure                  and assign to a temporary variable                 this will set the totalButtonCount variable                 that is used to count the total of all button clicks                            var buttonHandler   buttonsCount                                    Using the result from the first closure  a function is returned                  assign and run the sub closure that carries the                 individual variable for button count and assign to the click handlers                            document getElementById  quot button1 quot   addEventListener  quot click quot    buttonHandler                  document getElementById  quot button2 quot   addEventListener  quot click quot    buttonHandler                  document getElementById  quot button3 quot   addEventListener  quot click quot    buttonHandler                      Now that buttonHandler has served its purpose it can be deleted if needs be             buttonHandler   null                        function buttonsCount                                    First closure level                 - totalButtonCount acts as a sort of global counter to count any button presses                            var totalButtonCount   0               return  function                         Second closure level                 var myButtonCount   0                   return function  event                           Actual function that is called on the button click                     event preventDefault                                                  Increment the button counts                         myButtonCount only exists in the scope that is                        applied to each event handler and therefore acts                        to count each button individually  whereas because                        of the first closure totalButtonCount exists at                        the scope just outside  it maintains a sort                        of static or global variable state                                             totalButtonCount                        myButtonCount                                                    Do something with the values     fairly pointless                         but it shows that each button contributes to both                         its own variable and the outer variable in the                         first closure                                            console log  quot Total button clicks   quot  totalButtonCount                       console log  quot This button count   quot  myButtonCount                                                  lt  script gt   lt  head gt    lt body gt       lt a href  quot   quot  id  quot button1 quot  gt Button 1 lt  a gt       lt a href  quot   quot  id  quot button2 quot  gt Button 2 lt  a gt       lt a href  quot   quot  id  quot button3 quot  gt Button 3 lt  a gt   lt  body gt    lt  html gt

User · Answer

The example you give is an excellent one  Closures are an abstraction mechanism that allow you to separate concerns very cleanly  Your example is a case of separating instrumentation  counting calls  from semantics  an error-reporting API   Other uses include    Passing parameterised behaviour into an algorithm  classic higher-order programming    function proximity sort arr  midpoint        arr sort function a  b    a -  midpoint  b -  midpoint  return a a - b b         Simulating object oriented programming   function counter         var a   0      return           inc  function       a             dec  function     --a             get  function     return a             reset  function     a   0             Implementing exotic flow control  such as jQuery s Event handling and AJAX APIs

User · Answer

Another common use for closures is to bind this in a method to a specific object  allowing it to be called elsewhere  such as as an event handler    function bind obj  method        if  typeof method     string             method   obj method             return function              method apply obj  arguments               document body addEventListener  mousemove   bind watcher   follow    true     Whenever a mousemove event fires  watcher follow evt  is called   Closures are also an essential part of higher-order functions  allowing the very common pattern of rewriting multiple similar functions as a single higher order function by parameterizing the dissimilar portions  As an abstract example   foo a   function        A a B  foo b   function        A b B  foo c   function        A c B    becomes  fooer   function  x        return function        A x B      where A and B aren t syntactical units but source code strings  not string literals    See  Streamlining my javascript with a function  for a concrete example

User · Answer

The JavaScript module pattern uses closures  Its nice pattern allows you to have something alike  quot public quot  and  quot private quot  variables  var myNamespace    function         var myPrivateVar  myPrivateMethod        A private counter variable   myPrivateVar   0        A private function which logs any arguments   myPrivateMethod   function foo          console log foo           return           A public variable     myPublicVar   quot foo quot           A public function utilizing privates     myPublicFunction  function bar              Increment our private counter       myPrivateVar              Call our private method using bar       myPrivateMethod bar

User · Answer

There is a section on Practical Closures at the Mozilla Developer Network

User · Answer

If you re comfortable with the concept of instantiating a class in the object-oriented sense  i e  to create an object of that class  then you re close to understanding closures    Think of it this way  when you instantiate two Person objects you know that the class member variable  Name  is not shared between instances  each object has its own  copy   Similarly  when you create a closure  the free variable   calledCount  in your example above  is bound to the  instance  of the function    I think your conceptual leap is slightly hampered by the fact that every function closure returned by the warnUser function  aside  that s a higher-order function  closure binds  calledCount  with the same initial value  0   whereas often when creating closures it is more useful to pass different initializers into the higher-order function  much like passing different values to the constructor of a class   So  suppose when  calledCount  reaches a certain value you want to end the user s session  you might want different values for that depending on whether the request comes in from the local network or the big bad internet  yes  it s a contrived example   To achieve this  you could pass different initial values for calledCount into warnUser  i e  -3  or 0     Part of the problem with the literature is the nomenclature used to describe them   lexical scope    free variables    Don t let it fool you  closures are more simple than would appear    prima facie  -

User · Answer

In the JavaScript  or any ECMAScript  language  in particular  closures are useful in hiding the implementation of functionality while still revealing the interface  For example  imagine you are writing a class of date utility methods and you want to allow users to look up weekday names by index  but you don t want them to be able to modify the array of names you use under the hood  var dateUtil       weekdayShort   function         var days     Mon    Tue    Wed    Thu    Fri    Sat    Sun        return function x          if   x    parseInt x       x  lt  1      x  gt  7             throw new Error  quot invalid weekday number quot                  return days x - 1                     Note that the days array could simply be stored as a property of the dateUtil object  but then it would be visible to users of the script and they could even change it if they wanted  without even needing your source code   However  since it s enclosed by the anonymous function which returns the date lookup function it is only accessible by the lookup function so it is now tamperproof

User · Answer

Closures are a useful way to create generators  a sequence incremented on-demand    x000D   x000D      var foobar   function i  var count   count    i  return function   return   count    x000D   x000D      baz   foobar 1   x000D      console log  first call      baz       2 x000D      console log  second call      baz       3 x000D   x000D   x000D    The differences are summarized as follows    Anonymous functions                                    Defined functions  Cannot be used as a method                             Can be used as a method of an object  Exists only in the scope in which it is defined        Exists within the object it is defined in  Can only be called in the scope in which it is defined Can be called at any point in the code  Can be reassigned a new value or deleted               Cannot be deleted or changed   References   AS3 Fundamentals  Functions

User · Answer

I wrote an article a while back about how closures can be used to simplify event-handling code  It compares ASP NET event handling to client-side jQuery   http   www hackification com 2009 02 20 closures-simplify-event-handling-code

User · Answer

Here  I have a greeting that I want to say several times  If I create a closure  I can simply call that function to record the greeting  If I don t create the closure  I have to pass my name in every single time   Without a closure  https   jsfiddle net lukeschlangen pw61qrow 3     function greeting firstName  lastName      var message    Hello     firstName         lastName          console log message      greeting  Billy    Bob    greeting  Billy    Bob    greeting  Billy    Bob    greeting  Luke    Schlangen    greeting  Luke    Schlangen    greeting  Luke    Schlangen      With a closure  https   jsfiddle net lukeschlangen Lb5cfve9 3     function greeting firstName  lastName      var message    Hello     firstName         lastName           return function         console log message          var greetingBilly   greeting  Billy    Bob    var greetingLuke   greeting  Luke    Schlangen     greetingBilly    greetingBilly    greetingBilly    greetingLuke    greetingLuke    greetingLuke

User · Answer

Suppose  you want to count the number of times user clicked a button on a webpage  For this  you are triggering a function on  onclick event of button to update the count of the variable  lt button onclick  quot updateClickCount   quot  gt click me lt  button gt   Now there could be many approaches like   You could use a global variable  and a function to increase the counter   var counter   0    function updateClickCount            counter          Do something with counter     But  the pitfall is that any script on the page can change the counter  without calling updateClickCount        Now  you might be thinking of declaring the variable inside the function   function updateClickCount          var counter   0         counter          Do something with counter     But  hey  Every time updateClickCount   function is called  the counter is set to 1 again      Thinking about nested functions  Nested functions have access to the scope  quot above quot  them  In this example  the inner function updateClickCount   has access to the counter variable in the parent function countWrapper     function countWrapper          var counter   0       function updateClickCount                counter              Do something with counter             updateClickCount         return counter      This could have solved the counter dilemma  if you could reach the updateClickCount   function from the outside and you also need to find a way to execute counter   0 only once not everytime      Closure to the rescue   self-invoking function    var updateClickCount    function         var counter   0        return function               counter              Do something with counter                The self-invoking function only runs once  It sets the counter to zero  0   and returns a function expression  This way updateClickCount becomes a function  The  quot wonderful quot  part is that it can access the counter in the parent scope  This is called a JavaScript closure  It makes it possible for a function to have  quot private quot  variables  The counter is protected by the scope of the anonymous function  and can only be changed using the add function    A more lively example on closures  x000D   x000D   lt script gt  var updateClickCount    function        var counter   0       return function              counter          document getElementById  spnCount   innerHTML   counter               lt  script gt    lt html gt   lt button onclick  updateClickCount    gt click me lt  button gt   lt div gt  you ve clicked      lt span id  spnCount  gt  0  lt  span gt  times   lt  div gt   lt  html gt  x000D   x000D   x000D    Reference  JavaScript Closures

User · Answer

I m trying to learn closures and I think the example that I have created is a practical use case  You can run a snippet and see the result in the console  We have two separate users who have separate data  Each of them can see the actual state and update it   x000D   x000D  function createUserWarningData user      const data         name  user      numberOfWarnings  0          function addWarning         data numberOfWarnings   data numberOfWarnings   1         function getUserData         console log data       return data         return       getUserData  getUserData      addWarning  addWarning          const user1   createUserWarningData  Thomas    const user2   createUserWarningData  Alex       USER 1 user1 getUserData       Returning data user object user1 addWarning       Add one warning to specific user user1 getUserData       Returning data user object    USER2 user2 getUserData       Returning data user object user2 addWarning       Add one warning to specific user user2 addWarning       Add one warning to specific user user2 getUserData       Returning data user object x000D   x000D   x000D

User · Answer

Use of Closures  Closures are one of the most powerful features of JavaScript  JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function  and all other variables and functions that the outer function has access to   However  the outer function does not have access to the variables and functions defined inside the inner function  This provides a sort of security for the variables of the inner function  Also  since the inner function has access to the scope of the outer function  the variables and functions defined in the outer function will live longer than the outer function itself  if the inner function manages to survive beyond the life of the outer function  A closure is created when the inner function is somehow made available to any scope outside the outer function  Example   lt script gt  var createPet   function name      var sex       return       setName  function newName          name   newName                  getName  function           return name                  getSex  function           return sex                  setSex  function newSex          if typeof newSex     quot string quot   amp  amp   newSex toLowerCase       quot male quot     newSex toLowerCase       quot female quot              sex   newSex                       var pet   createPet  quot Vivie quot    console log pet getName                         Vivie  console log pet setName  quot Oliver quot        console log pet setSex  quot male quot     console log pet getSex                          male console log pet getName                         Oliver  lt  script gt   In the code above  the name variable of the outer function is accessible to the inner functions  and there is no other way to access the inner variables except through the inner functions  The inner variables of the inner function act as safe stores for the inner functions  They hold  quot persistent quot   yet secure  data for the inner functions to work with  The functions do not even have to be assigned to a variable  or have a name  read here for detail

User · Answer

Yes  that is a good example of a useful closure  The call to warnUser creates the calledCount variable in its scope and returns an anonymous function which is stored in the warnForTamper variable   Because there is still a closure making use of the calledCount variable  it isn t deleted upon the function s exit  so each call to the warnForTamper   will increase the scoped variable and alert the value  The most common issue I see on Stack Overflow is where someone wants to  quot delay quot  use of a variable that is increased upon each loop  but because the variable is scoped then each reference to the variable would be after the loop has ended  resulting in the end state of the variable  for  var i   0  i  lt  someVar length  i        window setTimeout function              alert  quot Value of i was  quot  i  quot  when this timer was set quot           10000    This would result in every alert showing the same value of i  the value it was increased to when the loop ended   The solution is to create a new closure  a separate scope for the variable   This can be done using an instantly executed anonymous function  which receives the variable and stores its state as an argument  for  var i   0  i  lt  someVar length  i         function  i            window setTimeout function                  alert  quot Value of i was  quot    i    quot  when this timer was set quot              10000          i

User · Answer

I like Mozilla s function factory example  function makeAdder x         return function y            return x   y            var addFive   makeAdder 5    console assert addFive 2      7   console assert addFive -5      0

User · Answer

Reference  Practical usage of closures In practice  closures may create elegant designs  allowing customization of various calculations  deferred calls  callbacks  creating encapsulated scope  etc  An example is the sort method of arrays which accepts the sort condition function as an argument   1  2  3  sort function  a  b               Sort conditions      Mapping functionals as the map method of arrays which maps a new array by the condition of the functional argument   1  2  3  map function  element        return element   2          2  4  6   Often it is convenient to implement search functions with using functional arguments defining almost unlimited conditions for search  someCollection find function  element        return element someProperty     searchCondition        Also  we may note applying functionals as  for example  a forEach method which applies a function to an array of elements   1  2  3  forEach function  element        if  element   2    0            alert element                1  3  A function is applied to arguments  to a list of arguments     in apply  and to positioned arguments     in call    function          alert    join call arguments            1 2 3    apply this   1  2  3     Deferred calls  var a   10  setTimeout function          alert a      10  after one second    1000    Callback functions  var x   10     Only for example xmlHttpRequestObject onreadystatechange   function             Callback  which will be called deferral          when data will be ready         variable  quot x quot  here is available         regardless that context in which         it was created already finished     alert x      10     Creation of an encapsulated scope for the purpose of hiding auxiliary objects  var foo        function  object        var x   10      object getX   function  getX             return x            foo    alert foo getX        Get closured  quot x quot      10

[javascript] What is a practical use for a closure in JavaScript?

Examples related to javascript

Examples related to closures

Examples related to terminology