即時実行関数式について

プログラミング教材を使用して勉強しているのですが、その中で、下記のように、HTMLの<script>タグ内に記述しているjavascriptを即時実行関数式で囲っているものがありました。
現在即時実行関数式について調べているのですが、その中で分からないことが2点あります。

①MDNの中で即時実行関数とは「定義されるとすぐに実行される JavaScript の関数」と定義されているのですが、その意味は、関数が呼び出されなくても、ロードされれば記述された処理を実行するという意味でしょうか？

②Javasctiptを下記のように即時関数で囲うのは、MDNの内容から、恐らく関数式内の変数に対する外部からのアクセスを防止することだと思っています。他のサイトでは「スコープの汚染を防ぐため」とまで言っています。
汚染とまで言われる、変数を外部からアクセスできなくするメリットは何でしょうか？

参照：https://developer.mozilla.org/ja/docs/Glossary/IIFE

    <script>
        (function () {
            'use strict';
            var openMenu = document.getElementById('open_menu');
            var menu = document.getElementById('menu');
            var closeMenu = document.getElementById('close_menu');
            openMenu.addEventListener('click', function () {
                menu.classList.add('shown');
            });
            closeMenu.addEventListener('click', function () {
                menu.classList.remove('shown');
            });
        }());
    </script>

行動規範の内容に同意します

回答3件

その意味は、関数が呼び出されなくても、ロードされれば記述された処理を実行するという意味でしょうか？

Yesでもあり、Noでもあります。この関数は、その場で呼び出されています。

汚染とまで言われる、変数を外部からアクセスできなくするメリットは何でしょうか？

何もしない場合、変数名はHTML全体で同じものが有効ですので、いくつもコードを足していったときに、うっかり同じ名前を使ってしまうと、上書きされて不具合の原因となります。

投稿2019/08/11 04:04

maisumakun

総合スコア145201

Silky

2019/08/12 03:44

詳細な解説をありがとうございました！非常に分かりやすく理解することができました。

行動規範の内容に同意します

ベストアンサー

①MDNの中で即時実行関数とは「定義されるとすぐに実行される JavaScript の関数」と定義されているのですが、その意味は、関数が呼び出されなくても、ロードされれば記述された処理を実行するという意味でしょうか？

関数は定義するだけでは実行されず、呼び出されるまで実行されません。
ですので、「呼び出されなくても実行される関数」は存在しません。
あえて正確にいえば、「関数定義直後に実行される関数」が即時関数です。

※「関数オブジェクトの生成」までは、関数定義時に「実行」されますが、そういうニュアンスではないと受け取りました。

②Javasctiptを下記のように即時関数で囲うのは、MDNの内容から、恐らく関数式内の変数に対する外部からのアクセスを防止することだと思っています。他のサイトでは「スコープの汚染を防ぐため」とまで言っています。

汚染とまで言われる、変数を外部からアクセスできなくするメリットは何でしょうか？

グローバル変数が定義された場合、同じ名前の変数を定義しようとした時に名前衝突が発生しますので、既存のグローバル変数名を全て把握しなくてはなりません。
グローバル変数を定義しなければ、Object, Array 等の定義済みのビルトインオブジェクトの名前さえ使わないように注意すれば、名前衝突を気にせず、自由に変数名を定義できます。

今時の実装であれば、グローバルスコープを汚さない方法は「即時関数式」以外にもあるので、用途に合わせて適切な手段を選ぶ事をお勧めします。