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()
:
const a = function () {};
a.displayName = "MyFunction";
a; // function MyFunction()
Changing displayName dynamically
You can dynamically change the displayName
of a function:
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.
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