0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【JavaScript】変数 参照&コピー(プリミティブ値とオブジェクトの挙動)について

Last updated at Posted at 2024-11-25

変数を参照&コピーした際の「"プリミティブ値"と"オブジェクト"の挙動」についての備忘録です。

基礎的な内容ではありますが、初心に帰ってまとめていく。

1: 参照とコピーに入る前に。


■プリミティブやオブジェクトなどの「データ型」について。

・変数は「データ型」という8種類のデータを持っている。
・その8種類のデータ型もJavaScriptでは2つに分けられる。それが【プリミティブ型とオブジェクト】の2つ。

①プリミティブ型(7種類)
・真偽値(Boolean)、数値(Number)、文字列(String)、undefind(Undefind)、null(Null)、シンボル(Symbol)、BigInt(BigInt)

②オブジェクト(1種類)
・Object(プリミティブ型以外の全て)
オブジェクトというのは「プロパティとその値を次いで格納する入れ物」


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

プリミティブ型 オブジェクト
String / Null
Number / Symbol
Boolean / BigInt
Undefind
Object(プリミティブ型以外の全て)


■参照とコピーについて(概念)

・参照
「変数などの値や、オブジェクトのプロパティ」を参照すること。

参照
let a = 'hello'; //変数aは「'hello'」を参照している。

let c = {
  prop: 'hello' //変数cは「オブジェクト{}」と「プロパティ&値prop: 'hello'」を参照している。
};

・コピー(代入)
「変数aから変数bに代入すること。」

コピー
let a = 'hello';
b = a; //変数bは変数aを「コピー」している。


1: 「プリミティブ値」のコピー

■プリミティブ値のコピー
・プリミティブ値をコピーすると「コピー元とコピー先の値は変更される。」
これはコピーすると「メモリ空間(プログラミングの記憶装置)」のようなものに値が保管され、その値を各自管理しておくためのもの。
下記の例で言うとlet aは'hello'を参照している。その変数aを変数bにコピー(代入)すると「プリミティブ値'hello'は新しいメモリ空間に新しくコピーされ、変数bが参照している'hello'は全くの別物となる。」

その後「変数bに新しいプリミティブ値'bye'」を代入すると【変数bの参照先は'bye'に変更されます。】

プリミティブ値のコピー
let a = 'hello';
let b = a; //ここで変数aをbにコピー。変数bの参照先は「新しい値'hello'」です

b = 'bye'; //この時の変数bの参照先は「新しい値'bye'」です

2: 「オブジェクト」のコピー

■オブジェクトのコピーは「変数aはオブジェクトそのもの{}と、プロパティpropと、値'hello'」を参照している。
これを変数bにコピーするとどうなるか?
⬇︎
・変数bにコピーしても参照しているオブジェクトは「変数aのプロパティpropと、値'hello'」を参照します」。
これは、変数bの参照が保持している値は【変数aのオブジェクトへの実態】なので、コピーされた後も「変数aのプロパティpropと、値'hello'」を参照します」。
⬇︎
そして「変数bのプロパティpropに新しい値として'bye'」を入れると【変数aのprop参照先も'bye'に変更】されます。


オブジェクトのコピー

let a = {
  prop: 'hello' //変数aは「オブジェクト{}」と「プロパティ&値prop: 'hello'」を参照している。
};

let b = a; //変数aオブジェクトを、変数bにコピー!

b.prop = 'bye'; //b.propに新しい値'bye'を入れると「変数aのprop参照先も'bye'に変更される。」

⬇︎
■上記を図解

無題.png

3: まとめ

・プリミティブ値のコピー
「参照先の値」がコピーされる。

・オブジェクトのコピー
「オブジェクトへの参照」がコピーされる。


「初歩的な参照とコピーをうっかり間違えてしまった!」なんてことがあると思いまとめてみました。(何を学ぶにしてもこのような感じでメモしておくと良いですね…)
以上、参照&コピーの備忘録でした。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?