The names of functions in ES6

[2015-09-10] esnext, dev, javascript

Update 2015-12-26: Sections for two caveats: “the name of a function is always assigned at creation” and “minification”

The name property of a function contains its name:

> function foo() {}
> foo.name
'foo'

This property is useful for debugging (its value shows up in stack traces) and some metaprogramming tasks (picking a function by name etc.).

Prior to ECMAScript 6 (ES6), this property was already supported by most engines. With ES6, it becomes part of the language standard and is frequently filled in automatically.

Constructs that provide names for functions

The following sections describe how name is set up automatically for various programming constructs.

Variable declarations and assignments

Functions pick up names if they are created via variable declarations:

let func1 = function () {};
console.log(func1.name); // func1

const func2 = function () {};
console.log(func2.name); // func2

var func3 = function () {};
console.log(func3.name); // func3

But even with a normal assignment, name is set up properly:

let func4;
func4 = function () {};
console.log(func4.name); // func4

var func5;
func5 = function () {};
console.log(func5.name); // func5

With regard to names, arrow functions are like anonymous function expressions:

const func = () => {};
console.log(func.name); // func

From now on, whenever you see an anonymous function expression, you can assume that an arrow function works the same way.

Default values

If a function is a default value, it gets its name from its variable or parameter:

let [func1 = function () {}] = [];
console.log(func1.name); // func1

let { f2: func2 = function () {} } = {};
console.log(func2.name); // func2

function g(func3 = function () {}) {
    return func3.name;
}
console.log(g()); // func3

Named function definitions

Function declarations and function expression are function definitions. This scenario has been supported for a long time: a function definition with a name passes it on to the name property.

For example, a function declaration:

function foo() {}
console.log(foo.name); // foo

The name of a named function expression also sets up the name property.

const bar = function baz() {};
console.log(bar.name); // baz

Because it comes first, the function expression’s name baz takes precedence over other names (e.g. the name bar provided via the variable declaration):

However, as in ES5, the name of a function expression is only a variable inside the function expression:

const bar = function baz() {
    console.log(baz.name); // baz
};
bar();
console.log(baz); // ReferenceError

Methods in object literals

If a function is the value of a property, it gets its name from that property. It doesn’t matter if that happens via a method definition (line A), a traditional property definition (line B), a property definition with a computed property key (line C) or a property value shorthand (line D).

function func() {}
let obj = {
    m1() {}, // (A)
    m2: function () {}, // (B)
    ['m' + '3']: function () {}, // (C)
    func, // (D)
};
console.log(obj.m1.name); // m1
console.log(obj.m2.name); // m2
console.log(obj.m3.name); // m3
console.log(obj.func.name); // func

The names of getters are prefixed with 'get', the names of setters are prefixed with 'set':

let obj = {
    get foo() {},
    set bar(value) {},
};
let getter = Object.getOwnPropertyDescriptor(obj, 'foo').get;
console.log(getter.name); // 'get foo'

let setter = Object.getOwnPropertyDescriptor(obj, 'bar').set;
console.log(setter.name); // 'set bar'

Methods in class definitions

The naming of methods in class definitions is similar to object literals:

class C {
    m1() {}
    ['m' + '2']() {} // computed property key

    static classMethod() {}
}
console.log(C.prototype.m1.name); // m1
console.log(new C().m1.name); // m1

console.log(C.prototype.m2.name); // m2

console.log(C.classMethod.name); // classMethod

Getters and setters again have the name prefixes 'get' and 'set', respectively:

class C {
    get foo() {}
    set bar(value) {}
}
let getter = Object.getOwnPropertyDescriptor(C.prototype, 'foo').get;
console.log(getter.name); // 'get foo'

let setter = Object.getOwnPropertyDescriptor(C.prototype, 'bar').set;
console.log(setter.name); // 'set bar'

Methods whose keys are symbols

In ES6, the key of a method can be a symbol. The name property of such a method is still a string:

If the symbol has a description, the method’s name is the description in square brackets.
Otherwise, the method’s name is the empty string ('').

const key1 = Symbol('description');
const key2 = Symbol();

let obj = {
    [key1]() {},
    [key2]() {},
};
console.log(obj[key1].name); // '[description]'
console.log(obj[key2].name); // ''

Class definitions

Remember that class definitions create functions. Those functions also have their property name set up correctly:

class Foo {}
console.log(Foo.name); // Foo

const Bar = class {};
console.log(Bar.name); // Bar

Default exports

All of the following statements set name to 'default':

export default function () {}
export default (function () {});

export default class {}
export default (class {});

export default () => {};

Other programming constructs

Generator functions and generator methods get their names the same way that normal functions and methods do.
new Function() produces functions whose name is 'anonymous'. A webkit bug describes why that is necessary on the web.

func.bind(···) produces a function whose name is 'bound '+func.name:

function foo(x) {
    return x
}
const bound = foo.bind(undefined, 123);
console.log(bound.name); // 'bound foo'

Caveats

Caveat: the name of a function is always assigned at creation

Function names are always assigned during creation and never changed later on. That is, JavaScript engines detect the previously mentioned patterns and create functions that start their lives with the correct names. The following code demonstrates that the name of the function created by functionFactory() is assigned in line A and not changed by the declaration in line B.

function functionFactory() {
    return function () {}; // (A)
}
const foo = functionFactory(); // (B)
console.log(foo.name.length); // 0 (anonymous)

One could, in theory, check for each assignment whether the right-hand side evaluates to a function and whether that function doesn’t have a name, yet. But that would incur a significant performance penalty.

Caveat: minification

Function names are subject to minification, which means that they will usually change in minified code. Depending on what you want to do, you may have to manage function names via strings (which are not minified) or you may have to tell your minifier what names not to minify.

Changing the names of functions

These are the attributes of property name:

> let func = function () {}
> Object.getOwnPropertyDescriptor(func, 'name')
{ value: 'func',
  writable: false,
  enumerable: false,
  configurable: true }

The property not being writable means that you can’t change its value via assignment:

> func.name = 'foo';
> func.name
'func'

The property is, however, configurable, which means that you can change it by re-defining it:

> Object.defineProperty(func, 'name', {value: 'foo', configurable: true});
> func.name
'foo'

If the property name already exists then you can omit the descriptor property configurable, because missing descriptor properties mean that the corresponding attributes are not changed.

If the property name does not exist yet then the descriptor property configurable ensures that name remains configurable (the default attribute values are all false or undefined).

The function property `name` in the spec

The spec operation SetFunctionName() sets up the property name. Search for its name in the spec to find out where that happens.
- The third parameter of that operations specifies a name prefix. It is used for:
  - Getters and setters (prefixes 'get' and 'set')
  - Function.prototype.bind() (prefix 'bound')
Anonymous function expressions not having a property name can be seen by looking at their runtime semantics:
- The names of named function expressions are set up via SetFunctionName(). That operation is not invoked for anonymous function expressions.
- The names of function declarations are set up when entering a scope (they are hoisted!).
When an arrow function is created, no name is set up, either (SetFunctionName() is not invoked).

Suport for the `name` property in engines

In Kangax’ ES6 table, you can see that no engine currently fully supports name, not even Babel. Thus, the code in this blog post shows how things should be, not how they are in any single engine.

Further reading: “Callable entities in ECMAScript 6” in “Exploring ES6”.

The names of functions in ES6

Constructs that provide names for functions #

Variable declarations and assignments #

Default values #

Named function definitions #

Methods in object literals #

Methods in class definitions #

Methods whose keys are symbols #

Class definitions #

Default exports #

Other programming constructs #

Caveats #

Caveat: the name of a function is always assigned at creation #

Caveat: minification #

Changing the names of functions #

The function property name in the spec #

Suport for the name property in engines #