【JavaScript】アロー関数って書き方がいっぱいあるよね

おはようございます。タカヒデです。

アロー関数、使ってますか？

書き方がシンプルでかっこよくて思わず使いたくなっちゃいますよね。

でもたまに参考書をみていてると、「あれ？アロー関数っぽいけど、なんか知っている書き方じゃないぞ？」って思う時はありませんか？

そうなんです。
アロー関数には様々な省略記法があるのです。

ということで本日は、「JavaScriptにおける、『アロー関数の省略記法』」を紹介していきたいと思います。

ぜひ本記事を参考にしてください。

ちなみに、通常の関数やメソッドについては、↓の記事で紹介しています。
よろしければこちらも参考にしてください。

あわせて読みたい

【JavaScript】関数・メソッドとは？3種類の定義方法を知ろう

アロー関数の通常の記法

アロー関数の省略記法を見る前に、まずはアロー関数の通常記法から見てみましょう。

そもそもアロー関数とは、「ES2015」で新たに追加された関数の記法です。

これまでの「Functionコンストラクタ」を利用した記載と比べ、シンプルな記述が可能という特徴があります。

ちなみに「Functionコンストラクタ」は「new Function(‘引数’,’関数の処理’)」こんな書き方をするものでしたね。

ではアロー関数ではどのような記載方法になるのでしょうか。

//記載方法

(引数) => {return 関数本体}

//記載方法

(引数) => {return 関数本体}

「=>」この部分が矢のようなのでアロー関数なんですね。

具体例も見ていきます。

let testFunc = (num1, num2) => {
    return num1 + num2;
};

console.log(testFunc(1, 2));
//実行結果：3

let testFunc = (num1, num2) => {
    return num1 + num2;
};

console.log(testFunc(1, 2));
//実行結果：3

これだけでも十分にシンプルな記述に見えます。

ですが、条件によってここからさらに記述をシンプルにすることができるのです。

アロー関数の省略記法

ではアロー関数の省略記法を見ていきましょう。

ここでは、４つの条件における省略記法を紹介します。

先ほどの通常記法と比べてどこが省略されているかに注目してみてください。

①引数が一つの場合

1つ目の省略条件は「引数が一つの場合」です。

引数が一つの場合には、『引数の()』を省略することができます。

//記載方法

引数 => {return 関数本体}

//記載方法

引数 => {return 関数本体}

具体的な記載例が以下です。

let testFunc = num1 => {
    return num1 * 10;
};

console.log(testFunc(1));
//実行結果：10

let testFunc = num1 => {
    return num1 * 10;
};

console.log(testFunc(1));
//実行結果：10

「()」が無くなって少しスッキリしましたね。

ただ個人的にはさほど省略された感じはないです。

②関数の処理が１文の場合

2つ目の省略条件は「関数の処理が１文の場合」です。

関数の処理が１文の場合には、『{}』,『return』を省略することができます。

//記載方法

(引数) => 関数本体

//記載方法

(引数) => 関数本体

こちらも記載例です。

let testFunc = (num1, num2) => num1 + num2;

console.log(testFunc(1, 2));
//実行結果：3

let testFunc = (num1, num2) => num1 + num2;

console.log(testFunc(1, 2));
//実行結果：3

1行に関数がまとまっています。

こちらは1行になっているだけあって結構スッキリして見えますね。

③引数が一つの場合かつ関数の処理が１文の場合

3つ目の省略条件は「引数が一つの場合かつ関数の処理が１文の場合」です。

だんだん条件が複雑になってきました。

引数が一つの場合かつ関数の処理が１文の場合には、『引数の()』,『{}』,『return』を省略することができます。

//記載方法

引数 => 関数本体

//記載方法

引数 => 関数本体

記載例も見てみましょう。

let testFunc = num1 => num1 * 10;

console.log(testFunc(1));
//実行結果：10

let testFunc = num1 => num1 * 10;

console.log(testFunc(1));
//実行結果：10

かなりシンプルですね。

むしろこの省略記法を知らずにコードを読んでしまうと「本当に合ってる？」ってなってしまいますね。

④オブジェクトを返す場合

4つ目の省略条件は「オブジェクトを返す場合」です。

これまでとはちょっと毛色が違いますね。

オブジェクトを返す場合には、『オブジェクトリテラルを()で囲うことで一文とみなす』ことができます。

//記載方法

(引数) => ({ オブジェクトリテラル })

//記載方法

(引数) => ({ オブジェクトリテラル })

具体例を見てみます。

let testFunc = (num1, num2) => ({
    test1: num1,
    test2: num2
});

console.log(testFunc(1, 2));
//実行結果：{test1: 1, test2: 2}

let testFunc = (num1, num2) => ({
    test1: num1,
    test2: num2
});

console.log(testFunc(1, 2));
//実行結果：{test1: 1, test2: 2}

「こちらもシンプルになりました」と言いたいところですが、省略記法がありすぎてどこからがシンプルか分からなくなりました…

ただ、どの記法でも省略された記載ができてることが分かりますね。

まとめ

以上が「JavaScriptにおける『アロー関数の省略記法』」でした。

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

タカヒデ

ITを楽しく勉強中

X

通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね