2025年1月11日土曜日

javascript配列の値渡しと参照渡し

 今回は簡単な備忘録


超簡単に説明するとデータが複数の情報を内包するもの「オブジェクト型」のもの、更に言えば「配列」「連想配列」等も含むものは参照渡し。

逆に単一データを保持する変数は値渡し。


厳密な言い回しは他に行ってもらうとして、ここにたどり着く人は配列の挙動がおかしいって人の為の対応について。

ーーーーーーーーーーーーーー変数代入

var a=[1,2,3,4]
var b=a.slice()

ーーーーーーーーーーーーーー
以上、終わり。


ーーーーーーーーーーーーーー関数引数

var a=[1,2,3,4]
var b=aaa(a.slice())
function aaa(a){}

ーーーーーーーーーーーーーー
以上、終わり。


■簡単な説明説明
今回、知りたいだろうことは配列を参照渡しではなくて値渡ししたい。
もっと言えば、参照先じゃなくて

・配列を別の変数にコピーをしたい
・関数に配列のコピーを渡したい

この二つだと思うので、処理後に新規配列で生成されるメソッド系を使えばOK
sliceは文字や配列を切り出す処理なので、引数に何も渡さない場合は配列を変更せずにコピーを渡すだけの処理になります。

変換の仕方がスマートかと言われるとまぁ微妙な所ですが、まあ一番手っ取り早い方法は確実にこれ。


■すっごい雑な補足

javascriptの場合はもうちょっと具体的に言うと「参照の参照渡し」を行っている
とはえ、おそらく他でも参照渡しで「概ねあってます」という形だと思う。

結局の所、代入先で値を変更すると代入元も値がかわるので・・・



もっと楽な方法

ーーーーーーーーーーーーーー変数代入

var a=[1,2,3,4]
var b=[...a]

ーーーーーーーーーーーーーー
以上、終わり。


ーーーーーーーーーーーーーー関数引数

var a=[1,2,3,4]
var b=aaa([...a])
function aaa(a){}

ーーーーーーーーーーーーーー


■すっごい雑な補足
この「...」って何?これはスプレッド構文といいます。
配列やオブジェクトの一番外側の括りを展開します。
データとしては上記aなら「...a」と記述した場合「1,2,3,4」ベタ要素が展開されます。
この展開されたベタ要素を受け取ることが出来るのは今言った通り配列かオブジェクト、あとは関数の引数です(ジェネレーター関数周りで使う事もありますが覚えなくていいです)。

■つまり?
「[...a]」と記述すると「[1,2,3,4]」この様に配列内で要素が展開されて名前のない配列が新しく作成されることで結果的に新しい配列を変数に代入したり関数の引数に渡す事が出来ます。



■あと注意点として、どちらも「浅いコピー」です。ネストされた配列やオブジェクトは結局参照が渡されます。ですので1次配列やオブジェクトの階層が1つしかない場合のみという事は留意してください。