would var declaration (such as var x;) overwrite previous value

user_8322953 0
Viewed 130

I am learning the hoisting concept in javascript. One piece of code which blocked me is this:

function foo() {
  console.log(8);
}

var foo;

console.log(foo);

Question 1: I typed in this code in chrome console, print out is 

function foo(){
    console.log(8)
}

would the variable declaration overwrite the function declaration? I think the print out should be undefined

Question 2: I typed in the same code in an online editer https://jsbin.com/dezixozewi/edit?js,console, it throws error as 'Identifier 'foo' has already been declared'. so it does not allow duplicate declaration at all.

Could any one help to explain the logic behind? Thanks a lot in advance!

function variables javascript
4 Answers

The reason the function is the value of foo is because in this line:

var foo;

You're just stating foo - that's a statement that doesn't do anything.

If you actually set foo to something, for example "FooBar":

function foo() {
  console.log(8);
}

var foo = "FooBar";

console.log(foo);

It overwrites the function, because as shown in this question, declaring anything with var that is a value will result in that value being "hoisted" to the top, and as such being the actual value of the identifier.

user_102217650

would the variable declaration overwrite the function declaration?

No. Before any code is executed, the runtime finds all function and variable declarations and initializes the new scope with them. Things vary slightly between evaluating script code and evaluating function scope, but the result is the same:

  • Duplicate declarations are ignored.
  • Function declaration are evaluated at the end and assigned to their respective name.

In global scope, because foo is both a function name as well as a variable declaration, the variable declaration is ignored. And since it doesn't have an initializer, the value of foo doesn't change when that line is actually evaluated.

The details can be found in the language specification.

Question 2: I typed in the same code in an online editer https://jsbin.com/dezixozewi/edit?js,console, it throws error as 'Identifier 'foo' has already been declared'. so it does not allow duplicate declaration at all.

Unclear how jsbin evaluates the code, but it is valid.

user_2181960

var foo; simply points to the memory location of foo. It happens that you've already declared a function there, so that's why the value of foo is just still the function.

It's no different than if you did:

var x = 2;
var x; // We're not setting a value with `=`, so nothing gets overridden 
x; // 2
user_25182310

var foo; statement declares foo variable and set it's value to undefined if it already has not a value. Your foo has a value, since the var foo; actually doesn't do anything.

If you remove the foo function and replace it with a simple variable, you will see the same behaviour.

user_32353440
Related