The names of functions in ES6

By -

Update 2015-12-26: Sections for two caveats: “the name of a function is always assigned during 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 during 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'

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.

  • 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”.



Comments

Post a Comment

Popular posts from this blog

Steve Lopez and the Importance of Newspapers

By -
Image
It has been one year since I cancelled my subscriptions to The New York Times and the Los Angeles Times . In that time, I continued to read both publications online. My assessment of this experiment is that reading newspapers and journalism online is vastly inferior to the hard copy thrown on my porch each morning. So I restarted my subscription to the Los Angeles Times and I have made it a point to buy The New York Times as often as I pass one of those coin boxes or my local news stand. The catalyst for this re-evaluation resulted from catching the film, The Soloist on cable last week. I liked the movie, although the scenes I found most interesting were the ones that showed columnist Steve Lopez at work. I realized the book was sitting in my “to-read” stack, so I pulled it and began reading. The book, as I expected, is better than the film. Lopez clearly addresses the revolution occurring in journalism, and worries about his future with the paper even as he researches and writes
Keep reading

A Treasure Hunt Without The Treasure

By -
Image
I have written previously on LocalSchoolDirectory.com about a former student of mine lost in community college hell. Such is the educational reality in America these days that one must wade through a lot of crap to get to a decent university and a desired program of study. This is the case for Elda , a student much too smart for her particular ring of Dante’s Inferno . However, she hasn’t allowed her woefully deficient education experience to damage her sharp sense of humor. Logging on the other night, I found her latest rant lodged in my inbox. A new semester brings yet more grievances from the land of allegedly higher education. She listed her most pressing pet peeves: “Expensive college textbooks that are assigned merely because the professor must assign a book or is too lazy to make his own multiple choice exams and thus, I must go buy a $200 book for a class I have already taken in high school.” “Taking a class I have already taken in high school because a 3 on the AP exam is n
Keep reading

Drop a ping-pong ball in the clown’s mouth

By -
Image
I've always looked upon Nigel Farage as an English amusement. He reminds me of rows of fair-ground clowns that amused me greatly as a child in Australia. The heads swivelled constantly to the left and the right, and the trick consisted of guessing the exact moment to drop your ping-pong ball down the clown's throat, so that it ended up falling into the right spot and winning something. Today, I don't think the prize would justify my efforts. On the other hand, the ping-pong ball might shut up Farage.
Keep reading