スライドショー

【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

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

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