【JavaScript】オブジェクトについて

はじめに

JavaScript勉強中の👶です。
理解を深めるために日々の学びを記事にしています。
初心者の記事なので言い回しや記載に誤りがあるかも知れませんが、暖かく見守っていただけると幸いです。
(よろしければ間違いをコメントいただけると学び、励みになります！)

学んだこと

・オブジェクト定義のやり方
・スプレッド構文
・等値性について

オブジェクトの定義

const name = input?input:"名無し";

const user= {
	name, //プロパティ名=変数名(name: name)の場合省略可
	age:20,
}
console.log(user.age); //[LOG]:20

動的なオブジェクト定義

プロパティ名を動的に定義する

[オブジェクト名]とすることで動的に定義可能。

const name = input?input:"名無し";
const propName = "foo";  //プロパティ名の定義

const user= {
	name, //プロパティ名=変数名(name: name)の場合省略可
	age:20,
	[propName]: "bar",
}
console.log(user.foo); //[LOG]:bar
console.log(user[propName]); //[LOG]:bar

オブジェクトの呼び出しを動的に操作する

オブジェクト名[式]を用いることで下記のように呼び出すプロパティを動的に操作できる。

const age = 20;
const messages = {
	adult: "成人ずみです",
	child: "未成年です",
}

console.log(messages[age>=18?"adult":"child"]) //[LOG]:成人ずみです

スプレッド構文

...式で要素を展開する構文

const obj1 = {
	foo: 123,
	bar: 456,
}

const obj2 = {
	...obj1,
}
console.log(obj2); // [LOG]: { "foo": 123, "bar": 456 }

要素が被る場合は、後に宣言された方が優先される

const obj1 = {
	foo: 123,
	bar: 456,
}

const obj2 = {
	...obj1,
	foo: 0,
}
console.log(obj2); // [LOG]: { "foo": 0, "bar": 456 }

オブジェクトの等値性

const foo = {num: 1234}
const bar = foo;
bar.num = 0;
console.log(bar.num); // [LOG]: 0
console.log(foo.num); // [LOG]: 0

変数fooに{num: 1234}を作成しbarに代入しています。この時、fooの{num: 1234}がコピー(複製))されて別オブジェクトの{num: 1234}が格納されているわけではありません。fooもbarも同じ{num: 1234}オブジェクトを参照しています。そのためbar.numの代入によりfoo.numの内容も変わってしまいます。

=は{num: 1234}をコピー、複製しているようで実際は出来ていないということですね。
単純に解決する方法は下記です。

const foo = {num: 1234};
const bar = {num: 1234};

また、スプレッド構文を使用するとbarとfooのプロパティを別オブジェクトとしてコピー(複製)できます。

const foo = {num: 1234}
const bar = {...foo};

スプレッド構文でコピー(複製)される対象に注意が必要です。スプレッド構文で展開されるオブジェクトに更にオブジェクトが格納されている場合、コピーの対象にあたりません。

const foo = {obj:{num:1234}};
const bar = {...foo};
console.log(bar); // [LOG]: { "obj": { "num": 1234 } }
bar.obj.num = 0;
console.log(bar); // [LOG]: { "obj": { "num": 0 } }
console.log(foo); // [LOG]: { "obj": { "num": 0 } }

上記のような状況をシャローコピー(浅いコピー)というようです。ネストの中身までコピーすることをDeep Copyというようです。
"JavaScript DeepCopy"と検索するとさまざまなライブラリが出てきます。

オブジェクトの一致判定

オブジェクトの内容が同じであっても===比較するとfalseになります。

const foo = {num:1234};
const bar = foo;
const baz = {num:1234};

console.log(foo === bar); // [LOG]: true
console.log(foo === baz); // [LOG]: false