Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
99
rated 0 times [  102] [ 3]  / answers: 1 / hits: 32704  / 11 Years ago, mon, march 11, 2013, 12:00:00

We have two different way for doing function expression in JavaScript:



Named function expression (NFE):



var boo = function boo () {
alert(1);
};


Anonymous function expression:



var boo = function () {
alert(1);
};


And both of them can be called with boo();. I really can't see why/when I should use anonymous functions and when I should use Named Function Expressions. What difference is there between them?


More From » function

 Answers
14

In the case of the anonymous function expression, the function is anonymous — literally, it has no name. The variable you're assigning it to has a name, but the function does not. (Update: That was true through ES5. As of ES2015 [aka ES6], often a function created with an anonymous expression gets a true name [but not an automatic identifier], read on...)



Names are useful. Names can be seen in stack traces, call stacks, lists of breakpoints, etc. Names are a Good Thing™.



(You used to have to beware of named function expressions in older versions of IE [IE8 and below], because they mistakenly created two completely separate function objects at two completely different times [more in my blog article Double take]. If you need to support IE8 [!!], it's probably best to stick with anonymous function expressions or function declarations, but avoid named function expressions.)



One key thing about a named function expression is that it creates an in-scope identifier with that name for the function within the functon body:





var x = function example() {
console.log(typeof example); // function
};
x();
console.log(typeof example); // undefined





As of ES2015, though, a lot of anonymous function expressions create functions with names, and this was predated by various modern JavaScript engines being quite smart about inferring names from context. In ES2015, your anonymous function expression results in a function with the name boo. However, even with ES2015+ semantics, the automatic identifier is not created:





var obj = {
x: function() {
console.log(typeof x); // undefined
console.log(obj.x.name); // x
},
y: function y() {
console.log(typeof y); // function
console.log(obj.y.name); // y
}
};
obj.x();
obj.y();





The assignment fo the function's name is done with the SetFunctionName abstract operation used in various operations in the spec.



The short version is basically any time an anonymous function expression appears on the right-hand side of something like an assignment or initialization, like:



var boo = function() { /*...*/ };


(or it could be let or const rather than var), or



var obj = {
boo: function() { /*...*/ }
};


or



doSomething({
boo: function() { /*...*/ }
});


(those last two are really the same thing), the resulting function will have a name (boo, in the examples).



There's an important, and intentional, exception: Assigning to a property on an existing object:



obj.boo = function() { /*...*/ }; // <== Does not get a name


This was because of information leak concerns raised when the new feature was going through the process of being added; details in my answer to another question here.


[#79681] Saturday, March 9, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
aidan

Total Points: 72
Total Questions: 95
Total Answers: 121

Location: Uzbekistan
Member since Sat, Feb 27, 2021
3 Years ago
;