メインコンテンツまでスキップ

アロー関数 (arrow function)

アロー関数(arrow function)はJavaScriptの関数を作る方法のひとつです。

アロー関数の構文

JavaScriptのアロー関数は短く書けるのが特徴的です。カッコに引数のリスト、アロー記号=>、中カッコに処理内容を書きます。

js
(引数) => {
// 処理内容
};
js
(引数) => {
// 処理内容
};

アロー関数は式です。式とは、評価した結果が値になるものを言います。アロー関数に関数名をつけるには、変数に代入します。

js
const 変数名 = (引数) => {
// 処理内容
};
js
const 変数名 = (引数) => {
// 処理内容
};

たとえば、次の関数式をアロー関数に書き直すと

関数式で定義したincrement関数
js
const increment = function (n) {
return n + 1;
};
関数式で定義したincrement関数
js
const increment = function (n) {
return n + 1;
};

次のようになります。

アロー関数で定義したincrement関数
js
const increment = (n) => {
return n + 1;
};
アロー関数で定義したincrement関数
js
const increment = (n) => {
return n + 1;
};

アロー関数の省略形

JavaScriptのアロー関数は、引数が1つだけの場合、引数のカッコが省略できます。

js
const increment = n => { /* ... */ };
// ^カッコの省略
js
const increment = n => { /* ... */ };
// ^カッコの省略

引数がない場合は、引数のカッコは省略できません。

引数がないアロー関数
js
const getOne = () => {
return 1;
};
引数がないアロー関数
js
const getOne = () => {
return 1;
};

さらに、関数内のコードが式1つだけの場合は、中カッコ{}returnが省略できます。この省略形は簡潔文体(concise body)、非省略形はブロック文体(block body)と呼びわけます。

js
const increment = n => n + 1;
// ^^^^^returnと中括弧の省略
js
const increment = n => n + 1;
// ^^^^^returnと中括弧の省略

戻り値がオブジェクトリテラルの場合は要注意です。簡潔文体では、オブジェクトリテラルをカッコ()で囲む必要があります。

js
(n) => { foo: n + 1 }; // 誤り
(n) => ({ foo: n + 1 }); // 正しい
js
(n) => { foo: n + 1 }; // 誤り
(n) => ({ foo: n + 1 }); // 正しい

そうしないと、オブジェクトリテラルの開始と終了のつもりで書いた中カッコ{}は、ブロック文体の中カッコと解釈され、異なる処理になるからです。上の例では、fooはオブジェクトプロパティのキーではなく、ラベルとして扱われます。

アロー関数の型注釈

TypeScriptのアロー関数では、引数に型注釈が書けます。

ts
const increment = (num: number) => num + 1;
// ^^^^^^^^引数の型注釈
ts
const increment = (num: number) => num + 1;
// ^^^^^^^^引数の型注釈

戻り値の型注釈も書けます。

ts
const increment = (num: number): number => num + 1;
// ^^^^^^^^戻り値の型注釈
ts
const increment = (num: number): number => num + 1;
// ^^^^^^^^戻り値の型注釈

引数のカッコを省略した場合は、引数と戻り値のどちらも型注釈を書けません。

ts
const increment = num => num + 1;
ts
const increment = num => num + 1;

暗黙のanyを禁ずるコンパイラオプションnoImplicitAnyが有効の場合、引数カッコを省略したアロー関数がコンパイルエラーになる場合があります。

ts
const increment = num => num + 1;
Parameter 'num' implicitly has an 'any' type.7006Parameter 'num' implicitly has an 'any' type.
ts
const increment = num => num + 1;
Parameter 'num' implicitly has an 'any' type.7006Parameter 'num' implicitly has an 'any' type.

📄️ noImplicitAny

暗黙のany型を禁ずる

noImplicitAnyが有効でも、引数の型が推論できる場合は、引数カッコが省略できます。たとえば、他の関数の引数にアロー関数を直接書く場合です。次のmap関数は第1引数に関数を取ります。第1引数の型情報、引数の型がついているので、渡されるアロー関数の型注釈は省略できます。

ts
[1, 2, 3].map((num) => num + 1); // 型注釈が省略可
ts
[1, 2, 3].map((num) => num + 1); // 型注釈が省略可
学びをシェアする

・JavaScriptのアロー関数は()=>{}のように短く書ける
・引数が1つの場合、()は省略できる
・処理が1行の場合、{}は省略できる(簡潔文体)
・TypeScriptでは引数カッコ省略時に型注釈が書けない

『サバイバルTypeScript』より

この内容をツイートする

関連情報

📄️ 従来の関数とアロー関数の違い

JavaScriptの関数は、[関数宣言]、[関数式]、[アロー関数]の3とおりの方法で作れます。

📄️ 関数宣言

関数宣言はJavaScriptで関数を定義する構文です。

📄️ 関数式

関数式はJavaScriptで関数を作る方法のひとつで、function式を用います。
  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。