【モダンJavaScript】アロー関数の基本操作

2024年2月11日

当ページには広告が含まれています。

こんにちは、DXCEL WAVEの運営者(@dxcelwave)です！

こんな方におすすめ！

モダンJavaScriptのアロー関数の使用方法について詳しく知りたい！

【JavaScript】アロー関数とは

アロー関数とはES2025で追加されたJavaScriptの新しい関数記法です。

従来よりシンプルに関数記述ができる点が特徴的です。本記事では従来の関数記法とも見比べながらアロー関数の詳しい概要について解説していきます。

【参考】JavaScript従来型の関数記法の特徴

はじめに従来の関数を振り返ります。以下は引数として受け取った値をそのまま返却する関数を実行し、コンソールに出力した例です。

記述方法（１）

// 関数
function test1(value){
     return value;
}

// コンソール出力
console.log(test1("this is a test1 function"))


// 出力
// this is test1 function

記述方法（２）

// 関数
const test1 = function(value){
     return value;
}

// コンソール出力
console.log(test1("this is a test1 function"))


// 出力
// this is test1 function

従来の関数記法は、functionという宣言を用いて関数名（引数名）｛処理内容｝と続けて記述するのが特徴的でした。

【JavaScript】アロー関数の基本操作

アロー関数を宣言する際、従来のようにfunctionは使用せずに次のように記述することができます。

// アロー関数
const test2 = (value) => {
     return value;
}

// コンソール出力
console.log(test2("this is test2 function"))


// 出力
// this is test2 function

functionは宣言せず、（）の中に引数を指定し、＝＞という記号の後に処理内容を記述します。

【JavaScript】アロー関数記述の際の留意点

後述ではアロー関数を宣言する際に留意すべき観点を整理していきます。

引数の指定方法

アロー関数で引数を指定する際、引数が１つの場合は（）の省略が可能です。

1つの引数指定

// アロー関数
const test2 = value => {
     return value;
}

// コンソール出力
console.log(test2("this is test2 function"))

// 出力
// this is test2 function

複数の引数指定

// アロー関数
const test2 = (value1, value2) => {
     return value1 + value2;
}

// コンソール出力
console.log(test2(3,5))


// 出力
// 8

引数のデフォルト値

引数名の後ろに＝で値を指定すると、関数に引数が渡されなかった場合のデフォルト値として使用できます。

// アロー関数
const test2 = (value = "hello world") => {
     return value;
}

// コンソール出力
console.log(test2())

// 出力
// hello world

戻り値の記述方法

戻り値return記述の際、処理が単一行で記述できる場合は｛｝が省略できます。

1行からなる戻り値

// アロー関数
const test2 = (value) => value;

// コンソール出力
console.log(test2("hello world"))


// 出力
// hello world

以下のように（）で囲むと1行のよにまとめて戻り値を返すこともできます。


// アロー関数
const test2 = (value1,value2) => (
     {
      country:value1,
      capital:value2
     }
     );

// コンソール出力
console.log(test2("日本","東京"))


// 出力
// {country: "日本", capital: "東京"}