Javascript more about closure
« Friday, April 12, 2013 »

closure javascript

Like many languages, javascript has many scope and variables declared in these scope can be accessed from scope below unless scopes below redeclare a variable with the same name.

Unlike other languages, scopes are quite useful and can be used like a pattern.

Here is a small prototype definition.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var Cat = function (legs) {

    this.cutLeg = function () {
        legs -= 1;
        if (legs < 0) {
            legs = 0;
        }
    };

    this.getLegCount = function () {
        return legs;
    };

    this.saySomething = function () {
        return "Meow"; 
    };
};

In this function, the variable legs can't be accessed from code.

1
2
3
4
5
var cat = new Cat(4);
>> cat.getLegCount();
4
>> cat.legs == undefined
true

The closure lets us create “private” variables that are only accessible by sub closure unless they do redeclare a variable of the same name.

One other funny thing about javascript is the function operator. Let say we have this code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
function quick(bool) {
    if (bool) {
        function what() {
            return "quick";
        }
    } else {
        function what() {
            return "quack";
        }
    }

    return what();
}

>> quick(true);
"quack"
>> quick(false);
"quack"

Some people might think and expect to get two different outputs but it's wrong. As I said earlier, the var keyword is function scoped. Let's rewrite this code differently.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function quick(bool) {
    var what = function () {
            return "quick";
        };

    what = function what() {
        return "quack";
    }

    if (bool) {
    } else {
    }

    return what();
}

>> quick(true);
"quack"
>> quick(false);
"quack"

Makes sense now? But we can do what we expected since we can create anonym functions. Javascript gives us a lot of control and the code above gives us what we need.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function quick(bool) {
    var what;

    if (bool) {
        what = function () {
            return "quick";
        };
    } else {
        what = function what() {
            return "quack";
        }
    }

    return what();
}

>> quick(true);
"quick"
>> quick(false);
"quack"

That said, the code will work but keep in mind that function declaration and vars are done first. In some way, the code should look like this if we could see the actual generated code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function quick(bool) {
    var a1 = function () {
            return "quick";
        },
        a2 = function what() {
            return "quack";
        },
        what;


    if (bool) {
        what = a1;
    } else {
        what = a2;
    }

    return what();
}

>> quick(true);
"quick"
>> quick(false);
"quack"

Sometimes, it feels so easy to write code that seems to do something, but will do something else. Javascript syntax is quite easy to understand but it's easy to get fooled if you don't know javascript good enough.

I wouldn't say that javascript is not logical. It's just that it's not that obvious everytime.

comments powered by Disqus

Copyright © 2015 Loïc Faure-Lacroix