JavaScriptの関数に配列を展開して渡す

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

JavaScriptに関するメモ。

JavaScriptの関数に配列を展開して渡す

JavaScriptの関数に配列を展開して渡す

前回の basket.jsでスクリプトのlocalStorage保存を試してみるの所で、実際には色々沢山のスクリプトを一緒に入れてることを試したくて、最初、

<script>
bs_scripts=[];
</script>

みたいなのを用意して、各箇所で

<script>
bs_scripts.push({url: "//ajax.googleapis.com/ajax/libs/jquery/2.4.1/jquery.min.js"});
</script>
{% unless site.share_static %}
<script>
bs_scripts_jquery.push({url: "{{root_url}}/javascripts/share-custom.js", expire: expire});
</script>
{% endunless %}

みたいに必要な物を詰めていって

<script>
basket.require(bs_scripts);
</script>

にしてました。

公式には

details: Either an object or an array of objects with the following fields:

と書いてあるのでこんな感じで連想配列の配列で良いかと思ってましたがこれはダメ。

basket.js の中身を見てみると

basket.js

  window.basket = {
    require: function() {
      for ( var a = 0, l = arguments.length; a < l; a++ ) {
        arguments[a].execute = arguments[a].execute !== false;
        
        if ( arguments[a].once && inBasket.indexOf(arguments[a].url) >= 0 ) {
          arguments[a].execute = false;
        } else if ( arguments[a].execute !== false && inBasket.indexOf(arguments[a].url) < 0 ) {  
          inBasket.push(arguments[a].url);
        }
      }
      ...

みたいになってます。

なので受け取った一つ一つの引数を連想配列として受け取って処理しています。

引数のtypeofとかして配列そのものを理解してくれるのではないらしい。 (そういう意味ではarrayって書くのは紛らわしい感じがしますが (A, B, C)って渡すのもarrayというもの。。。?)

ということで、この様な場合、せっかく配列にしたのでそれをそのまま渡したいわけですが、そうするにはapplyを使って以下の様に書きます。

<script>
basket.require.apply(this, bs_scripts);
</script>

こんな感じで関数にapplyを加えて最初の引数をthisにしてその後配列を与えると

basket.require(bs_scripts[0], bs_scripts[1], bs_scripts[2],...);

と展開して実行してくれます。