FunctionsMustBeNamed
DRAFT

Misconception:

A variable is needed to define a new function or a name must be provided in the function’s definition.

Incorrect

Every function definition requires an associated name

Correct

One can define a function without associating a name to it

Correction
Here is what's right.

Naming a function

In JavaScript a function has a name if the value of the property name inside the function object is different from "" (empty string). It is not necessary for a function to have a name, in which case we call them anonymous functions.

It is possible to bind the name of a function in two different ways:

  • In the function declaration statement by providing any valid identifier:

      function foo() {};  // function declaration => name: "foo"
  • During an assignment statement or a object property declaration if the function is defined in the right-hand-side of the assignment:

      // named function expressions
      const foo = function(){};         // name: "foo"
      { foo: function(){} }; // name: "foo"
    
      // named arrow function expressions
      const foo = () => {};             // name: "foo"
      { foo: () => {} };     // name: "foo"

Anonymous functions can only be defined in function expressions:

// anonymous function expressions
(function(){})   // name: ""

// anonymous arrow function expressions
(() => {})       // name: ""

Trying to define an anonymous function in a function declaration throws a syntax error:

function (){} // Throws an error: Function statements require a function name

Naming functions is not necessary, but it can be useful to get more precise stack traces if an error occurs at runtime. The name property bound inside the function object is reported in the trace, making it possible to immidiately identify which function is failing.

This is especially useful in asynchronous code execution and debugging, where functions are not necesserely called in sequence and it can be difficult to be aware which functions executed before the failure.

Difficult cases

Binding a name in the assignment statement AND in the function expression

The name of a function is bound to the function in an assignment statement only if the function was anonymous. When a function is declared in a statement and a name was already bound in the function expression, the name does not change:

Declaration vs. expression

When a function is assigned to a variable and the name function expression binds a name to it, the function is not declared in the current closure of the execution:

Providing a name in the right-hand-side expression of a statement does not declare the function in the context, thus it cannot be invoked with its own name.

The property name cannot be changed

The name property is read-only and cannot be changed at runtime by the assignment operator:

Bound functions

The name property of a bound function is set to "bound " plus the function name:

Stay up-to-date

Follow us on  twitter to hear about new misconceptions.