モダンなJavaScriptのお勉強：アロー関数編

ひさびさにモダンな JavaScript のお勉強ネタを書きます。

今回は、アロー関数について勉強しています。アロー関数は、ES2015から追加された関数の記述方法の一つです。

まず、従来の関数の記述方法をおさらいしておきましょう。

次のように、function のあとに関数名、そして( ) で囲んだ引数名を指定し、関数の処理は { } で囲みます。

function sayHello(yourname) {
    return "Hello! " + yourname;
}

console.log(sayHello("Nobe"));

このコードを実行すると、次のようになります。

結果：

Hello! Nobe

また、次のように関数を変数に代入して扱うこともできます。

const hellofunc = function sayHello(yourname) {
    return "Hello! " + yourname;
}
console.log(hellofunc("Nobe"));

このコードの実行結果は、最初のコード例と同じです。

結果：

Hello! Nobe

では、アロー関数の記述方法をみていきます。

アロー関数では、関数自体に名前を付けず、いきなり引数から記述するのが特徴です。

次の例では、(yourname) が関数の引数を表しています。その後に　=> と記載し、関数内の処理を { }内に記載します。

(yourname) => { 
    return "Hello! " + yourname;
}

つまり、yourname という引数を受け取り、それに Hello という文字列を連結して return するという関数になります。関数の名前はありませんが、次の例のように変数に代入して、変数名で呼び出すことができます。

const hello_arrow1 = (yourname) => { 
    return "Hello! " + yourname;
}
console.log(hello_arrow1("Nobe1"));

結果：

Hello! Nobe1

まずは、(引数) => { 関数の処理 } という基本形を覚えておくとよいでしょう。

ただ、アロー関数では、省略した記述ができるケースがあります。例えば、引数が1つの場合は、次のように引数を囲んでいる ( )を省略できます。

// 引数が1つの場合は、() を省略できる
const hello_arrow2 = yourname => { 
    return "Hello! " + yourname;
}
console.log(hello_arrow2("Nobe2"));

結果：

Hello! Nobe2

逆にいうと、引数が複数の場合は、引数を囲む ( )は必須になります。

// 引数が複数の場合は、() が必要
const hello_arrow3 = (yourname,youraddress) => { 
    return "Hello! " + yourname + " in " + youraddress;
}
console.log(hello_arrow3("Nobe3","Kyoto"));

結果：

Hello! Nobe3 in Kyoto

その他の省略可能なルールとして、次の例をみてみましょう。

// 関数の処理が単一行でその結果をreturnする場合は、{} と return 句を省略できる
const hello_arrow4 = yourname => 
  "Hello! " + yourname;
console.log(hello_arrow4("Nobe4"));

結果：

Hello! Nobe4

本来は関数の処理として { return "Hello! " + yourname; } と記述するのですが、処理が単一行であれば、関数の処理を囲む { } と return 句を省略できるので、このような記述になるわけです。

逆にいうと、処理が複数行になる場合は、次のように関数の処理を囲む{ }は必須で、関数が値を返す場合は return 句も必要になります。

// 関数の処理が複数行になる場合は、{}が必要。return 句は省略できない
const hello_arrow5 = yourname => {
  const greeting = "Hello! ";
  return greeting + yourname;
}
console.log(hello_arrow5("Nobe5"));

結果：

Hello! Nobe5

次に、オブジェクトのように複数行を return する場合をみてみましょう。この場合、return する値を ( ) で囲むことで、そのオブジェクトを return することになります。

// returnする内容が複数行になる場合は、() で囲む
const hello_arrow6 = (yourname,youraddress) => (
     {
        name:    yourname,
        address: youraddress
     }
)
console.log(hello_arrow6("Nobe6","Kyoto"));

結果：

{ name: 'Nobe6', address: 'Kyoto' }

まとめ

JavaScript ではなく、Java 言語のラムダ式をご存じの場合は、このアロー関数がよく似ていると感じるでしょう。 JavaScript のアロー関数にせよ、Java 言語のラムダ式にせよ、基本的な記述方法がわかっていれば、コードを読み解くことは難しくありません。アロー関数では、基本的に => があれば、その左にあるものは引数、右にあるものが関数の処理本体として読み解くと良いでしょう。

のべラボ.blog

Tech Blog | AWS やサーバーレスやコンテナなどなど

モダンなJavaScriptのお勉強：アロー関数編

まとめ