ChatGPTで始めるJavaScript入門⑦～オブジェクト生成～

概要

　今回は3.JavaScriptの文法と構文について、の
　オブジェクト生成について確認していきます。

　③のデータ型の種類と変換方法でJavaScriptは動的型付け言語であることがわかっているので、
　他言語との相違点となりそうです。

　※無料版なので、誤っている情報もあると思いますが、アウトプットできれば良しとします。

オブジェクト生成

　ループはいくつか種類があるのでその辺を聞いてみます。

　【質問】
　JavaScriptの文法と構文について、オブジェクト生成、記述方法や注意点を教えてください。

　【回答】
　JavaScriptでは、オブジェクトはキーと値のペアの集合で表現されます。オブジェクトを生成するには、以下のように{}を使用します。

obj.js

let obj = {}; // 空のオブジェクトを生成する
オブジェクトのプロパティにアクセスするには、ドット演算子.またはブラケット演算子[]を使用します。

```javascript:objpro.js
let obj = { name: "John", age: 30 };

console.log(obj.name); // "John"
console.log(obj["age"]); // 30

オブジェクトのプロパティを追加するには、以下のようにキーと値を指定します。

objadd.js

let obj = { name: "John" };
obj.age = 30;

console.log(obj); // { name: "John", age: 30 }

また、オブジェクトのプロパティを削除するには、以下のようにdelete演算子を使用します。

objdel.js

let obj = { name: "John", age: 30 };
delete obj.age;

console.log(obj); // { name: "John" }

オブジェクトのプロパティに関数を定義することもできます。これをメソッドと呼びます。

objfun.js

let obj = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

obj.greet(); // "Hello, my name is John"

注意点としては、オブジェクト内で同じ名前のプロパティを定義した場合、後に定義されたプロパティが上書きされます。

objname.js

let obj = { name: "John", age: 30, name: "Alice" };
console.log(obj.name); // "Alice"

また、JavaScriptのオブジェクトのプロパティには、文字列や数値だけでなく、以下のようなものを指定することができます。

オブジェクト

obj.js

let obj = {
  name: "John",
  address: {
    city: "Tokyo",
    country: "Japan"
  }
};

console.log(obj.address.city); // "Tokyo"

上記のように、オブジェクトのプロパティに別のオブジェクトを指定することができます。
この場合、objオブジェクトのaddressプロパティに{city: "Tokyo", country: "Japan"}オブジェクトが指定されています。

関数

objfun.js

let obj = {
  name: "John",
  sayHi: function() {
    console.log("Hi!");
  }
};

obj.sayHi(); // "Hi!"

上記のように、オブジェクトのプロパティに関数を指定することができます。
この場合、objオブジェクトのsayHiプロパティにfunction() { console.log("Hi!"); }関数が指定されています。

シンボル

objsym.js

let sym = Symbol("my symbol");
let obj = {
  name: "John",
  [sym]: "value"
};

console.log(obj[sym]); // "value"

上記のように、オブジェクトのプロパティにシンボルを指定することができます。
この場合、objオブジェクトのシンボルプロパティに"value"が指定されています。

null

objnull.js

let obj = {
  name: "John",
  prop: null
};

console.log(obj.prop); // null

上記のように、オブジェクトのプロパティにnullを指定することができます。

undefined

objund.js

let obj = {
  name: "John",
  prop: undefined
};

console.log(obj.prop); // undefined

上記のように、オブジェクトのプロパティにundefinedを指定することができます。
ただし、通常は意図的にundefinedを指定することはありません。
未定義のプロパティを参照した場合には、暗黙的にundefinedが返されます。

シンボルとは

JavaScriptにおけるシンボル(Symbol)は、ES6(ES2015)から導入されたプリミティブ型の一つで、
他のプリミティブ型である文字列、数値、真偽値、null、undefinedと同様に、値そのものが固定されていて変更できません。

シンボルは、名前としてユニークな識別子を生成するために使用されます。
シンボルは、名前が重複する可能性のあるオブジェクトのプロパティ名として使用することができます。
シンボルを使用することで、オブジェクトのプロパティが偶然に上書きされることを防ぐことができます。

シンボルを生成するには、Symbol()というグローバル関数を使用します。
この関数に引数を渡すことができますが、引数はシンボルを識別するための説明的な文字列であり、シンボルの値とは異なります。

以下は、シンボルの例です。

objsym.js

// シンボルを生成する
const sym1 = Symbol();
const sym2 = Symbol('description');

// オブジェクトのプロパティ名にシンボルを使用する
const obj = {
  [sym1]: 'value1',
  [sym2]: 'value2'
};

console.log(obj[sym1]); // 'value1'
console.log(obj[sym2]); // 'value2'

シンボルは、オブジェクトのプロパティ名に限定されるわけではなく、
グローバルシンボルレジストリを使用して、同じシンボルを共有することもできます。
グローバルシンボルレジストリを使用するには、Symbol.for()メソッドを使用します。
このメソッドに渡された文字列をキーとして、対応するシンボルが存在する場合はそのシンボルを返し、
存在しない場合は新しいシンボルを生成して返します。以下は、グローバルシンボルレジストリを使用した例です。

objglosym.js

// グローバルシンボルレジストリを使用する
const sym1 = Symbol.for('key');
const sym2 = Symbol.for('key');

console.log(sym1 === sym2); // true

この場合、文字列'key'をキーとしてシンボルが生成されます。
2つのSymbol.for('key')呼び出しは、同じシンボルを返すため、sym1とsym2は同じシンボルであることが保証されます。

プロパティの追加・削除や{}によるオブジェクトの生成等、JavaScript独自で覚えることがいくつかありました。
注意点もありますが、使い勝手が良いと感じました。