【超便利】JavaScript オブジェクトに動的にプロパティを追加する3つのテクニック

2024-04-02

JavaScript オブジェクトに動的に名前付きプロパティを追加する方法

括弧表記を使用する

オブジェクトの名前とプロパティ名を括弧で囲んで、新しいプロパティを追加できます。

const obj = {};

obj['name'] = 'John Doe'; // 'name' という名前のプロパティを追加
obj['age'] = 30; // 'age' という名前のプロパティを追加

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

Object.defineProperty() メソッドを使用して、オブジェクトに新しいプロパティを定義できます。

const obj = {};

Object.defineProperty(obj, 'name', {
  value: 'John Doe',
  writable: true,
  enumerable: true,
});

Object.defineProperty(obj, 'age', {
  value: 30,
  writable: true,
  enumerable: true,
});

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

プロパティアクセス演算子 ([]) を使用して、オブジェクトに新しいプロパティを追加できます。

const obj = {};

obj.name = 'John Doe'; // 'name' という名前のプロパティを追加
obj.age = 30; // 'age' という名前のプロパティを追加

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

これらの方法はいずれも、オブジェクトに動的に名前付きプロパティを追加するために使用できます。どの方法を使用するかは、個人的な好みや状況によって異なります。

追加情報

オブジェクトに動的にプロパティを追加する必要がある場合、これらの方法のいずれかを使用できます。
オブジェクトのプロパティの名前は、文字列リテラル、変数、または式のいずれかを使用できます。

// オブジェクトの作成
const obj = {};

// 括弧表記を使用してプロパティを追加
obj['name'] = 'John Doe';
obj['age'] = 30;

// `Object.defineProperty()` メソッドを使用してプロパティを追加
Object.defineProperty(obj, 'city', {
  value: 'Morrow County',
  writable: true,
  enumerable: true,
});

// プロパティアクセス演算子を使用してプロパティを追加
obj.job = 'Software Engineer';

// オブジェクトの内容を出力
console.log(obj);

このコードを実行すると、以下の出力が得られます。

{
  name: 'John Doe',
  age: 30,
  city: 'Morrow County',
  job: 'Software Engineer'
}

このサンプルコードでは、3つの方法を使用してオブジェクトに動的に名前付きプロパティを追加しています。

obj['name'] = 'John Doe'：括弧表記を使用して name という名前のプロパティを追加しています。
Object.defineProperty(obj, 'city', { ... })：Object.defineProperty() メソッドを使用して city という名前のプロパティを追加しています。
obj.job = 'Software Engineer'：プロパティアクセス演算子を使用して job という名前のプロパティを追加しています。

JavaScript オブジェクトに動的に名前付きプロパティを追加する他の方法

const obj1 = {
  name: 'John Doe',
  age: 30,
};

const obj2 = {};

Object.assign(obj2, obj1);

console.log(obj2); // { name: 'John Doe', age: 30 }

このコードでは、Object.assign() メソッドを使用して、obj1 のプロパティを obj2 にコピーしています。

スプレッド構文を使用して、別のオブジェクトのプロパティを展開できます。

const obj1 = {
  name: 'John Doe',
  age: 30,
};

const obj2 = { ...obj1 };

console.log(obj2); // { name: 'John Doe', age: 30 }

Proxy オブジェクトを使用して、オブジェクトのプロパティのアクセスをインターセプトできます。

const obj = {
  name: 'John Doe',
};

const proxy = new Proxy(obj, {
  get: function(target, property) {
    if (property === 'age') {
      return 30;
    }

    return target[property];
  },
});

console.log(proxy.name); // 'John Doe'
console.log(proxy.age); // 30

このコードでは、Proxy オブジェクトを使用して、obj オブジェクトのプロパティアクセスをインターセプトしています。age プロパティにアクセスすると、30 が返されます。

Symbol を使用して、プロパティ名を非公開にすることができます。

const nameSymbol = Symbol('name');

const obj = {
  [nameSymbol]: 'John Doe',
};

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

console.log(obj[nameSymbol]); // 'John Doe'

このコードでは、Symbol を使用して name という名前のプロパティを非公開にしています。obj.name にアクセスすると、undefined が返されます。

javascript