ぽんぽこ開発日記

主にHTML, CSS, JavaScriptなどフロントエンドの話を。目指せ脱初心者。

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

JavaScriptで扱えるデータの種類は多数ありますが、大きく分けるとプリミティブ型とオブジェクト型に分類することができます。まずはその関係性について整理し、次にその違いについて確認していきましょう。

JavaScriptで扱えるデータ型一覧

まずJavaScriptのデータの種類を大きく分けるとプリミティブ型とオブジェクト型に分かれます。

プリミティブ型数値・文字列・論理値・null・undefined
オブジェクト型各オブジェクト

※オブジェクトに関してはまた別の機会に整理していきたいと思います。この記事ではひとまずプリミティブ型とオブジェクト型の特徴にフォーカスして進めていきます。

プリミティブ型とオブジェクト型の違い・特徴

変数を操作する際、この両者の違いは非常に重要になってきます。この重要な点を押えておくと余計なつまづきがかなり解消されると思うので、しっかりと理解しておくといいのかなと思います。

まずプリミティブ型では変数にプリミティブ型のデータ(例えば文字列)を入力すると、その値がそのまま変数に入ります。
例えば変数xに”Hello World!”という文字列を代入し、変数yという新しい変数に変数xの値を代入するとします・・・①
このとき、yに入る値はxが持っている値なのでそのまま”Hello World!”という値が入るのと同義です。
その後、変数yに”Good Morning!”という文字列を上書きすると(②)、当然ながらxでは”Hello World!”、yには”Good Morning!”が入っていることになります。(③)
確かめてみましょう。

var x = “Hello World!”;
var y = x; ・・・①

y = “Good Morning!”;・・・②

console.log("x = " + x);
console.log("y = " + y); ・・・③
 

結果:
x = Hello World!
y = Good Morning!

しかし、オブジェクト型で同様のことを行うと処理の仕方が変わってきます。以下のコードを実行して確かめてみましょう。

var x = new Array(0,1,2);
var y = x; ・・・④

y[2] = 3 ・・・⑤

console.log("x = " + x);
console.log("y = " + y); ・・・⑥
 

ここでもさきほどの実験と同じようにxには[0,1,2]、yには[0,1,3]が入っているはず。しかし結果は以下になります。

結果:
x = 0,1,3
y = 0,1,3

結果はxとyが同値ということになっています。実はこれは⑤の時点でyの値がxにも代入されているからなのです。どういうことが起きているかといいますと、オブジェクト型のデータの場合、変数に入るのはそのまんまのデータではなく、そのオブジェクトが置かれているアドレス(場所)情報になります。
つまりメモリのどこかにオブジェクトが生成され、その場所情報を変数に代入する仕様になっているため、④の段階でyに入るのはxに入っているオブジェクトの場所情報であり、⑤でyからその場所情報にアクセスし、オブジェクトの中身を変更していることになります。なので結果的にxの値も変わり、結果的にはxもyも0,1,3という表示になるのです。


以上、プリミティブ型とオブジェクト型のデータの扱いの違い・特徴についてある程度まとめられたんじゃないかなと思います。データの扱い上、予期せぬエラーが出た場合、この違いがもたらしたエラーなのかどうか、っていう判断軸を持つといいことがあるかもしれません。