Home/ Questions/Q 8556845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:26:43+00:00

I am new to front end programming. When I was learning jQuery I came

  • 0

I am new to front end programming. When I was learning jQuery I came across this issue. Here is my code:

<script type="text/javascript">
$(document).ready(function(){
  var msg ="hi";
  $("#test1").click(function(){alert(msg)});
  msg ="hello";
  $("#test2").click(function(){alert(msg)});
});
</script>
</head>
<body>
  
<button id="test1">test1</button>
<button id="test2">test2</button>

On running this code, both the alerts prints "hello". I except the first button on clicking should alert with "hi". Why does it behave like this? Is this the right behavior? Is it because of scope constraint?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Lots of mostly correct explanations here but, much to my surprise, no one’s thrown out the key concept here: closure.

    Basically what’s happening is when you declare your two functions, the scope they are declared in forms a closure. That means that the variables inside that closure remain available to the functions. In other words:

    $(document).ready(function(){
    // this begins a closure
    var msg ="hi";
    // you are simply declaring a function here, not calling it
    $("#test1").click(function(){alert(msg)});
    msg ="hello";
    // ditto
    $("#test2").click(function(){alert(msg)});
    // the end of the closure...msg has the value "hello"
});

    Then some time passes, and the click events get called. The functions that are attached to the click events still have access to the closure (inside which the value of msg is “hello”).

    The traditional way to “capture” a variable’s value inside a closure is to create an “Immediately Invoked Function Expression” (IIFE). Basically you can think of this as creating an entirely new closure that contains the immediate value of a variable. You could re-write your code to use IIFEs like this:

    $(document).ready(function(){
    // this begins a closure
    var msg ="hi";
    // the following creates an anonymous function with a single parameter
    // AND invokes it immediately, creating another closure in which the
    // value of msg1 is "hi".
    (function(msg1){
        $("#test1").click(function(){alert(msg1)});
    })(msg);
    msg ="hello";
    // ditto
    (function(msg2){
        $("#test2").click(function(){alert(msg2)});
    })(msg);
});

    I hope this makes it a little bit clearer what’s happening, and how to get what you’re looking for.

    • 0