Correct description about function displayName (mdn#20297)

files/en-us/web/javascript/reference/global_objects/function/displayname/index.md

@@ -8,56 +8,37 @@ tags:
   - Property
 browser-compat: javascript.builtins.Function.displayName
 ---
+
 {{JSRef}} {{non-standard_header}}
 
 A {{jsxref("Function")}} object's optional **`displayName`** property returns the display name of the function.
 
-## Examples
+## Description
 
-### Setting a displayName
+The `displayName` property is not initially present on any function — it's added by the code authors. If present, it may be preferred by consoles and profilers over the {{jsxref("Function/name", "name")}} property to be displayed as the name of a function.
 
-If present, it may be preferred by consoles and profilers over the {{jsxref("Function.prototype.name", "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`](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) property when displaying the component tree.
 
-By entering the following in a console, it should display as something like `function My Function()`:
+Firefox does some basic attempts to decode the `displayName` that's possibly generated by the [anonymous JavaScript functions naming convention](http://johnjbarton.github.io/nonymous/index.html) algorithm. The following patterns are detected:
 
-```js
-const a = function () {};
-a.displayName = 'My Function';
-
-a; // "function My Function()"
-```
-
-When defined, the `displayName` property returns the display name of a function:
-
-```js
-function doSomething() {}
-
-console.log(doSomething.displayName); // "undefined"
-
-const popup = function (content) {
-  console.log(content);
-};
+- 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 `(^)`.
 
-popup.displayName = 'Show Popup';
+If none of the above patterns match, the entire `displayName` is displayed.
 
-console.log(popup.displayName); // "Show Popup"
-```
+## Examples
 
-### Defining a displayName in function expressions
+### Setting a displayName
 
-You can define a function with a display name in a {{jsxref("Functions", "function expression", "", 1)}}:
+By entering the following in a Firefox console, it should display as something like `function MyFunction()`:
 
 ```js
-const object = {
-  someMethod() {}
-};
-
-object.someMethod.displayName = 'someMethod';
-
-console.log(object.someMethod.displayName); // logs "someMethod"
+const a = function () {};
+a.displayName = "MyFunction";
 
-try { someMethod } catch (e) { console.log(e); }
-// ReferenceError: someMethod is not defined
+a; // function MyFunction()
 ```
 
 ### Changing displayName dynamically
@@ -69,15 +50,41 @@ const object = {
   // anonymous
   someMethod: function someMethod(value) {
     someMethod.displayName = `someMethod (${value})`;
-  }
+  },
 };
 
-console.log(object.someMethod.displayName); // "undefined"
+console.log(object.someMethod.displayName); // undefined
 
-object.someMethod('123')
+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.