CODEWITHSUNDEEP
javascriptfunctionvariables
Gaoyan
Gaoyan

Reputation: 53

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

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!

Upvotes: 3

Views: 315

Answers (4)

Matthew Herbst
Matthew Herbst

Reputation: 32043

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

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 817128

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.

Upvotes: 1

saman.shahmohamadi
saman.shahmohamadi

Reputation: 485

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.

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44145

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.

Upvotes: 2

Related Questions