今回扱う内容：関数

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行で処理が終わる場合は波括弧{}も省略できます。このように省略して書くことで、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オブジェクトを例に見ていきます。

personオブジェクト

const person {
  firstName: "Ken",
  lastName: "Takahashi",
  age: 29,
  gender: "male",
  interests: [
    {
      name: "programming",
      emoji: "💻"
    },
    {
      name: "motorcycle",
      emoji: "🏍"
    },
  ],
  greeting: function () {
    alert("Hi! I'm " + this.firstName + " " + this.lastName);
  }
};

personオブジェクトの中のgreetingというメソッドをアロー関数にしてみます。

  greeting: () => {
    alert("Hi! I'm " + this.firstName + " " + this.lastName);
  }

このgreetingを呼ぶとアロー関数はthisをもたないので、オブジェクト内のfirstNameやlastNameをthisで参照しようとしてもundefinedとなってしまいます。
動画内では、3:58から解説をしています。
JavaScriptのthisはバグの温床になりやすいので安易に使うべきではなく、アロー関数を使うことで制約を課すことができます。一方でオブジェクト内の関数でthisを使いたい場面もあるので、その時はアロー関数を使わない配慮が必要になります。

コールバック関数

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

非同期処理

非同期処理であるfetch、setTimeoutなどの関数を使うときはコールバック関数を引数として渡します。funcという関数があると仮定して、次の例では、setTimeoutは第2引数のミリ秒後に第1引数の関数を実行するので、funcは５秒後に実行されます。

setTimeout(func, 5000);

リスト処理

リスト処理も同様にforEach、mapなどのメソッドを使うときは、コールバック関数を引数に渡します。例えば、forEachは配列の各要素を取り出し、それぞれに対して処理を実行できます。次の例では、interestsという配列に対してforEachでリスト処理を行っています。コールバック関数内で配列の各要素をitemという変数で扱うことができ、コンソールにitemのプロパティを表示させています。このように配列の要素に対して何かしらの処理をループで行うリスト処理の記述にもコールバック関数は使われます。
動画内では、3:58から解説をしています。

const interests = [
  {
    name: "programming",
    emoji: "💻"
  },
  {
    name: "motorcycle",
    emoji: "🏍"
  },
];

interests.forEach((item) => {
  console.log(item.name);
  console.log(item.emoji);
})

実行結果

programming
💻
motocycle
🏍

まとめ

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

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