3

I came across the following article about variable hoisting in javascript. The article sums up the following three points. 

1. All declarations, both functions and variables, are hoisted to the top of the containing scope, before any part of your code is executed.
2. Functions are hoisted first, and then variables.
3. Function declarations have priority over variable declarations, but not over variable assignments.

Site Point

var showState = function() {
  console.log("Idle");
};

function showState() {
  console.log("Ready");
} 

showState();

I understood that the code is interpreted by the javascript engine as 

function showState() { // moved to the top (function declaration)
    console.log("Ready");
}

var showState; // moved to the top (variable declaration)
showState = function() { // left in place (variable assignment)
    console.log("Idle");
};

showState();

But, I couldn't get the meaning of the third point in the summary. Can anyone care to explain the third point? What is the meaning of the third point?

According to the explanation of the third point, the following snippet should return 8, function bar(). But it says undefined, function bar().

console.log(foo);
console.log(bar);
var foo = 8;
function bar() {
    console.log("bar");
}
Improve this question
6
  • In your case, the point #3 would mean that the variable assignment statement var foo would be hoisted BEFORE your function bar() gets hoisted. so in reality your interpreted code would be var foo; function bar() if you didn't have assignment statement, it would have been function bar(); var foo Commented Sep 18, 2015 at 6:59
  • Isn't foo = 8; the variable assignment and var foo; the variable declaration part? Commented Sep 18, 2015 at 7:00
  • Can you explain why is it so? For functions to have precedence there is a meaning I think, as they might be used. Commented Sep 18, 2015 at 7:01
  • @AdityaParab Does it mean that it is applicable for the function expressions as well? As it also has assignment. Commented Sep 18, 2015 at 7:03
  • I am not sure why this rule is implemented by the JS engines. I am just making a wild guess based on my experience developing js code. In a neatly maintainable code, the developers are encouraged to expose methods to outside world - not the variables. And since it's the methods we are exposing we can not afford to get undefined outside. :) I sincerely believe this is the reason behind why functions take priority over uninitialized variables. Commented Sep 18, 2015 at 7:13

3 Answers 3

Reset to default
2

From the article you link to:

In the code above we saw that the function declaration takes precedence over the variable declaration. And in the next example we’ll see that when we have function declaration versus variable assignment, the last takes priority.

var showState = function() {
  console.log("Idle");
};

function showState() {
  console.log("Ready");
} 

showState();            // output: Idle

A function declaration does two things:

  1. It declares a variable with the same name as the function
  2. It assigns the function to that variable

Both of these are hoisted, not just the variable declaration. (This is unlike var statements with an associated assignment where only the declaration is hoisted).

This means that despite the = function() { code being first, the later function declaration still runs first so = function() { can overwrite it.

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

11 Comments

@Quentin var showState; showState = function() { console.log("ready"); }; showState = function() { console.log("Idle"); }; showState(); Is this what has happended internally?
@BRS — Since there are other differences between function expressions and function declarations: not really.
@Quentin Is the following correct understanding for function expressions? var showState; function showState() { console.log("Ready"); } showState = function() { console.log("Idle"); }; showState(); and for variable assignments the following var foo; function bar() { console.log("bar"); } console.log(foo); console.log(bar); foo = 8;
@BRS No, the correct interpretation is function showState(){console.log("Ready");}; var showState; showState = function(){console.log("Idle");}; showState();
@BRS In this case variable showState is getting overridden by that assignment.
|
0

Your last example is interpreted as

function bar() {
    console.log("bar");
}    
var foo;

console.log(foo); // here 'foo' is undefined
console.log(bar); // bar is of type function
foo = 8;
Improve this answer

8 Comments

It should have been the following right? As the assignment takes precedence? var foo; function bar() { console.log("bar"); } console.log(foo); console.log(bar); foo = 8;
No, function bar is declared first then foo is declared.
:) Then what is the point of third statement in the summary of the article? Is it incorrect?
Care to check the first comment of the question by Aditya? Thanks.
@BRS No it's correct. User Quentin has explained why.
|
-1

Basically - lets say we have, in no particular order 

function hello(){};
var sup;
var yo = 4;

with variable hoisting the order would become 

    var yo = 4;
    function hello(){};
    var sup;

because the var assignment has priority over the function, which has priority over the function declaration.

Improve this answer

1 Comment

console.log(typeof hello); console.log(typeof yo); console.log(typeof sup); function hello() {} var yo = 4; var sup; produces function, undefined, undefined. But according to you second one should be a number right?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.