Javascript closures

Closure is when a function “remembers” its lexical scope even when the function is executed outside that lexical scope.

Closure is the capability for an function to remember ac access of its lexical scope even when that function is executed outside of that defined lexical scope.


function foo(){

var bar =”bar”;


function baz(){






function bam(baz){

baz(); // displays bar




// the capability of bar to continue to reference that same scope lookup even bar is executing outside is called closure

What is lexical scope??

Console.log(bar) will look for “bar” inside the baz function, then it move on to function foo and access the bar value over line 2. This is called lexical scope.

Another Example:

Lets say, on each time you click a button.. value has to be increment. In generally first procedure will show you on clicking each time same value will be printing..where are second procedure shows you a closure method.


1st procedure:

function count(){

var a=5;



When you assign this count() method to ng-click like ng-click=”count()” will always return 6.

The desired functionality like each click count should increase can be achieved by closures as follows:

var count = (function(){

var a=5;

return function(){

a = a+1;

return a;




count(); // return 6

count(); // this time return 7

Javascript closure

Javascript closure !! javascript closure !! javascript closure !!

WTH is this?? its being defined differently in each do we understand in an quickmanner 😦

Feeling embarrassed with this 😦

Anyways will try to understand the best from myside and explain you in a simple manner 🙂

First, what is the meaning of closure,lexical??

Closure: A closure is how a function “closes over” (Crockford) its variables and creates a different scope for them out of the way of the global [window] scope. So an understanding of closures will require some understanding of scope, which is definitely a common stumbling block in first learning JavaScript.


A closure is the local variables for a function – kept alive after the function has returned, or

A closure is a function defined within another scope that has access to all the variables within the outer scope.

A closure is a stack-frame which is not deallocated when the function returns. (as if a ‘stack-frame’ were malloc’ed instead of being on the stack!)


The word “lexical” means, in a broad sense “relating to text”, and clearly we have defined “scope” as being a relationship involving text, so is this kind of scoping also called “lexical scoping”?

Lexical scoping is a fancy term that refers to a function remembering and preserving its state between and after executions.


OMG!! Omg!! it cant be explain in simple..its being used for different to make it simple :/

First get an idea like what is local and global variables and what the exact scope of it, from here

A function doesn’t have to return in order to be called a closure. Simply accessing variables outside of your immediate lexical scope creates a closure.

function foo(x){
var tmp =3;returnfunction(y){
    alert(x + y +(++tmp));// will also alert 16
var bar = foo(2);// bar is now a closure.

Here’s a slightly more interesting example — a makeAdder function:

function makeAdder(x) {
  return function(y) {
    return x + y;

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12
 In this example, we have defined a function makeAdder(x) which takes a single argument x and returns a new function. The function it returns takes a single argument y, and returns the sum of x and y.

In essence, makeAdder is a function factory — it creates functions which can add a specific value to their argument. In the above example we use our function factory to create two new functions — one that adds 5 to its argument, and one that adds 10.

add5 and add10 are both closures. They share the same function body definition, but store different environments. In add5‘s environment, x is 5. As far as add10 is concerned, x is 10.

 Another example:

A closure is a function defined within another scope that has access to all the variables within the outer scope.

Using closure to hide state

Imagine this piece of code:


function greet(message) {

function greeter(name, age) {
  return name + ", who is " + age + " years old, says hi!";

// Generate the message
var message = greeter("Bob", 47);

// Pass it explicitly to greet

We’re manually passing the internal state around so that the other functions can get ahold of it. I mean, it works and is really simple, but assuming you never need the generated message string outside of the greet function, what’s the point of making the user of the API handle internal data for you. Also what if later on the greet function needed some other data, you would have to change everything to pass along more variables.

Clearly there must be a better way.

My favorite use of closure is to call a function that generates another function or group of functions but hides all the state in private variables within the closure:


function greeter(name, age) {
  var message = name + ", who is " + age + " years old, says hi!";

  return function greet() {

// Generate the closure
var bobGreeter = greeter("Bob", 47);

// Use the closure

Note that the greet function is nested within the greeter function. This means it’s within the lexical scope of greeterand thus according to the rules of closure has access to the local variables of greeter including message, name, andage.




My Example:

function makeAdder(x) {
return function (x) {
var imageObj = new Image();

imageObj.onload = function () {
bet = new Kinetic.Image({
x: xaxis,
y: yaxis,
image: imageObj
yaxis = yaxis – 7;
var text = new Kinetic.Text({
x: bet.getX(),
y: bet.getY() + 30,
text: ”,
fill: ‘red’,
fontFamily: ‘Cambria’,
fontSize: 19,
fontStyle: ‘bold’,
width: 118,
height: 100,
align: “center”,
verticalAlign: “middle”
imageObj.src = ‘bet_chips/’ + i + ‘.png’;
// bet.setZIndex(zI);
// zI = zI + 1;
// console.log(total);

var add5 = makeAdder(i);