【JavaScript入門】参照渡しの使い方(値渡し/オブジェクト)

参照渡しの使い方 値渡し╱オブジェクト

こんにちは! エンジニアのワカツキと申します。

今回は、参照渡しなどのJavaScriptにおける値の代入について詳しく解説します。

具体的な内容としては、

  • 参照渡しとは何か
  • プリミティブ型とオブジェクト型について

など値の代入について詳しく理解するために必要なJavaScriptの基礎知識と「オブジェクトを値渡しする方法」など応用的な内容まで踏み込んで行きます!

JavaScriptの参照渡しとは

参照渡しとは、代入が行われる際に、値をそのまま渡すのではなく、参照先を渡すような仕様のことを指します。

たとえば、a = bという代入文の場合、aにbの値を代入するのではなく、aにbの参照先を渡すことで、aを指定した時に参照先をたどってbを取得します。

また、これとは別に値をそのまま渡すような仕様のことを値渡しと呼びます。

そして、とても重要なポイントが、JavaScriptではプリミティブ型は値渡し、オブジェクト型は参照渡し、と決まっているということです。この点をしっかりと押さえておきましょう。

プリミティブ型とオブジェクト型

JavaScriptにおいては、数値・文字列・真偽値(論理値)に加えてnull・undefinedなどがプリミティブ型です。その他のオブジェクトは全てオブジェクト型と呼ばれます。

例えば、999などの数字や”こんにちは”などの文字列、trueなどの真偽値(論理値)はプリミティブ型です。

一方「配列」や「連想配列(Object)」はオブジェクト型の仲間になります。

値渡しと参照渡し

それでは、サンプルコードの結果を見ながら値渡しと参照渡しについて理解していきましょう!

値渡しをする方法

まずは、文字列の代入をしてみましょう。

実行結果:

このように、文字列はプリミティブ型なので、値渡しになります。値渡しは値の参照ではなくコピーなので、元の値が影響されません。

参照渡しをする方法

それでは、オブジェクト型で参照渡しをする例をみてみましょう。

実行結果:

オブジェクト型は元の値を参照するため、値を代入すると元のオブジェクトの値にも影響がでます。これが参照渡しです。

オブジェクトを値渡しする方法

先ほども述べた通り、JavaScriptではプリミティブ型が値渡し、オブジェクトは参照渡しと決まっています。

少し裏技的な方法ですが、オブジェクトを参照渡しではなく値渡しするためには、以下のような方法があります。

実行結果:

このコードでは、JSON(Objectオブジェクト)stringifyメソッドで文字列化して、改めてパース(parseメソッド)することで、値渡しのように同じ値をコピーしています。

このような方法で、オブジェクトを値渡し(厳密にはコピー)を行うことが可能になります!

参照渡しの注意点

参照渡しでは、サンプルコードで確認したように元の値を書き換えてしまうので、代入した値が参照先なのか値そのものなのかを注意する必要があります。

また、元の値を書き換えたくない場合は、新しい値としてコピーする必要があり、その方法はオブジェクトの種類によって異なります。

まとめ

いかがだったでしょうか!

少し踏み込んだ内容ではありますが、JavaScriptで変数を扱う上で、参照渡しなのか値渡しなのかによって処理の結果が大きく異なります

JavaScriptで代入を行う際には、それが値渡しなのか、参照渡しなのかを意識しながら、コーディングを行いましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説