Help us understand the problem. What is going on with this article?

関数の記述を簡略化できる、アロー関数(=>) by「JavaScript コードレシピ集」

More than 1 year has passed since last update.

0. 前提

「JavaScriptコードレシピ集(技術評論社)」の下記を参照しています。

Chap1 JavaScriptの基礎

  • 012 アロー関数(=>)で関数を定義したい

1. アロー関数とは?

// Syntax
(引数) => | 処理内容 |        // 関数を定義する

関数を定義する方法は、function宣言の他にアロー関数というものもあります。アロー関数のメリットはふたつあります。

  1. 関数を簡略化して記述可能
  2. thisを束縛できる (「JavaScript コードレシピ」P.44から引用)

2. アロー関数で関数を定義

JavaScript
// 関数の定義
const calcSum = (a, b, c) => {
  const result = a + b + c;
  return result;
};
JavaScript
// 関数の実行(functionと同じ)
calcSum(1, 2, 3);

3. アロー関数の省略記法

  1. 引数が1つのときは「カッコ()」を省略できる
    (引数が0個か、2個以上のときは省略不可)
JavaScript
// 関数の宣言
const myFunction = (a) => {
  return a + 2;
};

// 関数の宣言 | カッコを省略
const myFunction2 = a => {
  return a + 2;
};
  1. アロー関数内の処理が1行のとき、{}とreturnを省略できる
JavaScript
// 関数の宣言
const myFunction3 = (a) => {
  return a + 2;
}

// 関数の宣言 | {}とreturnを省略
const myFunction3 = (a) => a + 2;
YNanshin
2019/04~フロントエンジニアです。 Qiitaには学習内容を残しています(自分向け)。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした