变量对象中的函数声明

Question

test(); //working

function test(){//do something}

Is this related to (global)variable object? Does the function push to variable object before execution process start?

UPDATE: Ok my real question is how "hoist" work. To understand you need to take a look at execution context of javascript ,and yes it related to variable object(which is part of execution context).

Answer 1

See the Scope Cheatsheet on MDN

function foo() { } hoists foo to the top of scope automatically

Is this related to (global)variable object? Does the function push to variable object before execution process start?

Nope, it's just hoisting.

---

Consider this example:

foo();
// ReferenceError: foo is not defined

(function(){
  foo();
  function foo (){
    console.log("A");
  };
})();
// A

(function(){
  foo();
  function foo (){
    console.log("B");
  };
})();
// B

foo();
// ReferenceError: foo is not defined

Hoisting just "lifts" the variable name to the top of the scope.

---

My opinion:

I never write functions as:

function foo() { ... }

I prefer being explicit because magic behavior sucks; I always write functions as

var foo = function() { ... }

If I feel like the function needs a name, I will give it a name, but still define with var

var foo = function foo() { ... }

---

@bfavaretto raises a valid concern:

About your opinion... var foo = function() { ... } also hoists foo to the top, but with an undefined value. So there's implicit stuff going on there too

True, it does hoist foo with an undefined value, but things will all work as desired.

foo();
// TypeError: undefined is not a function
// This is good. We don't want the above function to run like that.
// This is a fatal error; the script won't even continue to run as-is.
// Comment out the above line to get it to run.

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

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

// Even with the same function name, these two functions will
// output the correct values.
foo();  // foo
foo2(); // foo2

All of that said, it would be silly to have two functions with the same name identifier in the same scope. But, even if you do make a mistake and write bad code like that, if you're using function expressions as described above, the code would still work anyway. If you just used named functions like in the original question, it certainly will not.

Answer 2

I think you are talking about Hoisting here. I always prefer labeled function instead of function expression.

this is a function expression:

//Declaration 1
var foo = function(){

// code goes here
}

• The func expression in this case is anonymous but assigned to a var foo. for reference

This is a labeled function :

//Declaration 2
function foo(){
 // same code here
 }

• There's not really any great reason to do expression to var. You should always try to use labeled statements for constructors,so you can identify an object's 'type' via its constructor.

• people mostly use this where hoisting is needed. Hoisting simply means calling something before it is defined .

  Very very simple example :

   foo(); // alerts 'hello' function foo() {alert('hello');} V/s foo(); // throws an error since foo is undefined var foo = function() {alert('hello');} 

REFER: var functionName = function() {} vs function functionName() {}