3

There is one sentence in JavaScript Guide about variable scope:"Variables in JavaScript are in a sense "hoisted" or lifted to the top of the function or statement. However, variables that aren't initialized yet will return a value of undefined." 

   /**
    * Example 2
    */
   // will return a value of undefined
   var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

My question is: Why the "console.log(myvar); "will return undefined? I think the first line has initialized myvar a value which is "my value".

Cindy
  • 119
  • 1
  • 1
  • 7
  • 1
    Your code example has two variables of the same name, one local to the function, and that is the one being logged. – nnnnnn Oct 10 '14 at 02:52
  • Forget the term "hoisting", it's a distraction. Variable and function declarations are processed before any code is executed. **However**, initialisation occurs during execution. So while the variable exists from the start, it isn't assigned a value until the assignment is executed. – RobG Oct 10 '14 at 03:05

2 Answers2

5

Because all variable declarations are automatically hoisted to the top of their defining function block, this code:

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

is actually this to the JS interpreter:

(function() {
  var myvar;   // declares a new local variable that covers up the global name
  console.log(myvar); // undefined
  myvar = "local value";
})();

Which should show you why the locally defined myvar is what console.log() outputs and it has been defined, but not yet initialized so thus it shows as undefined.

The locally defined myvar overrides/covers up the globally defined one so when you access myvar in your function, you only get the locally defined variable (whether it's been initialized yet or not).

See some other references on the same topic:

How do JavaScript variables work?

JavaScript variable undefined vs not defined

One var per function in JavaScript?

JavaScript 'hoisting'

If you remove the var in your function (so you are just referencing a variable, not declaring a new one), then you would only have one global variable named myvar and you would get the behavior it looks like you may be expecting:

var myvar = "my value";

(function() {
  console.log(myvar); // outputs "my value"
  myvar = "local value";
})();
Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Note that the OP is confused because her example has two variables of the same name: the question explicitly mentions the value being assigned to the global variable. – nnnnnn Oct 10 '14 at 02:57
  • @nnnnnn - yes, I have addressed that with some edits. – jfriend00 Oct 10 '14 at 02:57
  • In ES5, [*variables are initialised to `undefined` when created*](http://ecma-international.org/ecma-262/5.1/#sec-12.2), so their value is always defined and they are essentially "initialised" twice. ;-) – RobG Oct 10 '14 at 03:09
  • @RobG - isn't it in all versions of javascript (not just ES5), that variables that have not been initialized yet by your own code have a value of `undefined`? – jfriend00 Oct 10 '14 at 03:12
  • @jfriend00—yes, you're right, I just hadn't seen it in ed 3 before. :-) – RobG Oct 10 '14 at 04:08
2

Here your function is a self invoking function. A self-invoking expression is invoked (started) automatically, without being called. Hoisting applies to variable declarations and to function declarations. 

var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

So here function invoked it self even before initializing myvar with the specified value

Tharindu Kumara
  • 4,398
  • 2
  • 28
  • 46
  • The global variable is initialised before the function is invoked. But the undefined value logged belongs to the local variable of the same name, and the local variable's initialisation is not affected by how the function is called. The fact that an immediately invoked function expression is involved is irrelevant. – nnnnnn Mar 27 '16 at 10:32