JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで関数リテラルを使って関数を定義する方法をわかりやすく解説

JavaScriptでは、関数リテラル（function literal）を使うことで、名前のない関数（無名関数）を定義できます。この概念はJavaScript 1.2で導入されたもので、従来のfunction宣言とは異なる、もうひとつの関数定義の方法です。

関数リテラルとは？

関数リテラルは、関数を定義する「式」です。通常の関数宣言と違い、関数に名前を付けずにそのまま変数へ代入できるのが特徴です。この形式で定義された関数は無名関数（匿名関数）とも呼ばれ、変数経由で呼び出します。

基本的な構文

var 変数名 = function(引数1, 引数2) { 処理 };

サンプルコード

以下の例では、関数リテラルを使って2つの引数を掛け合わせる無名関数を定義し、変数funcに代入しています。ボタンをクリックするとsecondFunction()が実行され、結果が画面に表示されます。

<html>
<head>
  <script>
    var func = function(x, y) { return x * y };
    
    function secondFunction() {
      var result;
      result = func(10, 20);
      document.write(result);
    }
  </script>
</head>

<body>
  <p>次のボタンをクリックして関数を呼び出してください</p>
  <form>
    <input type="button" onclick="secondFunction()" value="Call Function">
  </form>
  <p>関数内の引数を変えて試してみてください...</p>
</body>
</html>

実行結果

ボタンをクリックすると、func(10, 20)が評価され、200という結果が表示されます。

補足：モダンな書き方との比較

現在のJavaScript（ES6以降）では、同じ処理をより簡潔に書けるアロー関数も利用できます。

const func = (x, y) => x * y;

どちらも「式として関数を定義する」という点では共通していますが、アロー関数はthisの扱いなど挙動が異なる部分もあるため、用途に応じて使い分けることが重要です。

  1. JavaScriptコールバック関数とは?基本から実践的な使い方まで徹底解説

    コードの中で「callback(コールバック)」という言葉を目にしたことがある方は多いのではないでしょうか。コールバック関数とは、別の関数に引数として渡される特別な種類の関数のことです。 コールバックはイベントハンドラの中でよく使われ、特定のコードブロックを実行するために活用されます。この記事では、コールバック関数とは何か、どのように動作するのかを解説し、実際のコード例を通して使い方を学んでいきます。 コールバック関数とは? コールバック関数とは、別の関数にパラメータ(引数)として渡される関数のことです。 コールバック関数は、それが渡された関数の中で実行されます。関数を実行するとき、コールバッ

  2. JavaScript関数の使い方を徹底解説！初心者向けステップバイステップガイド

    JavaScriptの関数とは、再利用できるカスタムコードブロックのことです。関数を活用することでコードのモジュール化が促進され、オブジェクト指向プログラミングにおいても欠かせない存在となります。関数は「宣言」または「式」のいずれかの方法で定義できます。 これからJavaScriptを学ぼうとしている方にとって、JS関数の基礎は必ず押さえておきたい重要ポイントです。プログラミング言語に触れた経験がある方なら、関数が複雑なプログラムを組み立てるための基本的な部品であることはご存じでしょう。しかし、その仕組みまで理解している方は少ないかもしれません。関数を使えば、共通の処理を一度書くだけで済