function の書き方と使い分けについて

Javascriptのfunctionには色々な書き方がある。
大きく分けて４種類（らしい）。

いや、もっと多いとか、少ないとか、議論があるかもしれないが、とりあえず・・・

パターン1: 　constで名前をつける (Function Expressions)
パターン2: 　functionから書き始めてfunctionの方に名前をつける (Function Declarations)
パターン3： 　=> Arrow function
パターン4: 　class の中で登場するメソッド

それぞれどういう使い分けをするものなのか調べてみた。
まずパターン１とパターン２を見ていく。

パターン1: 　constで名前をつける

const greeting = function(){

  console.log("Hello Platypus!");

};

greeting();

パターン2: 　functionから書き始めてfunctionの方に名前をつける

function greeting(){

  console.log("Hello Platypus!");

};

greeting();

どちらもJavascript の勉強初期に登場する書き方なので、馴染みがある。
ただ自分で書くときは何となくパターン１で書くことのほうが多い気がするな
というくらいで、パターン２との違いを説明せよと言われても口ごもってしまう・・・

調べた結果

パターン２のfunction から書き始めた場合に限り、そのfunctionを呼び出すためのコードより後ろに書いてあっても探して実行してくれる。これに対し、パターン１の方はそうはいかない。

つまりパターン２はこれ↓ ができる！

greeting();


function greeting(){

  console.log("Hello Platypus!");

};

このことは Javascriptのコードが実行される時の特性によるものだそう。

基本的にコンピューターは上から順にコードを実行していくので、
コードを書く順番や場所によってエラーが出る。
しかしJavascriptの場合はまず最初にfunctionで始まるコードがどこにあるのか見回りして、その後で実行されるという流れなので、どこに書いてもいいみたい。

だとすると・・・
パターン２の方が便利そうなので、パターン１使う意味無くない？？

パターン１のいいところ：　
”const”で名前をつけておくと、functionの中身をうっかり上書きするリスクがない。

function greeting(){

  console.log("Hello Platypus!");

};


function greeting(){

  console.log("Goodbye Monkey!");

};

greeting() //  Goodbye Monkey!が出てくる

例えば上記のコードのように、パターン２で同じ名前のfunctionをうっかり２つ作ってしまった場合どうなるかというと、greeting()は後から登場する方の内容に上書きされてしまう。似たような名前のfunctionをたくさん書いてしまう人（私！?）は注意が必要！

エラーも出ないので、どこがおかしいのかなかなか気づけない。
複数人で取り組んでるプロジェクトだとさらに危険！？
そんなとき、パターン１のように constで名前をつけておけば、同じ名前を使おうとすると、その名前は使われているとお知らせしてくれるので、リスク回避できる。

パターン3： 　=> Arrow function

矢印で済ませるArrow function

const greeting = () => {

  console.log("Hello Platypus!");

};

greeting();

省略しすぎていて戸惑う場面も多いが、やってることは同じ。
コードがシンプルなうちはむしろ直感的にはこちらの方が分かりやすい？

↓例えば以下のfunctionをarrow functionで極限まで省略するとこうなる。

//Before

function (a){

  return a + 100;

}

a => a + 100;

パターン4: 　class の中で登場するメソッド

最後に、今回パターン4として入れるか迷ったMethod。
以下の classの中にあるconstructor () とかgreeting()とか。
見た目がほぼ同じなので入れることにするが、他との使い分けという点では他のパターンとの比較対象からは外す。

class Animal {

  constructor(name) {

    this.name = name;

  }

  greeting() {

    console.log(`Hello ${this.name}!`);

  }

}

const platypus = new Animal("Platypus");

platypus.greeting();

constructorとは　：　

　　classでオブジェクトを作る際にどんなプロパティをそのオブジェクトに持たせるか、初期設定するとき専用のメソッド

class内のその他のfunction :

　　このclass で作られたオブジェクトが使えるfunction

メソッドの特徴

パターン１〜３までのfunctionと、パターン４（classの中のメソッドと呼ばれるfunction）の一番の違いは、classで作られたオブジェクトとの結びつきである。
this というキーワードでオブジェクトの中身にアクセスしたり、更新したりすることができるので、大きなデータを扱うようなもので特にその威力を発揮する。

使い分け

では本題に戻り、パターン１〜３の使い分けはどうなるのか。

調べてみたがこちらは特に正解がないようだ。
まとめると、こういうこと。

書き方の違いに注意を払いつつ、優先すべきは　コードの読みやすさと一貫性（プロジェクトのスタイルガイドで指定がある場合など）。簡潔なコードを書けるときは書いて、あとは個人の好み。

やっぱりアウトプットするの大事。
記事を書くのは時間かかるけど、
ここに書かなかったこともたくさん勉強できて
functionについて理解が深まった（気がする）！
ぜひ続けていきたい。