loading
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var countClosure = function() { 
  // local variable 
  var counter = 1;
  // return function to be called after termination 'encloses' lexical scope
  return function () {
    console.log(counter); // var counter is accesible
    counter += 1; // counter can be incremented and persists in outer scope
  }
};

// Call to countClosure function
var mycounter = countClosure();

// countClosure function is done, but still invoked to trigger its return method 
mycounter(); 
mycounter(); 
mycounter(); 



var buttonMaker = function(value) { 
  // local variable assigned input argument
  var name = value;
  // return functions to be called  after termination 'encloses' lexical scope
  return { 
    name: function() { 
      console.log("Button name is " + name); // var name is accesible
    },

    click : function() { 
      console.log("Clicked on " + name); // var name is accesible
    },

    hover : function() { 
      console.log("Hovered over " + name); // var name is accesible
    }
  }
}

// Call to buttonMaker function with different input values
var redBtn = buttonMaker("Red");
var yellowBtn = buttonMaker("Yellow");
var blueBtn = buttonMaker("Blue");
// buttonMaker function is done, but can still return different results


// note the following function calls on buttonMaker have access to the 
// var 'name' in buttonMaker, even though the buttonMaker function is done
// This is because all lexically scoped variables are 'enclosed' with the
// return result, hence the name 'closure'
redBtn.name(); 
redBtn.click();
yellowBtn.click();
blueBtn.click();
redBtn.hover();
yellowBtn.hover();
Native Browser JavaScript