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

広告

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

プロパティを追加する

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

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"}

プロパティを追加する(1)

オブジェクトに対して、現在存在しないプロパティ名 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"}

プロパティを削除する(1)

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

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

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

delete mybox.border;  // 存在しないプロパティを削除

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

プロパティを削除する(2)

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

-- --

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

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。