このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Function: name
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年8月.
name はFunction オブジェクトの読み取り専用プロパティで、作成時に付けられた関数の名前、もしくは無名関数の場合はanonymous または'' (空文字列)を返します。
In this article
試してみましょう
const func1 = function () {};const object = { func2: function () {},};console.log(func1.name);// 期待される出力結果: "func1"console.log(object.func2.name);// 期待される出力結果: "func2"値
数値です。
Function: name のプロパティ属性 | |
|---|---|
| 書込可能 | 不可 |
| 列挙可能 | 不可 |
| 設定可能 | 可 |
メモ:標準外であった ES2015 以前の実装では、configurable 属性もfalse であることに注意してください。
解説
関数のname プロパティは、デバッグツールやエラーメッセージで関数を識別するために使用することができます。言語自体には意味づけは存在しません。
name プロパティは読み取り専用のため、代入演算子で変更することはできません。
function someFunction() {}someFunction.name = "otherFunction";console.log(someFunction.name); // someFunction変更するには、Object.defineProperty() を使用してください。
name プロパティは、関数が定義されている方法から通常推測されます。次の節では、それが推測されるさまざまな方法について記述します。
関数宣言
name プロパティは関数宣言の名前を返します。
function doSomething() {}doSomething.name; // "doSomething"デフォルトエクスポートされた関数の宣言
export default 宣言は、関数を式ではなく宣言としてエクスポートします。宣言が無名関数である場合、名前は"default" となります。
// -- someModule.js --export default function () {}// -- main.js --import someModule from "./someModule.js";someModule.name; // "default"Function コンストラクター
Function() コンストラクターで作成された関数は、 "anonymous" の名前になります。
new Function().name; // "anonymous"関数式
関数式に名前が付いている場合、その名前がname プロパティとして使用されます。
const someFunction = function someFunctionName() {};someFunction.name; // "someFunctionName"function キーワードまたはアロー関数構文を使用して作成される無名関数式は、既定で名前が"" (空文字列)になります。
(function () {}).name; // ""(() => {}).name; // ""ただし、そのようなケースはまれです。通常、関数を別の場所で呼び出すためには、関数式は識別子に関連付けられます。無名関数式の名前は、特定の構文コンテキスト内、たとえば変数宣言とメソッド、初期化子と既定値で推測できます。
名前付きであることが推測できない実用的な例としては、別の関数から返される関数があります。
function getFoo() { return () => {};}getFoo().name; // ""変数宣言とメソッド
変数とメソッドは、構文上の位置から無名関数の名前を推論できます。
const f = function () {};const object = { someMethod: function () {},};console.log(f.name); // "f"console.log(object.someMethod.name); // "someMethod"同じことが代入にも適用されます。
let f;f = () => {};f.name; // "f"初期化子と既定値
構造分解、デフォルト引数、クラスフィールドなどの初期化子(既定値)の関数は、バインド済みの識別子の名前をname として継承します。
const [f = () => {}] = [];f.name; // "f"const { someMethod: m = () => {} } = {};m.name; // "m"function foo(f = () => {}) { console.log(f.name);}foo(); // "f"class Foo { static someMethod = () => {};}Foo.someMethod.name; // someMethod短縮メソッド
const o = { foo() {},};o.foo.name; // "foo";バインドされた関数
Function.bind() が関数を作成する時、その名前は "bound " とその関数名を合わせたものとなります。
function foo() {}foo.bind({}).name; // "bound foo"ゲッターとセッターの関数名
get とset を使う時は、 "get" や "set" が関数名に含まれます。
const o = { get foo() { return 1; }, set foo(x) {},};const descriptor = Object.getOwnPropertyDescriptor(o, "foo");descriptor.get.name; // "get foo"descriptor.set.name; // "set foo";クラスでの関数名
obj.constructor.name でオブジェクトの「クラス」を知ることができます (ただし、下記の警告を確認してください)。
class Foo {}Foo.name; // "Foo"関数名としてのシンボル
シンボル (Symbol) が関数名として使用されており、そのシンボルに説明が存在する場合、メソッドの名前は角カッコで囲まれた説明となります。
const sym1 = Symbol("foo");const sym2 = Symbol();const o = { [sym1]() {}, [sym2]() {},};o[sym1].name; // "[foo]"o[sym2].name; // "[]"プライベートフィールドとメソッド
プライベートフィールドとプライベートメソッドは、ハッシュ記号 (#) が名前の一部に含まれます。
class Foo { #field = () => {}; #method() {} getNames() { console.log(this.#field.name); console.log(this.#method.name); }}new Foo().getNames();// "#field"// "#method"例
>オブジェクトのコンストラクター名を示す
オブジェクトの「クラス」を調べるには、obj.constructor.name を使用することができます。
function Foo() {} // または class Foo {}const fooInstance = new Foo();console.log(fooInstance.constructor.name); // "Foo"しかし、静的メンバーは自分自身でクラスのプロパティとなるため、静的メソッドプロパティname() を持つほぼすべてのクラスについて、クラス名を取得することはできません。
class Foo { constructor() {} static name() {}}static name() メソッドが存在する場合、Foo.name はクラス名ではなく、name() 関数オブジェクトへの参照を持つことになります。fooInstance のクラスを取得しようとしてfooInstance.constructor.name を使用しても、まったくクラス名は得られず、代わりに静的クラスメソッドへの参照が返されます。
const fooInstance = new Foo();console.log(fooInstance.constructor.name); // ƒ name() {}静的フィールドが存在するため、name も関数ではない可能性があります。
class Foo { static name = 123;}console.log(new Foo().constructor.name); // 123クラスにname という静的プロパティがある場合、「書き込み可能」にもなります。このような独自の手法を用いなければ、既定では「読み取り専用」となります。
Foo.name = "Hello";console.log(Foo.name); // Foo に静的な "name" がある場合は "Hello"、そうでなければ "Foo" と表示したがって、組み込みのname プロパティに常にクラスの名前が格納されていることに頼っていると、期待通りに動作しない場合があります。
JavaScript 圧縮ツールおよび最小化ツール
警告:name プロパティを使用しているときに、 JavaScript の圧縮(ミニファイ)や難読化のような変換を行う際には注意が必要です。これらのツールは JavaScript ビルドパイプラインの一部として、本番環境に設置する前にプログラムのサイズを縮小するためによく使用されます。これらの変換は、ビルド時に関数名を変更することがあります。
次のようなソースコードは、
function Foo() {}const foo = new Foo();if (foo.constructor.name === "Foo") { console.log("'foo' は 'Foo' のインスタンスである");} else { console.log("おおっと!");}このように圧縮されるかもしれません。
function a() {}const b = new a();if (b.constructor.name === "Foo") { console.log("'foo' は 'Foo' のインスタンスである");} else { console.log("おおっと!");}非圧縮版では、プログラムは "'foo' は 'Foo' のインスタンスである" とログ出力し、真値側の分岐を実行します。一方、圧縮版では動作が異なり、 else 側の分岐を実行します。例えば上記のように、name プロパティに依存している場合は、ビルドパイプラインで関数名が変更されないようにするか、関数に具体的な名前があるとは仮定しないようにしてください。
仕様書
| Specification |
|---|
| ECMAScript® 2026 Language Specification> # sec-function-instances-name> |