JavaScriptにおける関数の作り方まとめ - プログラミング学習ノート

f:id:endoakak:20200725103912j:plain

JavaScriptの関数の作り方が、いろいろ用語が出てきてややこしかったのでまとめてみました。

関数の作り方自体は２パターンです。

それぞれについて説明する中で、「〜関数」って言う言葉がやたら出てくるのがややこしい原因ですね。

関数宣言

関数に名前をつけて定義します。その後、その関数名で呼び出します。

function sayAge(age) {
  console.log(`#{age}歳です！！`);
}

sayAge(20);

ベースは関数宣言です。全体を()で囲んで最後に引数を与えます。
関数宣言をした後に、関数名で呼び出すことなくすぐに関数を実行できます。

(function sayAge(age) {
  console.log(`#{age}歳です！！`);
})(20);

別に定義した後に呼び出せば良くないか…そこまでして省略したい…？

関数宣言は最初に読み込まれるので、下のように関数宣言の記述より上で関数を使っても使えます。

sayAge(20);

function sayAge(age) {
  console.log(`#{age}歳です！！`);
}

関数式は、変数に関数を代入する感じです。

const say_age = function(age) {
  console.log(`#{age}歳です！！`);
}

say_age(20)

この場合、関数宣言と違って最初に読み込まれるわけではないので注意が必要です。

関数式で関数を定義した場合、関数自体には名前がついていません。このような名前のついていない関数を、無名関数といいます。

関数式のfunction() {}の部分をより短く簡単にするために() => {}と言う感じで書くことができます。
上の例ではこのようになります。

const say_age = (age) => {
  console.log(`#{age}歳です！！`);
}

say_age(20)

正直やめてほしい。functionの方がわかりやすくないですかね？確かに=>の方が短いかもしれないけど、そのかわりキーボードで打ちにくいし。