【JavaScript講座】関数式とアロー関数

関数式とアロー関数

前回は関数について紹介しました。

【JavaScript講座】関数

2019.08.07

多分、昔から他言語を習得した方にとっては馴染みのある内容だったと思います。

今回は、JavaScript の関数がオブジェクトとして使えるという例を紹介していきます。

それでは、見ていきましょう。



関数式とアロー関数

関数式とアロー関数について説明します。

JavaScript の関数は、他の数値や文字列と同じように扱うことができます。

関数式

関数式を使えば、関数を定数や変数に値として代入することができます。

例えば、下記のような書き方をします。

const sum = function(num1, num2, num3){
    return num1 + num2 + num3;
};

console.log(sum(1, 2, 3));
console.log(sum(4, 5, 6));

結果は以下の通りです。

関数式とアロー関数

ちなみに関数式に渡す関数には名前がないので、無名関数と言ったりします。

アロー関数

ECMAScript 2015(JavaScriptの仕様)で定義された、比較的新しい構文になります。

関数に function というキーワードを今まで使ってきましたが、アロー関数を使えば、より短い記述で関数を定義することができます。

それでは、先程紹介したコードをアロー関数で書き直してみます。

const sum = (num1, num2, num3) => num1 + num2 + num3;

console.log(sum(1, 2, 3));
console.log(sum(4, 5, 6));

同じ結果が得られるかと思います。

頻繁に関数を使う場合、こういった省略化ができるのはありがたいことです。

ただし、注意点もあって、一つはブラウザが対応している必要があることです。

Chrome(クローム)なら問題ないでしょう。

IE では使えません。

マイクロソフトは、Edge に移行することを推奨しているので、そちらを使うようにするべきでしょう。

そうは言っても、多分 IE 使っている人はまだいるでしょう(かなり少ないと思いますが)。

最後に

いかがでしょうか。

JavaScript も進化していて、昔よりもできることが幅広くなっています。

アロー関数については私も初めて学習する内容でした。

プログラミングの歴史を見ていると書き方に関しても時代に影響されているものがあって面白いですね。

日々勉強していきます。