Function#nameについて

概要

ES2015からは名前の無い関数定義であっても、コンテキストによって関数のnameプロパティが定義されるようになった。

nameプロパティが定義される例

直接的な変数への代入

      f1 = function () {}
var   f2 = function () {}
let   f3 = () => {}
const f4 = () => {}

console.log( f1.name, f2.name, f3.name, f4.name )  
  // "f1"  "f2"  "f3"  "f4"

直接的なプロパティ定義

o = {
      m1: function () {},
  ['m2']: () => {},
     m3() {}
}

console.log( o.m1.name, o.m2.name, o.m3.name )  
  // "m1"  "m2"  "m3"

nameプロパティが定義されない例

間接的なケース

f5 = [function () {}][0]
f6 = (v => v)(function () {})
f7 = f6

console.log( f5.name, f6.name, f7.name )  
  // ""  ""  ""

名前付き

f8 = function fn() {}
console.log( f8.name )  
  // "fn"

その他

シンボルの名前を持つ関数や、ゲッター・セッター・バインドされた関数のnameプロパティにはそれと分かるプリフィックスが付く。

o = {
  m4: (function fn() {}).bind(),
  [Symbol.for('m5')]() {},
  get m6() {},
  set m7(v) {}
}

console.log( o.m4.name )  //  "bound fn"
console.log( o[Symbol.for('m5')].name )  // "[m5]"
console.log( Object.getOwnPropertyDescriptor(o, 'm6').get.name )  // "get m6"
console.log( Object.getOwnPropertyDescriptor(o, 'm7').set.name )  // "set m7"