【JS学習マラソン】第18回 1.2.15 関数式とアロー
JavaScript学習マラソンの第18回は、
「現代の JavaScript チュートリアル」パート１の2.15「関数式とアロー」です。
関数式とアロー https://ja.javascript.info/function-expressions-arrows
を読んでみます。
JavaScriptの関数の書き方にはバリエーションがある
前回は、JavaScriptの「関数」の書き方（関数宣言）について学びました。
今回も、JavaScriptの「関数」の書き方を学びますが、前回の「関数宣言」とは別の書き方を学びます。
- 関数宣言
- 関数式 ←New！
- アロー関数 ←New！
「関数式」と「アロー関数」について、JavaScriptチュートリアルの説明を見てみましょう。
数値aと数値bの合計を求める関数が、事例として紹介されていました。
関数宣言で書いた場合：
関数式で書いた場合：
アロー関数で書いた場合：
「=>」という記号が「アロー」（矢印）ですね。
どの書き方でも、sum(1,2)という具合に関数を呼び出せば、合計値の3が得られます。
関数宣言、関数式、アロー関数は、どれも基本的な機能は同じですが、使われ方によって「動作」に細かい違いがあります。
動作の違いは、JavaScriptの文法（言語仕様）なので、「どうしてそんな違いがあるのか？」という疑問で悩む必要はありません。
ただ単にJavaScriptの文法では、関数とはそういうものである、という話でしかないのです。
JavaScriptの関数式やアロー関数の動作の詳細については、公式ドキュメントで補足しておきましょう。
３つめのアロー関数は、後でJavaScriptチュートリアル 1.6.11「アロー関数ふたたび」で詳細を見るので、今回は関数宣言と関数式の違いに注目しておきましょう。
関数式は、実行がそれに到達した時に作られ、それ以降で利用可能になります。
一度実行フローが代入 let sum = function… の右辺へ渡ったら – 関数は作られ、そこから使えるようになります(代入や呼び出しなど)。
関数宣言は異なります
関数宣言はスクリプト/コードブロック全体で使用できます。
関数宣言と関数式では、関数が有効になるタイミングやスコープ（有効範囲）に違いがあります。
（いちいちそんなことを気にしないといけないのは面倒くさいですね！😢）
JavaScriptの変な仕組み：「巻き上げ」（hoisting）
他のプログラミング言語を使ったことがある人なら、JavaScriptの関数は変な挙動を示すので戸惑うはずです。
JavaScriptには「巻き上げ」（hoisting）という仕組みがあるので、一応知っておきましょう。（後々、バグの原因を探るときに役立つ？）
主な意味
揚げる、(ロープなどで)巻き上げる、釣り上げる、立ち上がる
（クレーンによる巻き上げの様子）
さて、JavaScriptの巻き上げとは？
関数が書いてある場所よりも上の場所で関数を呼び出した場合、関数の「巻き上げ」によって、下にある関数が上にある呼び出し場所から使えるようになっています。
（上記の図で、左の関数宣言と右の関数式の違いに注目してください。）
- 関数宣言：巻き上げがある。
- 関数式：巻き上げがない。
関数を書いたのに、関数が使えない場合は「巻き上げ」の有無を疑ってみましょう。
（→関数を書いている場所＝順番に問題あり！？）
JavaScriptでは、基本的に「関数宣言」を使っておき、それだと都合が悪い時には「関数式」を使う、というような使い分けがあるということを知っておけば良いでしょう。
後で学ぶ「アロー関数」は、関数宣言や関数式だと都合が悪い場合（まだあるのか！！！😇）に使える手段となります。
「文」と「式」の違い
関数宣言と関数式の違いを考えるとき、一般的なプログラミングの用語である「文」と「式」の違いも知っておくと役立つと思います。
文と式の違いは、JavaScriptだけに限らず、プログラミング全般の基本的な話となります。
プログラムにおける文（ぶん、statement）とは、コンピュータプログラミング言語によるプログラムを構成するもののひとつで、一般に手続きを表すものである。
式（しき、expression）とは、プログラミングにおいて、言語によって定められた優先順位や結びつきの規定に則って評価される値、変数、演算子、関数の組み合わせである。
数学における式と同様、式は評価された値を持つ。
英語では、
- 文：statement
- 式：expression
といいます。
（Wikipediaの説明は硬いので、意味がよく分かりませんね？）
もうちょっと検索してみましょう。
文と式の最大の違いは、値を返すのが式で、返さないのが文。
誤解を恐れずに簡単に言ってしまうと、戻り値を使っているものが「式」で、戻り値を捨てているものが「文」になります。
「文」と異なり、「式」はその戻り値を使用しているものになります。
- 文：値を返さない
- 式：値を返す
「return void」と書いて、void値（「何もない」という意味の特殊な値）を返す場合もありますが、基本的には「式」は何らかの意味ある値を返すものです。
こういう関係なのかな
関数型プログラミング(FP, functional programming)の諸概念を駆け足で見ていきます
命令型プログラミング(IP, imperative programming)と比べると、FPには以下のような特徴があります。
- IPが「命令を実行する」のに対し、FPは「式を評価する」ことを中心にプログラムを組み立てる
プログラミングのパラダイム（考え方）の分類方法の１つとして、命令型と宣言型という分類方法があります。
- 命令型：命令（文）を「実行」する。
- 宣言型：式（関数）を「評価」する。
という違いがあります。
JavaScriptは、関数型言語（宣言型の1種）の「Scheme」をベースにして、手続き型（命令型）の機能も追加して作られたプログラミング言語なので、命令型と宣言型の両方の仕組みが備わっています。
- 関数宣言（文）を「実行」して、関数を使う
- 関数式（式）を「評価」して、関数を使う
という、どちらの仕組みでも関数を使うことができるようになっているんですね！
（検索して詳細を調べるとき、「評価」「実行」というキーワードも追加してみてください。）
JavaScriptでプログラムを書いているとき、「文」か「式」のいずれかを書いていることになります。
「関数宣言」で関数を書くと命令型っぽい書き方になって、「関数式」で関数を書くと宣言型っぽい書き方になっているでしょうか？
最初のうちは、文と式の違いを意識する場面はあまりないかもしれませんが、プログラミングの仕組みを学んでいくうちに、
「これは文なのか？」
「これは式なのか？」
という疑問にぶつかる場面も出てくるので、その時に思い出していただければと思います。
まとめ
- JavaScriptの関数の書き方には、いろいろな方法が用意されている。
- 「関数宣言」「関数式」「アロー関数」は、どれも基本的には同じだけど、使われ方によって、動作に少し違いがある。（面倒くさいやつ！）
- JavaScriptの関数には「巻き上げ」という仕組みがある。
- 関数宣言：巻き上げがある。
- 関数式：巻き上げがない。
- 「巻き上げ」の有無によって、思わぬエラーが発生する場合があるので注意。
- 「文」と「式」というプログラミングの文法用語がある。
- 文と式の違いは、値（評価値）の利用にある。
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)
- 作者: リブロワークス,及川卓也
- 出版社/メーカー: インプレス
- 発売日: 2018/06/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
