javaScript hoisting not working properly

Question

These are 2 examples which must have attained same result:

Example 1

<script>
console.log(a);
var a = 10;
console.log(a);
</script>

Rendered

<script>
var a = "";
console.log(a); //will result undefined
a = 10;
console.log(a); //will result 10
</script>

Result

undefined 
10

Example 2

<script>
console.log(a);
a = 10;
console.log(a);
</script>

Expectation of Rendering

<script>
var a = "";
console.log(a); //should result undefined 
a = 10;
console.log(a); //should result 10
</script>

Result

Now, as per JS Hoisting in Scenario 2, the variable if not declared must have been automatically declared onto top of its scope and still result should have been the same. Why is it not? Where is the concept failed?

Just put `var a = 10` and you'll get what you expect. `a = 10` is not the same of `var a = 10`: http://stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-to-use-it-or-omit-it — Gerardo Furtado, Aug 27 '16 at 14:18

trincot · Accepted Answer · 2016-08-27T15:07:20.040

The second case is different, because

a = 10

... does not declare a hoisted variable. It creates a property in the window object (even if the code would have been inside a function). This is not a declaration, and thus something that is not hoisted. So before you create that property, it does not exist.

Note that what you listed as rendered code is not entirely correct. A hoisted variable does not get a value, so for your first example it should look like this:

var a; // undefined!
console.log(a); // will output undefined
a = 10;
console.log(a); // will output 10

Note that if this code is not part of a function body, var a also creates the window.a property, and this happens at the hoisted declaration.

And for your second example, the rendered code could look like this

console.log(a); // Error: does not exist. 
window.a = 10;
console.log(a); // will output 10

score 3 · Answer 2 · answered Aug 27 '16 at 14:21

3

JavaScript hoists declarations, not initializations, see this page.

If you add a 'var a;' somewhere in your second example, it should work fine!

answered Aug 27 '16 at 14:21

patrickb

422
2
9

The first phrase hits the nail on the head. Well put! – trincot Aug 27 '16 at 15:08

rafaelbiten · Answer 3 · 2016-08-27T14:57:03.250

1

On example 2, at the time you run the first console log, a is really undefined.

a = 10 sets a new property a to the window object and there's no 'hoisting' when setting a property to an object that already exists.

edited Aug 27 '16 at 14:57

answered Aug 27 '16 at 14:20

rafaelbiten

6,074
2
31
36

score -1 · Answer 4 · answered Jan 08 '22 at 17:19

when we will execute a source code .IN hoisting, The declaration variable goes over console.log().Then the variable allowcated a memory but does not access it. When I declaration a variable in memory. Then we give by default undefined value in place of that variable. (as like ,in html,place Holder works like this. --- So you have not declared any variable. Hosting will not work here. --- Can't access a here..Because when you define a variable. Then you must be defined a variable.here u can not make variable so output: cannot access a

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 08 '22 at 20:29

javaScript hoisting not working properly

4 Answers4