Why is the result of this JavaScript code "undefined"?

Question

I am trying to figure out why the result of this Javascript code in the browser's console window is undefined? Shouldn't it be "outside"?

var text = 'outside';
function logIt(){
    console.log(text);
    var text = 'inside';
};
logIt();

Thanks

Answer 1

This is a result of "variable hoisting". (See http://adripofjavascript.com/blog/drips/variable-and-function-hoisting.)

To make the code behave as you expect, you need to either assign the variable within the function scope or pass it as an argument to the function:

var logIt = function (){
    var text = 'outside';
    console.log(text);
    text = 'inside';
};
logIt();

or

var text = 'outside';
var logIt = function (txtArg){
    console.log(txtArg);
    var text = 'inside';
};
logIt(text);

Answer 2

In JavaScript, variables are "hoisted" to the top of the function. That is, unlike some other languages (such as C), a variable declared within a function is within scope throughout the function. So the compiler sees your function like this:

function logIt(){
    var text;
    console.log(text);
    text = 'inside';
} // <-- no semicolon after a function declaration

When you declare text as a local variable inside logIt, it shadows the variable in the outer scope. And when a variable is declared, it is initialized to undefined. That's why undefined gets printed.

If you want to keep text in the outer scope, just leave off the var declaration inside the function.

var text = 'outside';
function logIt(){
    console.log(text); // logs 'outside' now
    text = 'inside';
}
logIt();

Answer 3

Your placement of console.log(text) is in the wrong place :)

But seriously, this is Javascript variable hoisting. http://goo.gl/0L8h5D

This:

var text = 'outside'
logIt = function () {
  console.log(text);
  var text = 'inside';
}
logIt();

Is equivalent to this:

var text                    // hoisted to top of scope; text is undefined
text = 'outside'            // text is now assigned in place
logIt = function () {
  var text;                 // hoisted to top of scope; text is undefined
  console.log(text);        // spits out undefined
  text = 'inside';          // text is now assigned in place.
}
logIt();

To avoid these kind of issues, get in the habit of declaring all your var's at the top of a scope block.

var text = 'outside'
logIt = function() {
  var text = 'inside'
  console.log(text)
}
logIt()

If your intent was to spit out 'outside', then you should use a different identifier name inside the logIt function.

Answer 4

You are overriding the variable text. To get the answer you are looking for take away var from 4th line.

The reason is that inside the function there is a variable called text from the parent scope or global scope and you are changing it then disposing of it as you leave the function.

Answer 5

Declare the variable text once. Demo

var text = 'outside';
function logIt(){
    console.log(text);
     text = 'inside';
};
logIt();

Answer 6

Global+Local: An extra complex Case

var x = 5;

(function () {
    console.log(x);
    var x = 10;
    console.log(x); 
})();

This will print out undefined and 10 rather than 5 and 10 since JavaScript always move variable declarations (not initializations) to the top of the scope, making the code equivalent to:

var x = 5;

(function () {
    var x;
    console.log(x);
    x = 10;
    console.log(x); 
})();

from this answer What is the scope of variables in JavaScript?