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

Ideas for fixing unconnected computing

By -
I traveled quite a bit recently and got exposed to a negative aspect of current technology: Things work well if you have a solid internet connection with no traffic limits and are plugged into a power outlet. Otherwise, things do not work well at all. This blog post describes the problems that arise and suggests solutions. Managing data traffic Cell phones are quite good at conserving traffic, laptops much less so. This becomes a problem when your laptop has a mobile connection (e.g., via tethering or in a hotel with data caps). I once accidentally started iTunes in such a situation and immediately used up my daily allowance of traffic. Similarly, mobile email is frugal with traffic (only the current folder is updated, attachments are only downloaded on demand, etc.), desktop email is usually not. How can this be handled better? I’d like to see three traffic modes for all operating systems: “full”, “restricted”, “minimal”: In full traffic mode , all data transfers are allowed and happe...
Keep reading

Omar to kill me

By -
Image
  The sentence “ Omar m’a tuer ” is unintelligible French, as if it had been written by an illiterate person. At first sight, Mme Ghislaine Marchal —the author of those words in blood—seems to be saying that she had been killed by Omar in her villa at Mougins (Alpes-Maritimes). But why would that dying French lady have used such poor grammar? On that flimsy evidence, in 1991, the Moroccan gardener Omar Raddad was condemned and jailed. But he persisted non-stop upon his innocence. In 1998, he was liberated, and now lives in Morocco. A recent analysis of DNA specimens from the scene of the crime provides new facts. Four males, none of whom was Omar Raddad, have left traces of their presence. Will the real murderer be identified at last?
Keep reading