Function: displayName
=====================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The optional **`displayName`** property of a `Function` instance specifies the display name of the function.

Value
-----

The `displayName` property is not initially present on any function — it's added by the code authors. For the purpose of display, it should be a string.

Description
-----------

The `displayName` property, if present, may be preferred by consoles and profilers over the `name` property to be displayed as the name of a function.

Among browsers, only the Firefox console utilizes this property. React devtools also use the `displayName` property when displaying the component tree.

Firefox does some basic attempts to decode the `displayName` that's possibly generated by the anonymous JavaScript functions naming convention algorithm. The following patterns are detected:

* If `displayName` ends with a sequence of alphanumeric characters, `_`, and `$`, the longest such suffix is displayed.
* If `displayName` ends with a sequence of `[]`-enclosed characters, that sequence is displayed without the square brackets.
* If `displayName` ends with a sequence of alphanumeric characters and `_` followed by some `/`, `.`, or `<`, the sequence is returned without the trailing `/`, `.`, or `<` characters.
* If `displayName` ends with a sequence of alphanumeric characters and `_` followed by `(^)`, the sequence is displayed without the `(^)`.

If none of the above patterns match, the entire `displayName` is displayed.

Examples
--------

### Setting a displayName

By entering the following in a Firefox console, it should display as something like `function MyFunction()`:


```js
const a = function () {};
a.displayName = "MyFunction";

a; // function MyFunction()
```

### Changing displayName dynamically

You can dynamically change the `displayName` of a function:


```js
const object = {
  // anonymous
  someMethod: function someMethod(value) {
    someMethod.displayName = `someMethod (${value})`;
  },
};

console.log(object.someMethod.displayName); // undefined

object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"
```

### Cleaning of displayName

Firefox devtools would clean up a few common patterns in the `displayName` property before displaying it.


```js
function foo() {}

function testName(name) {
  foo.displayName = name;
  console.log(foo);
}

testName("$foo$"); // function $foo$()
testName("foo bar"); // function bar()
testName("Foo.prototype.add"); // function add()
testName("foo ."); // function foo .()
testName("foo <"); // function foo <()
testName("foo?"); // function foo?()
testName("foo()"); // function foo()()

testName("[...]"); // function ...()
testName("foo<"); // function foo()
testName("foo..."); // function foo()
testName("foo(^)"); // function foo()
```

Specifications
--------------

Not part of any standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Function.prototype.name`