IT~情報と技術

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

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

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

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

詳解JavaScript

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

ここに3つ並んでいる

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

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

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

基礎文法編 #22

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

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

関数式

MDNの関数を見てみましょう。下の方に関数を定義するというセクションがあり、関数を定義するやりかたがいくつかあることが分かります。

1番上にある関数宣言は、以前習った一般的な方法。

2番目にあるのが関数式です。説明を見てみましょう。

関数式は、関数宣言と似ており、同じ構文を持っています。関数式はより大きな式の一部になることもあります。「名前付き」の関数式を定義することもできますし、「無名の」関数式を定義することもできます。関数式はスコープの開始時に「巻き上げ」られないので、コード内でそれらが登場するより前に使用することはできません。(MDNの関数の中での関数式の説明から、一部を省略しています。)

なんのこっちゃ・・・・。

  • 関数式は、関数宣言と似ていて構文は同じである。
  • 関数式は、式の中で使われることもある。
  • 「名前付き」と「無名」の関数式がある。
  • 使う場合にはまず定義しておく必要がある。

こんな感じでしょうか。

ちなみにMDNの関数式のページだとこのような説明がトップにあります。

function キーワードは、式の中で関数を定義するために使用されます。(MDNの関数式から)

講座で出てきた関数式

以下のような例で練習しました。前回のreturnで値を返す練習をしたコードを使います。

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

関数宣言関数宣言の説明

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

関数式関数式の説明

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

ちなみに、関数式をいきなりポンと置くとエラーになります。

例えば、上記のコードで const sum = を省略して function(a, b, c) から始めると、エラーになります。

このコードで実際やってみたら、「X Uncaught SyntaxError: Unexpected token (」と出ました。赤色で出てなんだか怒られている感じです。^^;

今日のまとめ

今回は、関数の定義方法の1つである関数式についてでした。

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

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