JavaScript:参照渡しを値渡しにする

JavaScriptの参照渡しを値渡しにする方法を解説してみましたが、単にjQuery.extend()を使うだけの話でここまで引っ張っちゃってすみません。

以下は使用したスライドです。

以下はビデオのナレーションのスクリプトです。

今回は、参照渡しになってしまうシーンで値渡しをしたいときの方法について説明をします。

参照渡しと値渡し

JavaScriptでは、変数に値をいれたり、関数に値を渡すときには、2つの方法があります。

値渡し

値の中身を渡します。
恐らく、コーディングをしている人にとっては、直感的に期待している動きだと思います。

渡す先の変数の中身を変更しても、渡す元の変数の中身は変わりません。

数値や文字列などのプリミティブ型の値は、値渡しで渡されます。

参照渡し

値の場所を渡します。
ファイルでいえば、ショートカットを作るようなものです。

渡す元の変数と渡す先の変数の実体は、同じものなので、片方の中身を変えるともう片方の中身も変わります。

配列やオブジェクトのオブジェクト型の値は、参照渡しで渡されます。

いつ困る?

例えば、マスターデータとして残しておきたい配列であるにもかかわらず、シャッフル用の関数にかけた場合に、マスターデータもシャッフルされてしまうというような事象が起こります。

どうする?

関数に渡しても元のオブジェクト型の値を変えないようにしなくては、いけません。
つまり、参照渡しを値渡しにする必要があります。

そこで登場するのがjQueryのユーティリティメソッドの$.extend()です。

本来は、複数のオブジェクト型の値をマージするものですが、オブジェクト型の値をコピーするような使い方をすることができます。

$.extend()

extendは、引数に複数のオブジェクト型を設定すると、その全てをマージしたオブジェクト型を返します。
その使い方が本来の使い方ですがこのままだと浅いコピーになります。

浅いコピーがあるということは、深いコピーもあるわけです。

  • 深いコピー
    • 完全なコピーです。私たちの求めるコピーです。
  • 浅いコピー
    • 第一階層まではコピーで、第二階層からは参照となります。

つまり、今回は、深いコピーを使う必要があります。
深いコピーにするには、第一引数にtrueを設定し、第二・第三引数にマージするオブジェクト型の変数を設定します。

書いてみよう

関数に配列を引数で渡したさきほどの例を改修してみましょう。

extendの第一引数にtrueを設定して、第二引数には、カラの配列、第三引数に関数に渡された引数を設定しています。

今回は、配列だったので、カラの配列を用意していますが、オブジェクトをコピーする場合は、カラのオブジェクトを用意します。

引数として渡すときに適用してもいいですが、せっかく関数にしているので、関数の中で処理するほうが楽ですし、ミスも減ります。

最後に

一通りjQueryを触って慣れてくると、知っているメソッドしか使わなくなってきますが、便利に使えるメソッドは、まだまだあります。
たまにjQueryのメソッド一覧を眺めてみると新しい発見があるかもしれません。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

水蕗をフォローする

コメントを残す