(JavaScript) オブジェクトにプロパティを追加・削除する方法

本記事では、
JavaScriptで、オブジェクトにプロパティを追加する方法と、削除する方法を紹介する。

JavaScriptのオブジェクトとは

JavaScriptのオブジェクトとは、プロパティを複数集めたもの集合のことだ。
プロパティは、キーとそれに紐づくバリューを保持している。

var obj = {
    名前: 'タピオカ',    #プロパティ （キー:バリュー） 
    分類: 'デザート',    #プロパティ （キー:バリュー）
    主成分: '糖分'      #プロパティ （キー:バリュー）
}

オブジェクトにプロパティを追加する方法

では本題に入っていく。

JavaScriptオブジェクトにプロパティを追加する方法は以下である。

# JavaScriptオブジェクトにプロパティを追加

オブジェクト.キー = バリュー;

オブジェクトにプロパティを追加するサンプル

以下にJavaScriptオブジェクトにプロパティを追加するサンプルを紹介する。

もともと3つのプロパティを保持しているプロパティに、4つ目のプロパティを追加するサンプルだ。

var obj = {
    名前: 'タピオカ',  
    分類: 'デザート', 
    主成分: '糖分' 
}


# 4つ目のプロパティを追加
obj.カロリー = 'たっぷり';


# コンソールに出力して確認
console.log(obj);
 
 
# コンソールの出力結果
{
    名前: 'タピオカ' 
    分類: 'デザート',
    主成分: '糖分'
    カロリー: 'たっぷり'    #4つ目のプロパティが追加された
}

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

JavaScriptオブジェクトのプロパティを削除する方法は以下である。

# JavaScriptオブジェクトのプロパティを削除

delete オブジェクト.キー;

delete演算子を使用するのが特徴で、
delete演算子の後に、オブジェクト.キーと言う形で削除対象のプロパティを指定すれば良い。

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

以下にJavaScriptオブジェクトのプロパティを削除するサンプルを紹介する。

3つ目のプロパティを削除するサンプルだ。

var obj = {
    名前: 'タピオカ',  
    分類: 'デザート', 
    主成分: '糖分' 
}
 
 
# 3つ目のプロパティを削除
delete obj.主成分;
 
 
# コンソールに出力して確認
console.log(obj);
 
 
# コンソールの出力結果
{
    名前: 'タピオカ' 
    分類: 'デザート',       #3つ目のプロパティが削除された
}

オブジェクトにプロパティを追加・削除する方法まとめ

JavaScriptオブジェクトにプロパティを追加・削除する方法は以下のとおりである

# JavaScriptオブジェクトにプロパティを追加
オブジェクト.キー = バリュー;

# JavaScriptオブジェクトのプロパティを削除
delete オブジェクト.キー;

(参考) JavaScriptオブジェクトに関連する記事

参考までに、JavaScriptオブジェクトに関する記事を以下に紹介しておく。

合わせて読みたい

JavaScriptオブジェクトから、キーの一覧を取得する方法

関連記事(JavaScript) オブジェクトからキーの一覧を取得する方法

2021.05.14

Jsonデータの読み込み・書き込み方法

関連記事(JavaScript) Jsonデータの読み込み・書き込み方法

2022.02.17