2

As I was reading this article about javascript patterns/anti patterns-

Then - I saw this part : 

// named function expression + 'F'
//     Benefits:
//     1. Get's rid of (anonymous function) in stack traces
//     2. Recurse by calling the name + 'F'
//     3. Doesn't break an IE (well, unless there's a function name collision of the                               sort described here: https://github.com/jashkenas/coffee-script/issues/366#issuecomment-242134)


 var getData = function getDataF () {}; //<----- notice ends with F

As opposed to the prev example : 

 var getData = function getData () {};

Question :

What is this thing with functions ending with F ? IS there really differnce if function ends with F or not (according to the article , there is)? what is the official name for this psotfix with F?

In short : https://i.sstatic.net/NwvWa.jpg

edit

I didnt see that the variable name is the same as the function name which is apprently what they wanted to say...

Improve this question
3
  • @dystroy they distinguish between myfunc vs myfuncF that's what the question is actually about. ( removed the word syntax as it probably confusing) Commented Mar 19, 2014 at 9:49
  • What's your question exactly ? If there's a difference ? Yes there is. Commented Mar 19, 2014 at 9:50
  • @dystroy My question is well designed and asked. What is the formal name for this "F" postfix thing ? didn't find in google Commented Mar 19, 2014 at 9:51

3 Answers 3

Reset to default
1

Hard to debug, because it's an anonymous function and no function name appears in the stack trace (e.g. Firebug):

var getData = function () {
};

Better to debug, because the function name appears in the stack trace, but this breaks IE because the function has the same name as the variable:

var getData = function getData () {
};

Better to debug, because the function name appears in the stack trace, and IE won't break because the function has not the same name as the variable. The downside is, the variable has another name as the function (might be confusing). Instead of the "F" you could use any other character (but it's better to always use the same character to avoid confusion):

var getData = function getDataF () {
};
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

allow me to empesize !
0

This names the function (more formally, it gives it an identifier which could also be called from the scope of the function) :

var getData = function getDataF () {
  throw 48;
}

It makes a difference when the functions is passed as value :

var getData = function () { throw 48; }
getData.call();
// ==> "getData" in the stack trace

var getData = function () { throw 48; }
(getData).call();
// ==> "anonymous function" in the stack trace

var getData = function getDataF () { throw 48; }
(getData).call();
// ==> "getDataF" in the stack trace

It also allows the function to be called from its own scope. This is frequently used for recursions. Instead of

function dive(i){
  console.log(i);
  if (--i) dive(i);
}
dive(3);

You can do 

function dive(i){
  console.log(i);
  if (--i) dive(i);
})(3);

which is cleaner and doesn't pollute the external scope.

Improve this answer

4 Comments

no. that's not what they meant. you didnt see the article as the former example already explains that
@RoyiNamir Your question is really really unclear. What don't you understand in the "article" ?
I dont think my question is unclear. I think it's very clear. apprently they distinguish between 2 situations. look at the image above ^^.
You wont believe it. I just saw that the variable name is the same as the function name. clearly this is what they wanted to show. ( and to warn)... dont you think I already knew the unnamed function vs named function ? :-)
0

There is no difference between var getData = function getData () or var getData = function getDataF (), both are named function expressions. The good thing about this pattern is.

  1. It provides you visibility on the callstack during debugging because name property of the function object will be set.

  2. It provides you the ability to recurse because using the name property you can call the same function recursively via the inner scope of the functions e.g

    function faa() {} // declaration

    var baa = function () {}; // expression

    var caa = function caa() {}; // named expression

    faa.name; // "faa"

    baa.name; // ""

    caa.name; // "caa"

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.