オブジェクトの作成とアクセス方法

オブジェクトを作成する

オブジェクトを作成するには次の3パターンがあります。
以下の例ではそれぞれオブジェクトを作成してプロパティを設定した後に、console.logメソッドで出力して内容を確認します。

コード例

// パターン1：ドット記法
let data1 = new Object();
data1.name = 'John';
data1.id = 15002;
data1.regist_datetime = "2020/07/20 10:00:00";
data1.getName = function() {
  return this.name;
};

console.log(data1);
// {name: "John", id: 15002, regist_datetime: "2020/07/20 10:00:00", getName: ƒ}


// パターン2：ブラケット記法
let data2 = new Object();
data2['name'] = 'Emilia';
data2['id'] = 15003;
data2['regist_datetime'] = "2020/07/20 12:00:00";
data2['getName'] = function() {
  return this.name;
};

console.log(data2);
// {name: "Emilia", id: 15003, regist_datetime: "2020/07/20 12:00:00", getName: ƒ}


// パターン3：オブジェクトリテラル
let data3 = {
  name: "Mike",
  id: 15001,
  regist_datetime: "2020/08/01 14:00:00",
  getName: function() {
    return this.name;
  }
};

console.log(data3);
// {name: "Mike", id: 15001, regist_datetime: "2020/08/01 14:00:00", getName: ƒ}

パターン1とパターン2は最初に「new Object」でインスタンスを作成し、その後に3つのプロパティと1つのメソッドを設定しています。
パターン1は「ドット記法」、パターン2は「ブラケット記法」と呼ばれますが、ドット記法の方がシンプルで分かりやすいためこちらを使うことの方が多いです。

パターン3は「オブジェクトリテラル」という方法で、インスタンスの作成とプロパティの設定を一括で行うことができます。
3つのパターンの中では、このオブジェクトリテラルが最もよく使われる方法です。

以降はこの3つのパターンを使って、それぞれプロパティの参照や更新方法を解説していきます。

オブジェクトのプロパティを参照する

オブジェクトのプロパティから値を取得したり、メソッドを実行していきます。

コード例

// パターン1：ドット記法
console.log(data1.id); // 15002
console.log(data1.getName()); // John


// パターン2：ブラケット記法
console.log(data2["id"]); // 15003
console.log(data2["getName"]()); // Emilia


// パターン3：オブジェクトリテラル
console.log(data3.id); // 15001
console.log(data3.getName()); // Mike

パターン1とパターン3はドット記法を使い、パターン2のみブラケット記法を使ってプロパティを参照していますが、ブラケット記法を使った場合のみ変数を使ってプロパティにアクセスすることができます。

以下の例ではパターン2とパターン3のオブジェクトに対して、変数を使ったプロパティの参照を行います。
パターン3はドット記法を使った場合は参照できませんが、ブラケット記法にすることでパターン2と同様に参照することができます。

コード例

let property1 = 'id';
let property2 = 'name';

// パターン2：ブラケット記法
console.log(data2[property1]); // 15003
console.log(data2[property2]); // Emilia

// パターン3：オブジェクトリテラル（変数を使って参照することはできない）
console.log(data3.property1); // undefined
console.log(data3.property2); // undefined

// パターン3：オブジェクトリテラル（ブラケット記法にすると参照できる）
console.log(data3[property1]); // 15001
console.log(data3[property2]); // Mike

オブジェクトのプロパティを更新する

プロパティの値を更新するには、作成したときと同じ方法で行うことができます。

コード例

// パターン1：ドット記法
data1.id = 15010;
console.log(data1.id); // 15010

// パターン2：ブラケット記法
data2['id'] = 15020;
console.log(data2["id"]); // 15020

値の更新においても、ブラケット記法を使うと変数でプロパティ名を指定することが可能です。

コード例

let property1 = 'id';

data1[property1] = 15010;
console.log(data1.id); // 15010

data2[property1] = 15020;
console.log(data2["id"]); // 15020

オブジェクトのプロパティを削除する

オブジェクトのプロパティを削除するときは、delete演算子を使います。
ドット記法、ブラケット記法のいずれも使用することができます。

コード例

// パターン1：ドット記法
delete data1.id;
console.log(data1.id); // undefined

// パターン2：ブラケット記法
delete data2['id'];
console.log(data2["id"]); // undefined

「delete プロパティ名」で削除します。
削除するとそのオブジェクトからはプロパティが消えるため、参照しようとすると「undefined」になります。

ただし、インスタンスから削除できるのは自身のプロパティのみのため、以下の例のように親オブジェクトが同じプロパティを持っている場合は注意してください。

コード例

// 親オブジェクト
let Data = function(){};
Data.prototype.id = 15000;
Data.prototype.name = null;
Data.prototype.regist_datetime = null;
Data.prototype.getName = function() {
  return this.name;
};

// インスタンス作成
let data1 = new Data();
data1.id = 15001;

console.log(data1.id); // 15001（自身のプロパティを出力）

// idプロパティ削除
delete data1.id;

console.log(data1.id); // 15000（親のプロパティを出力）

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。