Function names

Confusingly, functions have names, and these names are not the same as the variables or properties that we assign to functions. The name of a function is within its syntax, prior to its parentheses:

function nameOfTheFunction() {}

You can access a function's name via its name property:

nameOfTheFunction.name; // => "nameOfTheFunction"

When you define a function via the function declaration syntax, it'll assign that function to a local variable of the same name, meaning that we can reference the function as we would expect:

function nameOfTheFunction() {}
nameOfTheFunction; // => the function
nameOfTheFunction.name; // => "nameOfTheFunction"

Method definitions will also assign the method to a property name that is equal to the function name:

function nameOfTheFunction() {}
nameOfTheFunction; // => the function
nameOfTheFunction.name; // => "nameOfTheFunction"

You may be thinking this all seems incredibly intuitive. And it is. It makes perfect sense that the names we give our functions and methods are themselves used to dictate what variable or property those things will be assigned to. Oddly, though, it is also possible to have named function expressions, and these names do not cause such an assignment. The following is an example of this:

const myFunction = function hullaballoo() {}

The const name here, myFunction, dictates what we will use in subsequent lines to reference the function. However, the function technically has a name of "hullaballoo":

myFunction; // => the function
myFunction.name; // => "hullaballoo"

If we try to reference the function via its formal name, we will get an error:

hullaballoo; // !! ReferenceError: hullaballoo is not defined

This can seem odd. Why is it possible to give a function a name if that name itself is not used to refer to the function? This is a mixture of legacy and convenience. One hidden feature of the named function expression is that the name is actually available to you to reference the function, but only inside the scope of the function itself:

const myFunction = function hullaballoo() {
hullaballoo; // => the function
};

This can be useful in situations where you want to supply an anonymous callback to some other function but still be able to reference your own callback for any repeated or recursive calls, like so:

[
['chris', 'smith'],
['sarah', ['talob', 'peters']],
['pam', 'taylor']
].map(function capitalizeNames(item) {
return Array.isArray(item) ?
item.map(capitalizeNames) :
item.slice(0, 1).toUpperCase() + item.slice(1);
});

// => [["Chris","Smith"],["Sarah",["Talob", "Peters"]],["Pam","Taylor"]]

So, even though the named function expression is an odd thing, it does have its merits. In usage, however, it's best to take into consideration the clarity of your code for people who might not know of these idiosyncratic behaviors. This does not mean avoiding it altogether, but just being ever more mindful of the readability of your code when using it.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset