JavaScript初心者脱却計画②（関数の定義のしかた）

このnoteは、JavaScript初心者脱却を目指すものです。（前回投稿はこちら）1歩進んで2歩下がる...という感じで勉強しているので、今回は少し基本に戻ります。

※メイン参考書は引き続き「ノンプログラマのためのJavaScriptはじめの一歩」ですが、ネットで調べて自分なりに咀嚼した内容が含まれるので、ツッコミ等あればお待ちしています（お手柔らかに...）。すごく遠回りに一歩一歩考察していますので、初心者でこう考える人もいるのか...ぐらいに思っていただければ。

1.関数の定義のしかた

勉強（Three.jsのチュートリアル）を進めていて、下記のコードが出てきました。

<script>
window.addEventListener('load', init);
function init(){
 // 処理
}
</script>

前回整理したことから考えると、これはaddEventListener()メソッドを使用していて、targetはwindow、typeはloadとなっています。ふむふむ。listener部分にinitとあります。initという処理の内訳はそのままその場に書くのではなく、一度外に出して、改めて処理の内容を書いてあります。

これを見て、私はこう思いました。

「あれ...？initという関数（または存在）について、まだ定義されていないのに使用されている。initという名前からしてinitialな感じがするし、あらかじめ用意されている関数なのかな？」

と。違います。上の記述にも含まれていますが、functionから始まる下記の部分こそが、関数の定義です。

function init(){
 // 処理
}

関数の定義については早い段階で学習する内容のはずですが、なぜ私は「まだ定義されていない」と思ってしまったのでしょうか？？（汗）

JavaScriptで「定義」というと、var 〇〇 ＝ xx; が思い浮かびます。または、let 〇〇...というパターンもあります。これはあくまで変数の定義なのですが、そのイメージに引っ張られていたのです。素人感丸出しの意見でお恥ずかしいですが、function 〇〇...って、なんとなく定義っぽくなくないですか？　定義というより、まさに今実行されているようなイメージです。（私だけ？）

2.関数を、変数に代入して定義する

ただ、この混乱には他にも原因がありました。関数の定義のしかたとして、こういう書き方もあるからです。

var init = function(){
 // 処理
};

これなら見た目も含め、定義っぽいです。これは、変数に代入することで、関数を定義しているのです。このように2種類の書き方があるので、var...という文字が入っていないと物足りない（定義っぽくない）ように思ってしまったのかもしれません。並べて比較してみましょう。

//一つめ

function init(){
 // 処理
}

//二つめ

var init = function(){
 // 処理
};

この二つは、書き方が違うだけでほぼ同じことです。（厳密には違うようですが...）

2.セミコロン問題

ここで、大変なことに気がつきます。「後ろのセミコロンが、あったりなかったりする」のです。どういうことかというと、関数をシンプルに定義しているもの（function文）にはセミコロンがないのに、変数に代入しているもの（function式）はセミコロンありです。関数の終わりはセミコロンなしで良いはずなのですが...。（混乱）

調べたところ、演算子を用いた式はセミコロン必要、ブロックを利用する制御構文（if,forなど）にはセミコロン不要ということのようでした。変数に代入しているもの（function式）は、演算子を用いた式に該当するので、セミコロンが必要だったのです。内心、どちらかに統一してくれたらいいなぁと思っていたのですが、明確なルールに乗っ取って決められているのなら、覚えて慣れるしかないですね。

また、関数の定義の仕方にはもう一つ、オブジェクトのプロパティとして定義するという方法もあります。この方法はよく使うみたいなのですが、（個人的に）今やりたい内容に直接関わってないので、また別の機会にします。

今回は以上です！