質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

237閲覧

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

puyotaro

総合スコア24

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2020/03/28 08:06

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

js

1export function Component() { [..] }

js

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

(無名関数だと、

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

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

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

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

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

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

javascript

1const instanse = new Component(); 2 3function Component () {}

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

javascript

1const instanse = new Component(); 2 3const Component = function () {}

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

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

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

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

以上です。

投稿2020/03/28 19:41

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/03/28 20:03

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

2020/03/28 20:04

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

2020/03/28 20:25 編集

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

2020/03/28 20:34

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

2020/03/28 20:38

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

2020/03/28 20:42

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

2020/03/29 07:13

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問