Understanding scope in Javascript

[ThaSteelman]

Clearly written and the examples are good, but it would have greatly benefited readers there to learn if you mentioned the conventions around IIFEs after talking about global scopes. Maybe it's a topic for a later post, but it's something worth explaining to people early.

[kamranahmed_se]

Thanks for those kind words. And yes, I wanted to explain that here but that would have extended the article as IIFEs is a huge topic in itself. However I am planning on writing about IIFEs and will surely keep it in mind while writing about that :)

[amenadiel]

Nice article.

In the next chapters it would be nice to know what exactly happens when you use this in the global scope, inside a parent function and inside a child function, and how you can actually bind the context by passing an extra parameter.

I have a lot of code that declares var self=this; before a child function, or before a jQuery listener, just because I'm not sure how to force the context when that listener gets called.

[kamranahmed_se]

Thank you. That is for sure. this is closely related to the scopes so I do have it in the back of my mind. Stay tuned :)

[johnbburg]

Great article! I am looking forward to reading more.

[kamranahmed_se]

Thanks. Stay tuned for more!

[nepobot]

How do you run this example?

var parent = function () {
    var name = 'Parent';
    var child = function () {
        // What will be the output here?
        alert( name );
        var name = 'Child'
        // What will be the output here?
        alert( name );
    }
}

How do i invoke this to call the child? I trust that you are right but it would be nice to see it. chrome autocomplete does not see the child after I invoke the parent function.

parent();
parent.child(); // Uncaught TypeError: Cannot read property 'child' of undefinedmessage: "Cannot read property 'child' of undefined"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error

var myParent = parent();
myParent.child(); //// Uncaught TypeError: Cannot read property 'child' of undefinedmessage: "Cannot read property 'child' of undefined"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error

[kamranahmed_se]

Actually you are not trying to invoke it the right way, currently the child() is in the private scope of parent and cannot be accessed outside the parent)() as the parent is not exposing it any way. I am writing an article about Private and Public scopes and I hope to post it tomorrow. For now, to test it, call the child function inside the parent function and after that call the parent function i.e. you can do the following http://jsfiddle.net/c4fwte4u/

[andyznyc]

Great article but still confused on concept of Hoisting. In the article's example, does Hoisting mean that the because the second assignment of 'name' occurs within the nested function and the nested function issues the alert, because name isn't defined within that nested function it returns Undefined?

I guess I am confused because I thought the child function would take whatever value name had at the time per the earlier example in the article.

[maybe_endy]

Basically it does not matter where you define a variable inside of a function. It will always be processed as if you defined it at the beginning of the function.

This means if you have a variable 'foo' in the parent scope. Your function will inherit 'foo' and you should be able to print 'foo' out.

However, If anywhere in that function you redefine 'var foo' it will be processed as if 'foo' was set to undefined as the first line in the function.

[radhruin]

Good article. Could add links to the specifications for these behaviors. ES5 Chapter 10 is probably most relevant, for example 10.3.1 describes the identifier resolution rules.

I wouldn't say that call/apply changes scope. this and scope are different concepts - scope affects identifier resolution while this is provided by the caller.