IT~情報と技術

ドットインストール「詳解JavaScript 基礎文法編」で勉強#23(アロー関数を使ってみる)

ドットインストールというオンラインのプログラミング講座に「詳解JavaScript」というのがあります。

これでJavaScriptの基礎を勉強していきましょう。まずは「基礎文法編」から。

今日のメイントピックは、アロー関数を使ってみよう、です。

詳解JavaScript

ドットインストールのレッスン一覧に「②もっと詳しくJavaScriptを学ぼう」というセクションがあります。

ここに3つ並んでいる

  • 詳解JavaScript 基礎文法編(全24回)
  • 詳解JavaScript オブジェクト編(全23回)
  • 詳解JavaScript DOM編(全15回)

で勉強していきたいと思います。

これまでの勉強した内容はこちらです。

基礎文法編 #23

詳解JavaScript 基礎文法編 #23 アロー関数を使ってみよう ←講座はこちら

今日は関数の使い方の1つであるアロー関数が出てきました。

アロー関数

アロー関数: Arrow Function Expressionで、アローは”矢”のことですね。関数式の表現方法として、 => を使うのでそのような名前がついているのでしょう。

MDNのアロー関数を見ると、次のような説明があります。

アロー関数式は、より短く記述できる、通常の function 式の代替構文です。

また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。(MDNのアロー関数から)

要するに、前回習った関数式をより短く記述する構文、のことです。

this, arguments….以下の文は、今はスルーしておきましょう。(このあとでオブジェクトを習ってからでいいです。)

講座で出てきたアロー関数

以下のような例で練習しました。前回のブログ内容と重複しますが、関数宣言 → 関数式 → アロー関数の順番で見ていきましょう。

関数宣言を使っています。

関数宣言関数宣言の説明

関数式に書きなおします。

関数式関数式の説明

アロー関数に書きなおします。

アロー関数アロー関数の説明

アロー関数でかなり短くなりました。

3つとも、例えば  sum(1, 2, 3) で呼び出すと帰り値は”6”と、同じ結果になります。

ここでは、a, b, cと3つの引数を渡していますが、引数が1つだけの場合は丸かっこ ( ) を省略することもできます。

今日のまとめ

今回は、関数式をさらに省略できる表現、アロー関数についてでした。

アロー関数という何か特別な関数があるのか?!と思っちゃいますが、そうではなくて、関数の表現手法の1つですね。

MDNの英語サイトを見てみると”Arrow Function Expression(矢印を使った関数表現)”となっています。

超スローペースなプログラミング学習ですが、マイペースでぼちぼち続けています。

JavaScriptはちょっと難しいですが、がんばって一通りやってみましょう!