オブジェクトへのプロパティの追加と削除

JavaScript では作成したオブジェクトにあとから新しいプロパティを追加したり、既存のプロパティを削除することができます。ここではオブジェクトに新しいプロパティを追加する方法、および既存のプロパティを削除する方法について解説します。

(Last modified: 2024-10-01)

プロパティを追加する

オブジェクトに新しいプロパティを追加するには、オブジェクトに存在していないプロパティ名に値を代入します。次のサンプルをみてください。

let mybox = {
  width:400, 
  height:300
};

console.log(mybox);
>> {width: 400, height: 300}

mybox.color = '#FF0000';  // 新しいプロパティを追加
console.log(mybox);
>> {width: 400, height: 300, color: "#FF0000"}

オブジェクトに対して、現在存在しないプロパティ名 color を指定して値を代入しています。するとオブジェクトにプロパティ名と値のペアからなる新しいプロパティが追加されました。

なおプロパティ名を指定して値を代入する方法は、ピリオド演算子を使う方法でも角括弧[]を使う方法でもどちらでも構いません。

プロパティを削除する

オブジェクトからプロパティを削除したい場合には delete 演算子を使用します。書式は次の通りです。

delete オブジェクト.プロパティ名
delete オブジェクト['プロパティ名']

delete 演算子の右側に削除するプロパティを記述します。プロパティはピリオド演算子を使う方法でも角括弧[]を使う方法でもどちらでも構いません。

次のサンプルをみてください。

let mybox = {
  width:400, 
  height:300,
  color:'#FF0000'
};

console.log(mybox);
>> {width: 400, height: 300, color: "#FF0000"}

delete mybox.height;  // プロパティを削除
console.log(mybox);
>> {width: 400, color: "#FF0000"}

オブジェクトから指定したプロパティが削除されました。

なお存在しないプロパティを削除しようとしてもエラーとはなりません。次のサンプルをみてください。

let mybox = {
  width:400, 
  height:300,
  color:'#FF0000'
};

delete mybox.border;  // 存在しないプロパティを削除
console.log(mybox);
>> {width: 400, height: 300, color: "#FF0000"}

オブジェクトに存在していないプロパティ名 border を指定してプロパティを削除しようとしていますが、エラーとはならずオブジェクトはそのままです。

-- --

JavaScript でオブジェクトに新しいプロパティを追加する方法、および既存のプロパティを削除する方法について解説しました。

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。