What's the difference between declaring a function by itself or attaching it to window?

Question

Sorry, that title probably doesn't make much sense, but what I want to know is the difference between:

window.myfunc = function(){}

and

function myfunc(){}

With jsfiddle, the functions only seem to work when attached to window. I'm assuming this is something to do with how it's set up to read the javascript and html separately, but that there is otherwise no difference?

score 3 · Accepted Answer · answered Jul 21 '11 at 05:03

3

The first one garanties you the function is global and will available everywhere.

The second one does the same. but the second one will take the scope of the first function that embed it.

first case:

function foo()  {
   window.bar = function (){}
}
foo();
bar(); // is valid;

second case

function foo()  {
    function bar(){}
}
foo();
bar(); // will fail

i hope this makes sense now to you

answered Jul 21 '11 at 05:03

Ibu

42,752
13
76
103

What does the second one do then? – mowwwalker Jul 21 '11 at 05:05
1

That makes sense, but wouldn't the functions be global if not inside another function? – mowwwalker Jul 21 '11 at 05:17
^ that's the case with variables right, so same for functions? – mowwwalker Jul 21 '11 at 05:17

Christian C. Salvadó · Answer 2 · 2011-07-21T05:32:24.977

In the global scope, there are some subtle differences:

Function declarations are "hoisted" to the "top" of its enclosing scope, they are evaluated and initialized before the actual execution of the code starts, meaning that if you wanted, you could even use them in a point before the function definition, for example:

console.log(typeof foo); // "function"
console.log(foo());      // "bar"

function foo () {
  return "bar";
}

_{Note: If you try the above snippet in Firebug, it will show a different behavior, that's because the Mozilla implementations support functions as statements, and the Firebug evaluation is done internally, inside a try-catch block, enclose the above code in a function and it will show the described behavior.}

Assignments take place at run-time, therefore the value of foo would be available only after this takes place.

Function declarations also are bound as non-deletable properties of the lexical enviroment where they are bound, in the global scope, declarations are bound as properties of the global object, which is the top-most object at the scope chain, for example:

function foo() {
  //..
}

console.log(delete window.foo); // false
console.log(typeof foo);        // "function"

window.bar = function() {
  //..
}

console.log(delete window.bar); // true
console.log(typeof bar);        // "undefined"

score 1 · Answer 3 · edited May 23 '17 at 12:04

1

There is no difference. Except for the difference the different type of declaration has: var functionName = function() {} vs function functionName() {}

All global variables are really properties of the window object.

i.e.

g = 1;
alert(window.g);

alerts 1

edited May 23 '17 at 12:04

Community

1
1

answered Jul 21 '11 at 05:06

Ariel

25,995
5
59
69

see my answer, there is a difference – Ibu Jul 21 '11 at 05:08

score 0 · Answer 4 · answered Jul 21 '11 at 05:27

The difference (other than scope as mentioned in Ibu's answer) is when the functions become available.

Declared functions are created before any code is executed:

foo();  // no error

function foo(){}

whereas those created by an expression are only available after the code that assigns them is executed:

foo();  // error, foo is created by declaration with 'var'
        // but function hasn't been assigned yet
        // so can't call it

var foo = function (){}

 // call foo() here

Creating functions using assignment to window.funcName in the global scope is pointless and potentially harmful (the user agent may not be a browser and may not have a window object), just use a function declaration.

Inside another function, such functions should be created as properties of the global object, e.g.

(function(global) {
  global.foo = function(){}
)(this));

In a browser, global === window (there are some exceptions to that and there is no specification that says it must be so, but generally it is) but in other environments, there need not be a window object.

What's the difference between declaring a function by itself or attaching it to window?

4 Answers4