JavaScript

JavaScriptの関数式で関数を作る【使う時の注意点も解説】

どうも、つよぽんです!

今回は、JavaScriptの関数式について解説をします。

今回解説する「関数式」はJavaScriptで関数を定義する1つの方法となります。

前回記事でも、JavaScriptで関数を定義する別の方法として「関数宣言」について解説しました。

関数宣言について忘れてしまった方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
【入門】JavaScriptで関数を定義する【関数宣言・意義】JavaScriptでは関数の定義方法が3つあります。①関数宣言、②関数式、③アロー関数。この3つの内、今回は①関数宣言を使った関数の定義方法を取り上げます。その他にも「関数の実行方法」「なぜ関数を作るのかの意義」についても解説します。...

今回の記事は次のような方に向けて書きました。

想定読者
  • 関数式って何?
  • 関数宣言と関数式の違いを知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。

以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの関数を変数に代入する【関数式】前回は関数の作り方を学習しました。今回は関数の別の書き方である「関数式」について学習します。前回の関数の書き方は「関数宣言」と呼ます。「関数宣言」と「関数式」の書き方の違いや、挙動の違いについて理解していきましょう。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptの関数式とは
  2. JavaScriptの関数式の書き方
  3. JavaScriptの関数式を使うときの注意点

 

JavaScriptの関数式とは

この章では「JavaScriptの関数式とは何か?」について解説していきます。

JavaScriptでは関数を定義する方法として次の3つがあります。

3つの関数定義の方法
  1. 関数宣言
  2. 関数式
  3. アロー関数

関数式は上記の通り、関数を定義する1つの書き方になります。

前回記事で解説した「関数宣言」との違いは、「関数を変数に代入する or 代入しない」の違いです。

関数式は「関数を変数に代入する」方の書き方となります。詳しい書き方は次の章で解説していきます。

関数を変数に代入しない」書き方である関数宣言については、以下の記事で詳しく解説しているので、そちらを参考にしていただけたらと思います。

あわせて読みたい
【入門】JavaScriptで関数を定義する【関数宣言・意義】JavaScriptでは関数の定義方法が3つあります。①関数宣言、②関数式、③アロー関数。この3つの内、今回は①関数宣言を使った関数の定義方法を取り上げます。その他にも「関数の実行方法」「なぜ関数を作るのかの意義」についても解説します。...

JavaScriptの関数式の書き方

この章では「JavaScriptの関数式の書き方」を解説していきます。

以下の画像はJavaScriptの関数式の書き方を解説したものとなります。

関数式の書き方関数式の書き方

基本的には、②関数宣言したものを①変数に代入するだけです。

ただ、関数式のときは、関数宣言で「function」キーワードの直後に書いていた「関数名」が不要となります。

以下の画像は、関数式を使って関数を定義したサンプルコードとなります。

関数式を使って関数を定義したサンプルコード関数式を使って関数を定義したサンプルコード

上の画像のサンプルコードは以下のリンク先で直接確認することも出来ます。

関数式のサンプルその1

関数式では関数名が不要となると説明しましたが、それではどのように関数式で定義した関数を実行すれば良いのでしょうか

関数式の場合は変数名が関数名と同じ役割になるので、関数式の関数実行時は「変数名()」となります。(関数宣言のときは「関数名()」で関数を実行する。)

以下の画像は「関数宣言」「関数式」の2つで「hello関数」を作った様子を表したもので、どちらも「hello()」で「hello関数」を実行することが出来ます。

関数宣言と関数式の書き方比較関数宣言と関数式の書き方比較

「関数宣言」「関数式」では基本的には同じ挙動をしますが、関数を実行するタイミングによってはうまく動作しないことがあります。

どういうときに動作しないのか、その注意点を次の章で解説します。

JavaScriptの関数式を使うときの注意点

この章では「JavaScriptで関数式を使うときの注意点」について解説していきます。

前の章では「関数宣言」と「関数式」の書き方を比較して、どちらも次のような方法で関数を実行することが出来ることを説明しました。

関数の実行方法
  • 関数宣言 : 「関数名()」で関数を実行
  • 関数式 : 「変数名()」で関数を実行

関数宣言と関数式で同じように関数を実行することが出来ましたが、両者では関数を実行できるタイミングが異なります。

まず最初に、関数宣言と関数式で関数を実行できるタイミングを次にまとめます。

関数を実行できるタイミング
  • 関数宣言 : 関数定義されていればどこからでも関数を実行できる
  • 関数式 : 関数式が書かれた後でないと関数を実行できない

関数宣言 : 関数定義されていればどこからでも関数を実行できる

以下の画像は関数宣言で定義した「hello2関数」の前後でhello2関数を実行している様子を表したものです。

関数宣言で定義した関数を実行できるタイミング関数宣言で定義した関数を実行できるタイミング

関数宣言の場合は関数定義の前でも後でも「hello2()」で関数を実行することができます。

以下のリンク先から上の画像のコードの実行結果を確認することが出来ます。

関数式のサンプルその2

関数式 : 関数式が書かれた後でないと関数を実行できない

以下の画像は関数式で定義した「hello関数」の前後でhello関数を実行している様子を表したものです。

関数式で定義した関数を実行できるタイミング関数式で定義した関数を実行できるタイミング

関数式の場合は関数定義の前の「hello()」が実行できずエラーになります。

以下のリンク先から上の画像のコードの実行結果を確認することが出来ます。

関数式のサンプルその2

1つ目の「hello()」部分はコメントアウトしています。(エラーになって処理が途中で止まるのを防ぐため。)

コメントアウトを外すと実行されないことが確認できます。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 関数式は、定義した関数を変数に代入する書き方である
  2. 関数式を書くときは関数宣言のときに記述した「関数名」が不要となる
  3. 「関数名」が不要となる代わりに、変数名が関数名の役割を果たし「変数名()」で関数を実行できる
  4. 関数式と関数宣言では、関数を実行できるタイミングが異なるため気を付ける

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの関数を変数に代入する【関数式】前回は関数の作り方を学習しました。今回は関数の別の書き方である「関数式」について学習します。前回の関数の書き方は「関数宣言」と呼ます。「関数宣言」と「関数式」の書き方の違いや、挙動の違いについて理解していきましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です