JavaScript Variable hoisting without functions

Question

Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting; 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.

Now in my (actually it's a code snippet from W3Schools on the same subject) code I am not using functions:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript index</title>
</head>
<body>

<p id="demo"></p>

<script>
    x = 5; // Assign 5 to x

    elem = document.getElementById( "demo" ); // Find an element 
    elem.innerHTML = x;                     // Display x in the element

    var x; // Declare x

    alert( x );
</script>

</body>
</html>

The result of alert() is 5. Why isn't it undefined. From my understanding the line var x should be hoisted to the top and alert() should display undefined.

I read some more about this from: http://code.tutsplus.com/tutorials/javascript-hoisting-explained--net-15092

What am I not getting?

"var x should be hoisted to the top" --- and then it's initialized with 5 — zerkms
– zerkms, Commented Jan 26, 2015 at 23:44
What makes you think that the alert() would show undefined? I don't follow your reasoning. — Pointy
– Pointy, Commented Jan 26, 2015 at 23:45
“I am assigning a value to a variable – and then I am wondering that later it has that value …” – seriously? — C3roe
– C3roe, Commented Jan 26, 2015 at 23:46
@CBroe what if OP came from the quantum computers future (to save us from using JS)? — zerkms
– zerkms, Commented Jan 26, 2015 at 23:47
I was thinking that when hoisting happens with late declarations the initializations were wiped out. — Robert
– Robert, Commented Jan 26, 2015 at 23:49

Pointy · Accepted Answer · 2015-01-26 23:50:18Z

3

Your var x statement is hoisted to the top. Therefore the assignment to x happens after it's declared, and before the alert().

The sample code in your linked reference that may be throwing you off is this:

var myvar = 'my value';

(function() {
  alert(myvar); // undefined
  var myvar = 'local value';
})();

That example is different from yours in this essential way: the initialization of the variable involved happens after the alert(), not before. When a var declaration is hoisted, the only part that's hoisted is the declaration itself, not the initialization. That little function above is interpreted as if it were written:

var myvar = 'my value';

(function() {
  var myvar;
  alert(myvar); // undefined
  myvar = 'local value';
})();

Your code has x = 5 right up at the top, so it's not the same situation.

edited Jan 26, 2015 at 23:50

answered Jan 26, 2015 at 23:44

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Over a year ago

Doesn't the initialization happen before? Your first paragraph states: Therefore the assignment to x happens after it's declared, and before the alert(). But then you state: the initialization of the variable involved happens after the alert(), not before. That kind of throws me off.

Felix Kling Over a year ago

@samyismyhero: Pointy is talking about two different examples. In your example the assignment happens before the alert, in his example the assignment happens after the alert. Also note that multiple variable declarations don't impact each other. Once a variable is declared, further declarations are ignored. I.e. var foo = 3; var foo = 5; is equivalent to var foo; foo = 3; foo = 5 and var foo = 3; var foo; is equivalent to var foo; foo = 3;.

Collectives™ on Stack Overflow

JavaScript Variable hoisting without functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related