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 または '' （空文字列）を返します。
試してみましょう
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() {},
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 |
ブラウザーの互換性
Loading…