スライドショー

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

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

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

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

具体的な内容としては、

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

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

JavaScriptの参照渡しとは

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

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

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

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

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

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

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

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

値渡しと参照渡し

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

値渡しをする方法

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

var x, y;
x = "Hello";
y = x;
y = "Good Night";

console.log(x);
console.log(y);

実行結果:

> "Hello"
> "Good Night"

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

参照渡しをする方法

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

var x, y;
x = {greeting: "Hello"};
y = x;
y.greeting = "Good Night";

console.log(x.greeting);
console.log(y.greeting);

実行結果:

> "Good Night"
> "Good Night"

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

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

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

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

var x, y;
x = {greeting: "Hello"};
y = JSON.stringify(x);
y = JSON.parse(y);
y.greeting = "Good Night";

console.log(x.greeting);
console.log(y.greeting);

実行結果:

> "Hello"
> "Good Night"

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

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

参照渡しの注意点

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

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

まとめ

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

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

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

おすすめコンテンツ

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

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