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

JavaScriptのクロージャとネストされた関数の違いとは？具体例でわかりやすく解説

JavaScriptにおけるクロージャ（Closure）とは？

JavaScriptでは、すべての関数がクロージャとして動作します。クロージャとは、関数が呼び出された際に「その関数が宣言された場所のスコープ」を使用する仕組みのことです。呼び出された場所のスコープではなく、定義された場所のスコープを参照する点が最大の特徴です。

次のサンプルコードで挙動を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <h2>JavaScript Closures</h2>
      <script>
         var p = 20;
         function a() {
            var p = 40;
            b(function() {
               alert(p);
            });
         }
         function b(f) {
            var p = 60;
            f();
         }
         a();
      </script>
   </body>
</html>

このコードを実行すると、アラートには 40 が表示されます。無名関数は関数 b() の中で呼び出されていますが、参照しているのは自分が定義された関数 a() のスコープにある変数 p（値は40）だからです。関数 b() 内の p = 60 は使用されません。これこそがクロージャの動作です。

JavaScriptにおけるネストされた関数（入れ子関数）とは？

JavaScript 1.2以降では、関数の中に別の関数を定義する「ネストされた関数（入れ子関数）」がサポートされています。ただし、function文による関数宣言の場合、ループや条件分岐（if文など）の中に関数定義を記述できないという制限がある点に注意してください。

ネストされた関数の実装例

次の例では、直角三角形の斜辺の長さを求める hypotenuse() 関数の中に、2乗を計算する square() 関数をネストさせて定義しています。

<html>
   <head>
      <script>
         function hypotenuse(a, b) {
            function square(x) {
               return x * x;
            }
            return Math.sqrt(square(a) + square(b));
         }

         function secondFunction() {
            var result;
            result = hypotenuse(5, 4);
            document.write(result);
         }
      </script>
   </head>
   <body>
      <p>次のボタンをクリックして関数を呼び出してください</p>
      <form>
         <input type="button" onclick="secondFunction()" value="Call Function">
      </form>
      <p>関数内で異なるパラメータを指定して試してみましょう</p>
   </body>
</html>

ボタンをクリックすると hypotenuse(5, 4) が実行され、結果である約6.4（√41）が画面に出力されます。内側の square() 関数は外側の関数からしかアクセスできないため、補助的な処理をカプセル化するのに役立ちます。

クロージャとネストされた関数の違いまとめ

項目説明
クロージャ関数が定義されたスコープの変数への参照を保持し続ける「仕組み」。呼び出し場所に関係なく、定義時のスコープが使われる。
ネストされた関数関数の内部に別の関数を定義する「構造」。内側の関数は外側の関数の変数や引数にアクセスできる。

つまり、ネストされた関数は外側のスコープの変数を参照できるため、それがまさにクロージャとして動作する基盤となります。両者は対立する概念ではなく、ネストされた関数がクロージャを実現するための代表的な形だと理解しておくと良いでしょう。

  1. JavaScriptのカスタム関数と組み込み関数の違いをわかりやすく解説

    JavaScriptにおけるカスタム関数とは、開発者自身が目的に合わせて定義・作成する「ユーザー定義関数」のことです。JavaScriptでは、処理内容に応じて独自の関数を自由に記述できます。一方、組み込み関数は、あらかじめJavaScriptライブラリ側で用意されている関数であり、自分で実装しなくてもすぐに呼び出して利用できるのが特徴です。 カスタム関数の基本構文 カスタム関数は、functionキーワードを使って次のように定義します。 <script>    <!--       function functionname

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方