Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!

The function.name property returns the name of the function.

Property attributes of Function.name
Writable no
Enumerable no
Configurable yes
Note that in non-standard, pre-ES6 implementations the configurable attribute was false as well.

Description

The name property returns the name of a function, or (before ES6 implementations) an empty string for anonymous functions:

function doSomething() {}

console.log(doSomething.name); // logs "doSomething"

Functions created with the syntax new Function(...) or just Function(...) have their name property set to an empty string. In the following examples anonymous functions are created, so name returns an empty string:

var f = function() {};
var object = {
  someMethod: function() {}
};

console.log(f.name == ''); // true
console.log(object.someMethod.name == ''); // also true

Browsers that implement ES6 functions can infer the name of an anonymous function from its syntactic position. For example:

var f = function() {};
console.log(f.name); // "f"

You can define a function with a name in a function expression:

var object = {
  someMethod: function object_someMethod() {}
};
console.log(object.someMethod.name); // logs "object_someMethod"

try { object_someMethod } catch(e) { console.log(e); }
// ReferenceError: object_someMethod is not defined

You cannot change the name of a function, this property is read-only:

var object = {
  // anonymous
  someMethod: function() {}
};

object.someMethod.name = 'someMethod';
console.log(object.someMethod.name); // empty string, someMethod is anonymous

To change it, you could use Object.defineProperty() though.

Examples

You can use obj.constructor.name to check the "class" of an object (read the warnings below):

function Foo() {}  // ES2015 Syntax: class Foo {}

var foo = new Foo();
console.log(foo.constructor.name); // logs "Foo"

Warning: The script interpreter will set a function's name property only if a function does not have an own property called name (see section 9.11.2. of the ECMAScript2015 Language Specification). Reading an object's constructor function name won't work for ES2015 classes with a static method or property name()

class Foo {
  constructor() {}
  static name() {}
}
var foo = new Foo();
console.log(foo.constructor.name); // logs function name()

// Name of constructor function Foo is no longer read-only
Foo.name = "Hello";
console.log(foo.constructor.name); // logs "Hello"
The behavior for such a class in newer versions of Chrome or Firefox is similar to the following ES5 snippet:
function Foo() {}
Object.defineProperty(Foo, "name", { writable: true });
Foo.name = function() { 
   return "Hello"; 
};
var foo = new Foo();
console.log(Foo.constructor.name);

So you may not want to rely on Function.name to always hold the actual class name.

Warning: Be careful when using Function.name and source code transformations such as those carried out by JavaScript compressors (minifiers) or obfuscators. These tools are often used as part of a JavaScript build pipeline to reduce the size of a program prior to deploying it to production. Such transformations often change a function's name at build-time.

Source code such as

function Foo() {};
var foo = new Foo();

if (foo.constructor.name === "Foo") {
  console.log("'foo' is an instance of 'Foo'");
} else {
  console.log("Oops!");
}

may be compressed to:

function a() {};
var b = new a();
if (b.constructor.name === "Foo") {
  console.log("'foo' is an instance of 'Foo'");
} else {
  console.log("Oops!");
}
In the uncompressed version the program runs into the truthy-branch and logs 'foo' is an instance of 'Foo' whereas in the compressed version it behaves differently and runs into the else-branch. Therefore, if you rely on Function.name like in the example above, make sure your build pipeline doesn't change function names or don't assume a function to have a particular name.

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'name' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'name' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer/Edge Opera Safari
Basic support 33.0 (Yes) 12 (Yes) (Yes)
Configurable: true 43.0 38 (38) ? ? ?
Inferred names on anonymous functions 51.0 No support [1] ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE/Edge Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) (Yes) 12 (Yes) (Yes) (Yes)
Configurable: true ? ? 38.0 (38) ? ? ? ?
Inferred names on anonymous functions No support 51.0 No support [1] ? ? ? 51.0

[1] See bug 883377.

Document Tags and Contributors

 Last updated by: mata007,