functionキーワードか無名関数どっちを使うか

Question

質問させてください。
Reactの写経していてコンポーネントの定義方法に揺らぎを見つけました。
(私はnodejstに関する知識が浅く、無名関数の特性をいまいち把握していません。関数をオブジェクトとして扱える、くらいの知識です。)

export function Component() { [..] }

export const Component = function () { [...] }

(無名関数だと、constで定義しているなら同名による関数の上書きができない、みたいな違いがあると思いましたが、、、)

どのような違いがあるのでしょうか？
ご回答おねがいします。

Answer 1

(無名関数だと、

質問に挙げていただいた二つの定義方法は、JavaScriptにおいては、無名関数にはなりませんので、その時点で間違いな認識になります。

質問のコードに対して、console.log(Component.name);を実行してみればわかります。
両方とも、Componentが出力されたかと思います。

無名関数になる状況は、
クロージャを使った時となります。
クロージャに関しては、
クロージャ - JavaScript | MDN
をご参照ください。

さて、豆知識はここまでにしておいて、下記が本題になります。

constで定義しているなら同名による関数の上書きができない、みたいな違いがあると思いましたが、、、)

その違いももちろんありますが、
一番影響をうけるのは、定義の順番です。

const instanse = new Component();

function Component () {}

上記はエラーは起きませんが、

const instanse = new Component();

const Component = function () {}

は、Componentはconstructorじゃねーよ！（ようは未定義なので）、とエラーが起きます。
JavaScriptにおいては、functionキーワードは少し特別扱いがされており、
上記の例のように、どこで定義しても、定義の前行で使ってもエラーが出ないようになっています。
しかし、constなどのキーワードで宣言した場合、通常の変数として定義されるため、
定義の前行で使用することはできません。

ただし、せっかく、Node.jsでの開発なので、
個人的には、functionキーワードは使うべきではないと思います。
理由は長くなるので割愛しますが、
javascript アロー関数 functionなどのキーワードで検索すると、いろいろと考察記事とかが出てくるので参考にされるといいかと。

関数をオブジェクトとして扱える、くらいの知識です。

これに関しては、両定義の仕方も同じくオブジェクトになりますので、違いはありません。
（定義の順番の影響と、再代入可能か不可能かの違い以外はほとんどないと考えていい ← constructorも両方ともFunctionとなるため）

以上です。

Comments

[hoshi-takanori]

いちばん大きな違いは this の扱いでは。

[miyabi_pudding]

ですね・・・。
追記します。

[miyabi_pudding]

すみません、当方の方で様々検証、試したところ、
また、調査したところ、
代入の右辺がfunctionの場合に、両者のthisの扱いは変わらないように思います。
クロージャの場合はもちろん、thisの扱いは変わってきますが、
クロージャの場合は、そもそも、function(){のみの記述がほとんどになりますし、
仮に、setTimeout(hoge = function(){}, 1000)のような記述の場合も、代入の右辺が評価されるため、
クロージャとなり、thisの扱いに違いはないかと・・・。
私の調査不足や、認識不足もあるかもしれませんで、
その考えにいたった際の文献や例など提示いただけないでしょうか・・・？

[hoshi-takanori]

あ、ごめんなさい。this の扱いが変わるのはアロー関数の場合でした。function キーワードを使う場合は一緒ですね。

[miyabi_pudding]

あ、なるほどです・・・。
すみません、回答しといて自信なかったので、過剰反応してしまいました 汗
thisの扱いめんどくさくなるからほんと、アロー関数使うべきだと思います。ほんとに。

[hoshi-takanori]

こちらこそ大変失礼いたしました。
アロー関数を使うべき、同感です。

[退会済みユーザー]

勉強になりますm(_ _)m