ガクセイハッカソン

現役エンジニアが教える!実践JavaScript入門 〜関数編〜

2022-07-11 公開

今回扱う内容:関数

JavaScriptにおける関数の特徴を理解しよう。

JavaScriptの関数の書き方

JavaScriptの関数の書き方はいくつかあり、それぞれの書き方の例と特徴は次の通りです。

基本的な書き方

こちらのようなfunction + 関数名で始まる書き方は、JavaScriptの参考書などではじめに紹介される基本的な書き方です。

function square(number) {
  return number * number;
}

変数に代入する書き方

次のように変数に関数を代入する書き方もあります。

const square = function(number) {
  return number * number;
}

アロー関数で変数に代入する書き方

新しい関数の書き方としてアロー関数というものがあり、最近のJavaScriptのコードではよく使われるます。

const square = (number) => {
  return number * number;
}

アロー関数を省略した書き方

こちらの書き方もアロー関数で書いているのですが、より省略した書き方です。省略方法としては引数が1つの場合は、丸括弧()を省略でき、処理が1行で処理が終わる場合は波括弧{}も省略できます。このように省略して書くことで、3行で記述されたコードを1行で書くことができるので、場合によってはシンプルで見やすくなります。

const square = number => number * number;

関数についてより詳しく知りたい方は、MDNの記事も合わせて見ることをおすすめします。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

JavaScript の関数の特徴

関数は値(オブジェクト)である

JavaScriptにおける関数はオブジェクトであり、関数自体を値として扱うことできます。さきほどの関数の書き方の例でも、squareという変数に関数を値として代入しています。また値なので関数を引数に渡すこともできます。これをコールバック関数といい、JavaScriptでは非常によく使われます。

アロー関数

アロー関数は、ES6から使えるようになった関数の書き方です。従来の関数より簡易な記法で、thisを持たないなどの制約が加わり、よりシンプルに関数を扱えるようになりました。thisを持たないということについては、次のpersonオブジェクトを例に見ていきます。

コールバック関数

コールバック関数とは引数として渡される関数のことです。主な利用シーンとしては非同期処理とリスト処理が挙げられます。

まとめ

関数型言語と呼ばれるJavaScriptの関数の特徴について解説しました。次回はリスト処理についてさらに詳しく解説します。

関連記事