CODEWITHSUNDEEP
javascriptfunctiondeclaration
Rad Haring
Rad Haring

Reputation: 925

mixing javascript function declaration styles

Consider two styles of javascript function declarations (out of four, I think):

function foo() {
    // ...
}

versus

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

In many circumstances these will behave the same, and I think I grok the main difference as explained in e.g. these SO questions:

difference-between-var-foo-function-and-function-foo

usual-functions-vs-function-variables-in-javascript

which both have answers linking to this very helpful explanation:

javascript-function-declaration-ambiguity

But I would like to combine both styles in one statement; one short/minifiable local variable name (because I will need to refer to it quite often) and one descriptive name (I want to get something friendly out of .name).

This is where I get confused. It is as if the act of immediately assigning the function to a variable leaves it undefined under its own name:

var f = function foo() {
    // ...
};
console.log( f.name );   // "foo"
console.log( foo.name ); // !? error: foo is not defined ?!

So to get to the question: why does this not work? Or, more likely, what might I still be misunderstanding about these two declaration styles?

Note, that the following does not result in an error:

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

How, exactly, is this different?

PS: I think this is different from this SO question:

in-javascript-what-is-the-motivation-or-advantage-of-using-var-foo-function-f...

which is about a special case of my predicament, where the variable name and function name are the same, i.e.

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

Upvotes: 1

Views: 686

Answers (2)

webduvet
webduvet

Reputation: 4292

This is how I see it. Every function in javascript inherits from Function object and Function object has property .name.

this creates the function object with the name foo in the global space:

function foo(){}

this creates local anonymous(thus no name) function and assigns is to the variable f which lives in global space:

var f = function(){}

this creates the function object and assigns it to variable, it doesn't exist in global context, only local to f, the same as above, but assigns the name foo:

var f = function foo(){}

edit: for better picture consider following

(function foo(){console.log("executing foo")})();
(function(){console.log("executing anonymous")})();

are both function(objects) in global context - first with name, second without name. If they are created in variable it works the same just context is different.

Upvotes: 1

Barmar
Barmar

Reputation: 781004

When you write

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

the scope of foo is just the body of the function, not the enclosing function. This is mainly useful for creating anonymous recursive functions.

whats the difference between function foo(){} and foo = function(){}?

recommends against using that notation, because they don't work correctly in some implementations.

Upvotes: 1

Related Questions