読者です 読者をやめる 読者になる 読者になる

JavaScriptのアロー関数について

javascript

開発部の佐野です。

JavaScriptのECMAScript6で追加されたアロー関数を紹介します。

これは、要は関数を定義する構文です。 従来のfunctionと書く定義とは少し挙動が違います。 それに加えて、より短く簡単に関数を定義できるというのもメリットになります。

ただ、このアロー関数は括弧を省略できたりして、意外と覚えにくい機能です。 特にES6の新しい構文に慣れていない人は混乱しがちです。

例えば、以下の書き方は全て同じ結果になります。

name => 'Hello ' + name;
name => { return 'Hello ' + name; };
(name) => 'Hello ' + name;
(name) => { return 'Hello ' + name; };

左右どちらの括弧も省略できるため、結果的に4パターンの書き方があります。 引数が複数の場合や、処理が複数行の場合は省略できません。

アロー関数はES6の構文で書く場合は必須となる構文なので、覚えると将来役に立つでしょう。 また、ES6で書かれたJavaScriptが読めない人の原因は、大抵このアロー関数が理解できない場合が多い気がします。 逆にこれさえ分かれば、敬遠しがちだった最新のJavaScriptソースコードもグッと理解しやすくなると思います。

以上、アロー関数の紹介でした。