[JavaScript] 変数宣言var, let, constを一切使わずにコードを書く方法

JavaScript

2020.02.15

JavaScriptで変数宣言するときはvar, let, constのいずれかを使いますよね。

var a = "hello";
let b = "hello";
const c = "hello";

実はこのような変数宣言をせずにコードをよりコンパクトに書くことができます。

実際にGoogleアナリティクスのトラッキングコードでも使われているので例としてみてみましょう。

/* Google Analytics */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
/* End Google Analytics */

変数を使っているが、var, let, constは見当たりませんよね。

これをあえて変数宣言した形に変えてみると以下のようになります。

/* Google Analytics */
(function(){
    var i = window,
    s = document,
    o = 'script',
    g = 'https://www.google-analytics.com/analytics.js',
    r = 'ga',
    a,
    m;
    i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})();

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
/* End Google Analytics */

即時関数を使えば、var, let, constなどの変数宣言をせずにコンパクトにコードを書くことができます。

即時関数について

(function(x, y){ // 仮引数『x』には『1』が、仮引数『y』には『2』が入ります。
    console.log(x + y); // 『3』が出力されます。
})(1, 2); // 引数に『1』と『2』を渡します。

出典：ウェブプログラミングポータル

即時関数は即時に実行される関数です。

あまり見慣れないという方もいるかもしれませんが、

func();
func(1, 2, 3);

このような形ならみたことがあると思います。

関数名の後ろに()をつけると関数が実行できますが、即時関数も形が同じだということに気づいたら理解しやすいかもしれません。

(関数)();

即時関数も関数を定義してそれの後ろに()をつけているだけですね。

Googleとかも、この即時関数をけっこう使ってるので興味がある人は試してみてください。