Return to Answer

// Assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
 // Let it call itself recursively:
 shortcut(n - 1);
 // ...
 // Let is pass itself as a callback:
 someFunction(shortcut);
 // ...
}

// Assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
 // Let it call itself recursively:
 shortcut(n - 1);
 // ...
 // Let it pass itself as a callback:
 someFunction(shortcut);
 // ...
}

xyz is going to be defined as usual, abc is undefined in all browsers but IE — do not rely on it being defined. But it will be defined inside its body:

If you want to alias functions on all browsers use this kind of declaration:

In this case both xyz and abc are aliases of the same object:

One compelling reason to use the combined style is the "name" attribute of function objects (not supported by IE). Basically when you define a function like this:

its name is automatically assigned. But when you define it like this:

// assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
 // let's call itself recursively:
 shortcut(n - 1);
 // ...
 // let's pass itself as a callback:
 someFunction(shortcut);
 // ...
}

Deep down JavaScript treats both statements differently. This is a function declaration:

// we can call it here
abc(); // works
// yet it is defined down there
function abc(){}
// we can call it again
abc(); // works

Also, it hoisted through return statement:

// we can call it here
abc(); // works
return;
function abc(){}

// we can't call it here
xyz(); // UNDEFINED!!!
// now it is defined
xyz = function(){}
// we can call it here
xyz(); // works

var xyz = function abc(){};
console.log(xyz.name); // prints "abc"

Personally I prefer the "function expression" declaration because this way I can control the visibility. When I define the function like that:

I know that I defined the function locally. When I define the function like that:

I know that I defined it globally providing that I didn't define abc anywhere in the chain of scopes. This style of definition is resilient even when used inside eval(). While this definition:

depends on the context and may leave you guessing where it is actually defined, especially in the case of eval() — the answer is: it depends on browser.

xyz is going to be defined as usual, abc is undefined in all browsers but Internet Explorer — do not rely on it being defined. But it will be defined inside its body:

If you want to alias functions on all browsers, use this kind of declaration:

In this case, both xyz and abc are aliases of the same object:

One compelling reason to use the combined style is the "name" attribute of function objects (not supported by Internet Explorer). Basically when you define a function like

its name is automatically assigned. But when you define it like

// Assume really.long.external.scoped is {}
really.long.external.scoped.name = function shortcut(n){
 // Let it call itself recursively:
 shortcut(n - 1);
 // ...
 // Let is pass itself as a callback:
 someFunction(shortcut);
 // ...
}

Deep down, JavaScript treats both statements differently. This is a function declaration:

// We can call it here
abc(); // Works

// Yet, it is defined down there.
function abc(){}
// We can call it again
abc(); // Works

Also, it hoisted through a return statement:

// We can call it here
abc(); // Works
return;
function abc(){}

// We can't call it here
xyz(); // UNDEFINED!!!
// Now it is defined
xyz = function(){}
// We can call it here
xyz(); // works

var xyz = function abc(){};
console.log(xyz.name); // Prints "abc"

Personally, I prefer the "function expression" declaration because this way I can control the visibility. When I define the function like

I know that I defined the function locally. When I define the function like

I know that I defined it globally providing that I didn't define abc anywhere in the chain of scopes. This style of definition is resilient even when used inside eval(). While the definition

depends on the context and may leave you guessing where it is actually defined, especially in the case of eval() — the answer is: It depends on the browser.

This is a function expression:

Also, it hoisted through return statement:

// we can call it here
abc(); // works
return;
function abc(){}

This is a function expression: