JavaScriptの"関数名"を掘り下げてみる - 30代からのプログラミング学び直し!

疑問の発端はこんな感じのコード

// 関数を定義
const func1 = () => {
  return "test1";
};
// 関数を代入
const obj1 = {
  func1,
};
obj1.func1(); // 実行できる

func1は無名関数であるはずなのに、なぜ代入先でfunc1()で呼び出せるのか？🤔 オブジェクトのプロパティ名が暗黙的につけられるということだと思いますが…。

どう調べれば答えが分かるのかもよくわからないまま、自分なりに調べます…。

Function オブジェクトの name プロパティは読み取り専用で、作成時に付けられた関数の名前、もしくは無名関数の場合は anonymous または '' (空文字列) を返します。

変数とメソッドは、構文上の位置から無名関数の名前を推論できます (ECMAScript 2015 から)。

なるほど、無名関数の場合は、関数名が"推論"されて、nameプロパティに格納されるんですね。（この場合は変数名が関数名となる。）

const func1 = () => {
  return "test1";
};
console.log(func1.name); // => func1
const obj1 = {
  func1,
};
console.log(obj.func1.name); // => func1

じゃあ名前付きの関数の場合はどうなるか？

const func2 = function func3() {
  return "test2";
};
const obj2 = {
  func2,
};
obj2.func2(); // 実行できる
console.log(obj2.func2.name); // 関数名はfunc3になる

関数式に名前が付けられている場合、関数の name プロパティには、構文から推測される暗黙の名前 (関数が割り当てられている変数など) ではなく、その名前が設定されます。

ふむ…🤔関数のnameプロパティとオブジェクトのプロパティ名はは必ずしも一致しないようで、よくわからなくなってきた…。

こちらの記事に書いてありました。

ES2015からは、プロパティ名と値に指定する変数名が同じ場合は{ name }のように省略して書けます。

つまり、関数名うんぬんの問題ではなく、単にオブジェクトの省略記法だったわけですね。基本的なことを知らなかった……。大変スッキリしました！！！上に書いた関数名うんぬんの試行錯誤は全く関係なかったな…。でも記念に残しとこ。