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

【JavaScript】変数に関数を代入して呼び出す方法

JavaScriptでは、関数を変数に代入することができます（これを「関数式」と呼びます）。さらに、return文を使うことで、変数に代入した関数の処理結果を呼び出し元に返すことも可能です。

以下の例では、無名関数を変数 studentNames に代入し、その内部で jQuery の each() メソッドを使って各要素の data-st 属性の値を配列に格納しています。最後に return 文で、カンマ区切りに結合した文字列を返しています。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    .demo {
        background: skyblue;
        height: 20px;
        width: 75%;
        margin: 10px;
        padding: 10px;
    }
</style>
</head>
<body>
<div class="demo" data-st="John">John Smith</div>
<div class="demo" data-st="David">David Miller</div>
<div class="demo" data-st="Adam">Adam Smith</div>
<script>
    var studentNames = function() {
        var names = [];
        $(".demo").each(function() {
            names.push($(this).data('st'));
        });
        return names.join();
    };
    console.log( studentNames() );
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、まずファイル名を「anyName.html（index.html）」として保存します。次に、VS Codeエディタ上で保存したファイルを右クリックし、表示されたメニューから「Open with Live Server」を選択してください。ブラウザが起動し、ページが表示されます。

実行結果

上記のプログラムを実行すると、開発者ツールのコンソールに各 div 要素の data-st 属性の値がカンマ区切りで結合され、次のような出力が得られます。

【JavaScript】変数に関数を代入して呼び出す方法

  1. 【JavaScript】外部関数の内側からイベントリスナーを削除する方法

    JavaScriptで、外部関数の内側からイベントリスナーを削除したい場合は、removeEventListener()メソッドを使用します。 リスナーを削除する際のポイント removeEventListener()でリスナーを正しく削除するには、addEventListener()で登録したときと同じ関数への参照を渡す必要があります。そのため、無名関数（匿名関数）をそのまま登録してしまうと、後から削除できなくなる点に注意しましょう。本記事のサンプルコードでは、登録時に名前付き関数funを渡し、それをそのまま外部関数へ引き渡すことで、内側からの削除を実現しています。 コード例 以下が実際

  2. JavaScriptで関数の実行結果をHTMLとして表示する方法

    関数の結果をHTMLとして表示するには？JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス（input type=text）の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h