2025.12.30

【JavaScript】オブジェクトにおけるプロパティの参照/追加/書き換え

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける『プロパティ』について、『参照』『追加』『書き換え』の記載方法」を紹介します。

こんな人にオススメ

プロパティの『参照』『追加』『書き換え』の記載方法を知りたい

ぜひ本記事を参考にしてください。

Contents

プロパティの参照方法
- 「ドット演算子」によるプロパティの参照
- 「ブラケット構文」によるプロパティの参照
プロパティの追加方法
- 「ドット演算子」によるプロパティの追加
- 「ブラケット構文」によるプロパティの追加
プロパティの書き換え方法
- 「ドット演算子」によるプロパティの書き換え
- 「ブラケット構文」によるプロパティの書き換え
まとめ

プロパティの参照方法

オブジェクトにおけるプロパティを参照するには、『ドット演算子』『ブラケット構文』のどちらかを使用します。
（実は追加でも書き換えでも同じなんですけどね…）

今回は『参照』『追加』『書き換え』のいずれにおいても下記のpcオブジェクトを参照します。

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

前回記事でも登場した私のPCです。

「ドット演算子」によるプロパティの参照

まずは、「ドット演算子」によるプロパティの参照です。

記載方法を見ていきます。

//プロパティ参照の記載方法（ドット演算子）

オブジェクト名.プロパティ名

//プロパティ参照の記載方法（ドット演算子）

オブジェクト名.プロパティ名

続けて、以下は記載例です。

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

console.log(pc.maker);
//実行結果：DELL

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

console.log(pc.maker);
//実行結果：DELL

問題なくmakerプロパティの『DELL』値を参照できています。

「ブラケット構文」によるプロパティの参照

次に「ブラケット構文」によるプロパティの参照です。

記載方法を見ていきます。

//プロパティ参照の記載方法（ブラケット構文）

オブジェクト名[‘プロパティ名’]

//プロパティ参照の記載方法（ブラケット構文）

オブジェクト名[‘プロパティ名’]

続けて、以下は記載例です。

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

console.log(pc['maker']);
//実行結果：DELL

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

console.log(pc['maker']);
//実行結果：DELL

こちらも問題なく、makerプロパティの『DELL』値を参照できていますね。

プロパティの追加方法

オブジェクトにおけるプロパティを追加する場合も、『ドット演算子』『ブラケット構文』のどちらかを使用します。

「ドット演算子」によるプロパティの追加

こちらも「ドット演算子」によるプロパティの追加です。

記載方法を見ていきます。

//プロパティ追加の記載方法（ドット演算子）


オブジェクト名.プロパティ名＝値

//プロパティ追加の記載方法（ドット演算子）


オブジェクト名.プロパティ名＝値

続けて、以下は記載例です。

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc.size=14;

console.log(pc.size);
//実行結果：14

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc.size=14;

console.log(pc.size);
//実行結果：14

sizeプロパティを追加できていることが分かります。

「ブラケット構文」によるプロパティの追加

「ブラケット構文」によるプロパティの追加も行います。

記載方法を見ていきます。

//プロパティ追加の記載方法（ブラケット構文）

オブジェクト名[‘プロパティ名’] ＝値

//プロパティ追加の記載方法（ブラケット構文）

オブジェクト名[‘プロパティ名’] ＝値

続けて、以下は記載例です。

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc['os']='windows'

console.log(pc['os']);
//実行結果：windows

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc['os']='windows'

console.log(pc['os']);
//実行結果：windows

こちらは、osプロパティを追加できていることがわかりますね。

プロパティの書き換え方法

最期に、オブジェクトにおけるプロパティを書き換えをします。
こちらも、『ドット演算子』『ブラケット構文』のどちらかを使用しましょう。

「ドット演算子」によるプロパティの書き換え

「ドット演算子」によるプロパティの書き換えです。

記載方法を見ていきます。

//プロパティ書き換えの記載方法（ドット演算子）


オブジェクト名.既存のプロパティ名＝書き換え後の値

//プロパティ書き換えの記載方法（ドット演算子）


オブジェクト名.既存のプロパティ名＝書き換え後の値

続けて、以下は記載例です。

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc.maker='Lenovo';

console.log(pc.maker);
//実行結果：Lenovo

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc.maker='Lenovo';

console.log(pc.maker);
//実行結果：Lenovo

makerプロパティがDELLからLenovoに書き換えられたことが分かります。

「ブラケット構文」によるプロパティの書き換え

「ブラケット構文」によるプロパティの書き換えです。

記載方法を見ていきます。

//プロパティ書き換えの記載方法（ブラケット構文）

オブジェクト名[‘既存のプロパティ名’] ＝書き換え後の値

//プロパティ書き換えの記載方法（ブラケット構文）

オブジェクト名[‘既存のプロパティ名’] ＝書き換え後の値

続けて、以下は記載例です。

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc['price']=50000

console.log(pc['price']);
//実行結果：50000

let pc={
	maker:"DELL",
	color:"silver",
	price:100000
}

pc['price']=50000

console.log(pc['price']);
//実行結果：50000

『price』プロパティの値が書き換えされたことが分かりますね。

まとめ

以上が「JavaScriptにおける『プロパティ』について、『参照』『追加』『書き換え』の記載方法」でした。

まとめ

プロパティの『参照』『追加』『書き換え』は『ドット演算子』『ブラケット構文』で記載する
参照
- 『ドット演算子：オブジェクト名.プロパティ名』
- 『ブラケット構文：オブジェクト名[‘プロパティ名’]』
追加
- 『ドット演算子：オブジェクト名.プロパティ名＝値』
- 『ブラケット構文：オブジェクト名[‘プロパティ名’] ＝値』
書き換え
- 『ドット演算子：オブジェクト名.既存のプロパティ名＝書き換え後の値』
- 『ブラケット構文：オブジェクト名[‘既存のプロパティ名’] ＝書き換え後の値』