JavaScript object strange behaviour

Question

Excuse me for a not-standart question, everything works fine, but it is still strange
On a webpage I use a datepicker from here
Here is the partial code:
HTML:

<div id="datepicker-calendar"></div>

Function for DatePicker insertion:

function insert_datepicker(mode)
{
    $('#datepicker-calendar').empty();  
    ...
    $('#datepicker-calendar').DatePicker({
        ...
        onChange    : function(date,el) {  
            if (mode == 1){
                doSmth1();
            }
            if (mode == 2){
                doSmth2();
            }
        }  
    });
    ...
}

'mode' is not a global variable and is shown as 'undefined' in console.
When I call "insert_datepicker(2)" the onChange works fine, but shouldn't there be an error when the event is triggered?
How does the function "remembers" the note?

It's a JavaScript closures. See http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Benjamin Gruenbaum, Jun 11 '13 at 09:11

score 1 · Accepted Answer · answered Jun 11 '13 at 09:11

It is because of closure nature of javascript, it allows an inner function to access the variables declared in the outer scope.

In your case the mode variable is declared inside insert_datepicker function and you have an anonymous inner function for onChange, here the inner function will have access to the variables declared inside insert_datepicker as closure variables.

score 0 · Answer 2 · answered Jun 11 '13 at 09:11

mode is provided when you call insert_datepicker(). mode in your case, when calling insert_datepicker(2) is actually 2. All datepickers attached this way will have their mode bound to the mode passed in when calling insert_datepickers.

When you don't pass in mode, it will be undefined. Comparing it to 1 and 2 will yield false and will not execute the blocks of the statements.

JavaScript object strange behaviour

2 Answers2