JavaScript Variable Hoisting

Question

I'm having a problem understanding why name is getting a value here

(function() {
 (function() {
 var name = 'Fido';
 })();
})();
console.log(name + ' says woof'); //Output: Fido says woof

Shouldn't the variable name be local to the internal function?

• nnnnnn: The variable is local to the inner function. I can't reproduce your result.
• planetoftheweb: So my console says "Fido says woof". It should say something like "undefined says woof"

Answer 1

The variable is local, and the value that you see doesn't come from the assignment inside the function.

You have named your window "Fido" also, and when you use name in the global scope, you get the window.name property.

If you try it in a jsfiddle, you will get "result says woof".

Demo: http://jsfiddle.net/Guffa/eDxf3/

• planetoftheweb: I wonder if it's caching it somehow. I'm clearly getting Fido says woof instead of result
• planetoftheweb: Okay, I closed the browser window and reloaded the page and now it just says "says woof". It must have been some caching issue since I was trying lots of different variations of this code to make sure it was doing what it was supposed to be doing.

Answer 2

You are wrong! If executed in browser console this code will output: says woof

I think you need to understand hoisting better. This article is definitely going to help you. Here is a short description taken from the article:

---

In JavaScript, a name enters a scope in one of four basic ways:

• Language-defined: All scopes are, by default, given the names this and arguments.
• Formal parameters: Functions can have named formal parameters, which are scoped to the body of that function.
• Function declarations: These are of the form function foo() {}.
• Variable declarations: These take the form var foo;.

Function declarations and variable declarations are always moved ("hoisted") invisibly to the top of their containing scope by the JavaScript interpreter. Function parameters and language-defined names are, obviously, already there. This means that code like this:

function foo() {
 bar();
 var x = 1;
}

is actually interpreted like this:

function foo() {
 var x;
 bar();
 x = 1;
}

It turns out that it doesn’t matter whether the line that contains the declaration would ever be executed. The following two functions are equivalent:

function foo() {
 if (false) {
 var x = 1;
 }
 return;
 var y = 1;
}
function foo() {
 var x, y;
 if (false) {
 x = 1;
 }
 return;
 y = 1;
}

• planetoftheweb: My console says "Fido says woof".
• planetoftheweb: I wasn't wrong, but it looks like somehow Chrome was caching the variable somewhere. I quit the window and reloaded the page and things behaved normally. Whew. I hate it when logic doesn't work. Thanks for helping me try that.
• Pavel Nikolov: @planetoftheweb make sure you understand hoisting and scoping better and next time you will be confident where to find such a problem
• planetoftheweb: The problem was that I understood hoisting, but my browser was playing tricks on me. Once I refreshed, it did what I thought it should do. Thanks
• nnnnnn: "You are wrong!"- No, the OP described a console output that actually happened, and went on to say that they thought the variable should be local. That's not wrong. The expected behaviour they describe reflected correct understanding of scope.