アロー関数

アローかんすう（関数）

意味短縮形の関数

アロー関数とは？

ES6から導入された、短縮された関数の定義方法。`this`の振る舞いが従来の関数とは異なる。

アロー関数の具体的な使い方

基本的なアロー関数の例

const add = (a, b) => a + b;
console.log(add(3, 4));

const greet = name => `こんにちは、${name}さん！`;
console.log(greet('山田'));

👇出力結果

7
こんにちは、山田さん！

2つのアロー関数の例です。'add'関数は2つの引数を取り、'greet'関数は1つの引数を取ります。引数が1つの場合は括弧を省略できます。

thisの振る舞いの違い

const obj = {
  name: '太郎',
  greet: function() {
    setTimeout(() => {
      console.log(`こんにちは、私は${this.name}です。`);
    }, 100);
  }
};

obj.greet();

👇出力結果

こんにちは、私は太郎です。

アロー関数内のthisは、定義時のコンテキスト（ここではobjオブジェクト）を保持します。従来の関数では、この動作を実現するためにbindやselfの使用が必要でした。

アロー関数に関するよくある質問

Q. アロー関数と通常の関数の違いは？

A. アロー関数は構文が簡潔で、thisの束縛が異なります。アロー関数内のthisは、定義時のコンテキストを保持します。

Q. アロー関数はいつ使うべき？

A. コールバック関数や短い関数式を書く際に特に便利です。ただし、オブジェクトのメソッドやコンストラクタとしては適していません。

Q. アロー関数で複数行の処理は？

A. 複数行の処理を行う場合は、{} で囲み、明示的にreturnを使用する必要があります。例：(x, y) => { let sum = x + y; return sum; }

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのアロー関数についても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのアロー関数やfunction、名前付き関数、iterator、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。