【JavaScript】配列とオブジェクトの値渡しをする方法

はじめに

コジマです。

JavaScriptで値渡しをする方法についてまとめます。

JavaScriptに参照渡し、値渡しの概念がないみたいな話も聞きますが、
ここではあえてこのような表現をいたします。
円周率は3.14だよという気持ちで見てください。

JavaScriptは参照渡し？

配列やオブジェクトを何の気なしに「=」で更新しようとすると参照渡しされてしまいます。

一時的にtmpに避けておきたいと思ったのに、

配列

参照渡しサンプル

コピー先が釣られて値変わるパターン

const arr1 = [1, 2, 3, 4, 5]

// 参照渡し
const arr2 = arr1

// arr1を更新する
arr1[0] = 10 

// arr1が更新されていることの確認
console.log(arr1)

// obj2が更新されてしまうことの確認
console.log(arr2)

> Array [10, 2, 3, 4, 5]
> Array [10, 2, 3, 4, 5]

コピー元が釣られて値変わるパターン

const arr1 = [1, 2, 3, 4, 5]

// 参照渡し
const arr2 = arr1

// arr2を更新する
arr2[0] = 10 

// arr1が更新されてしまうことの確認
console.log(arr1)

// obj2が更新されていることの確認
console.log(arr2)

> Array [10, 2, 3, 4, 5]
> Array [10, 2, 3, 4, 5]

値渡しサンプル

slice関数が使えます。
コピー元の配列から引数で与えた範囲を値渡しでコピーできます。

引数なしだと全範囲対象となるので、ここであ引数を与えずに丸コピします。

const arr1 = [1, 2, 3, 4, 5]

// 値渡し
const arr2 = arr1.slice()

// arr2を更新する
arr2[0] = 10 

// arr1が更新されていないことの確認
console.log(arr1)

// obj2が更新されていることの確認
console.log(arr2)

> Array [1, 2, 3, 4, 5]
> Array [10, 2, 3, 4, 5]

オブジェクト

参照渡しサンプル

コピー先が釣られて値変わるパターン

const obj1 = { a: 1, b: 2 }

// 参照渡し
const obj2 = obj1

// obj1を更新する
obj1.a = 10

// obj1が更新されていることの確認
console.log(obj1)

// obj2が更新されてしまうことの確認
console.log(obj2)

> Object { a: 10, b: 2 }
> Object { a: 10, b: 2 }

コピー元が釣られて値変わるパターン

const obj1 = { a: 1, b: 2 }

// 参照渡し
const obj2 = obj1

// obj2を更新する
obj2.a = 10

// obj1が更新されてしまうことの確認
console.log(obj1)

// obj2が更新されていることの確認
console.log(obj2)

> Object { a: 10, b: 2 }
> Object { a: 10, b: 2 }

値渡しサンプル

assign関数が使えます。
元の関数に対して引数で与えたオブジェクトを上書きしていく関数です。

コピー元のオブジェクトに空のオブジェクトを使用することで値渡しの
オブジェクトのコピーを作成できます。

const obj1 = { a: 1, b: 2 }

// 値渡し
const obj2 = Object.assign({}, obj1)

// obj2を更新する
obj2.a = 10

// obj1が更新されていないことの確認
console.log(obj1)

// obj2が更新されていることの確認
console.log(obj2)

> Object { a: 1, b: 2 }
> Object { a: 10, b: 2 }

さいごに

今回の話まとめます。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！

もっと学びたい人はこちら

JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

以上、コジマでした。