JavaScript〜変数を代入～

JavaScriptではデータ型を操作できる言語で、
そのデータ型には単純なデータ型と複雑なデータ型があります。
まず単純なデータ型を紹介します。
「数値 , 文字列 , 真偽値 , Undefind , Null」
となります。
次に複雑なデータ型です。
「配列 , オブジェクト」
があります。

単純なデータ型に変数を代入する場合と複雑なデータ型に変数を代入する場合挙動が異なりますので紹介します。

まず変数を使う場合は「let」を使います。

変数xに20を入れてあげて、変数yにxを代入します。次にxを60へ変更するとします。

コードは以下のようになります。

let x = 20;
let y = x;
x = 60;
console.log(x);
console.log(y);

そうするとコンソールでは
60.20 と表示されているでしょう。
yはxが20の時には代入されたので20となるのが分かります。

次は配列で変数の代入を行ってみます。

let x = [20,50];
let y = x;
x[0]= 60;
console.log(x);
console.log(y);

と書くとxは60,50となります。
yは先程と同じように考えると20,50になると思います。ですが、この場合yは60,50となります。
何故かというと配列の場合yはxの値を指し示しているだけと言うことを考えるといいです。

初めの数値はxの値20ができ、yを代入するとx値20をyが値20をコピーしている状態と考えると良いでしょう。
よって x=60,y=20 となります。

一方配列の場合はyはxの値を指し示しているだけなので、xの値を単純に写すだけという働きをするだけなのです。
よって、x=60,50 y=60,50 になります。

このようになる理由としては配列のような複雑なデータ型はデータ量が大きくなることがあるため、丸ごとコピーしているとシステムに大きな負荷をかけてしまう可能性があります。
それを回避するためにこのような挙動となります。

しかし、配列で初めの単純なデータ型のように表す方法もあります。
その場合、スプレッド演算子を使うとうまくいきます。

let x = [20,50];
let y = [...x];
x［0］= 60;
console.log(x);
console.log(y);

こう書くとyはxの値を指し示すのではなく、yにxの値がコピーされている状態になります。
よって x=60,50 y=20,50 となります。

今回は単純なデータ型と複雑なデータ型の変数を代入する際の方法と挙動の説明でした。データ型で挙動が異なることをちょっとでも覚えていたら役に立つと思いますので是非覚えましょう。