最新！JavaScript入門講座ーオブジェクトのプロパティをわかりやすく解説

オブジェクトは配列と同じく、値を内包しています。それらを追加したり削除したりすることも可能です。今回はオブジェクトのキーと値の操作について初学者の方向けに解説していきます。

本記事のペルソナ

オブジェクトのキーと値を学びたい方
JavaScript初学者の方
オブジェクトのキーと値の操作を学びたい方
プロパティについて学びたい方

第23回オブジェクトの基本

第25回オブジェクトのループ

オブジェクトの操作の解説
1. 値の取得と更新
2. プロパティの追加と削除
まとめ
参考文献

オブジェクトの操作の解説

値の取得と更新

まずは値についての操作を解説していきます。まずは書き方をみていきます。

書き方の例

let オブジェクト名 = {
キー:値

}

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

オブジェクトの値にアクセスするにはピリオドを使います。ピリオドの後はプロパティ名となっていますが、これはオブジェクトの中のキー名と同じです。
プロパティというのはキーと値のペアのことをいいます。オブジェクト一つで複数のプロパティを設定できます。

では実際のコードを見ていきましょう。

let obj = {
    company:"合同会社 木の葉の里",
    kind:"合同会社",
    capital:100000000000,
    head:"火の国",
}

console.log(`会社名 : ${obj.company}`);
console.log(`本社所在 : ${obj.head}`);
console.log(`資本金: ${obj.capital}`);

$ node obj.js

会社名 : 合同会社 木の葉の里
本社所在 : 火の国
資本金: 100000000000

let obj = {
    company:"合同会社 木の葉の里",
    kind:"合同会社",
    capital:100000000000,
    head:"火の国",
}

console.log(obj);

obj.capital = 50000000000;
obj.head = "木の葉の里";

console.log(`会社名 : ${obj.company}`);
console.log(`本社所在 : ${obj.head}`);
console.log(`資本金: ${obj.capital}`);

$ node obj.js

{
  company: '合同会社 木の葉の里',
  kind: '合同会社',
  capital: 100000000000,
  head: '火の国'
}
会社名 : 合同会社 木の葉の里
本社所在 : 木の葉の里
資本金: 50000000000

２つの例を実行するとこのようになります。
新しい値を代入することでプロパティの値を変更することも可能になります。

プロパティの追加と削除

続いて、プロパティの操作について解説していきます。こちらも同様にピリオドを使っていきます。オブジェクトは任意のプロパティを設定できる変数です。プロパティは追加したり削除したりすることが可能です。

では実際に見てみましょう。

let obj = {
    company:"合同会社 木の葉の里",
    kind:"合同会社",
    capital:100000000000,
    head:"火の国",
}

console.log(obj);

obj.employee = 1200000;
obj.branch = ["ひがしきょうと","おおさか","ふくおか","なごや","さっぽろ"];

console.log(`会社名 : ${obj.company}`);
console.log(`本社所在 : ${obj.head}`);
console.log(`資本金: ${obj.capital}`);
console.log(`従業員数:${obj.employee}`);
console.log(`支社:${obj.branch}`);

$ node obj.js

{
  company: '合同会社 木の葉の里',
  kind: '合同会社',
  capital: 100000000000,
  head: '火の国'
}
会社名 : 合同会社 木の葉の里
本社所在 : 火の国
資本金: 100000000000
従業員数:1200000
支社:ひがしきょうと,おおさか,ふくおか,なごや,さっぽろ

実行すると、このようになります。
新しくプロパティを作るにはピリオド演算子で任意のプロパティを記述し、値を記述します。

続いてプロパティの削除について解説していきます。実際のコードを見てみましょう。

let obj = {
    company:"合同会社 木の葉の里",
    kind:"合同会社",
    capital:100000000000,
    head:"火の国",
    employee:1000000,
    branch:["ひがしきょうと","おおさか","ふくおか","なごや","さっぽろ"],
}

console.log(obj);

delete obj.kind;

console.log(obj);

$ node obj.js

{
  company: '合同会社 木の葉の里',
  kind: '合同会社',
  capital: 100000000000,
  head: '火の国',
  employee: 1000000,
  branch: [ 'ひがしきょうと', 'おおさか', 'ふくおか', 'なごや', 'さっぽろ' ]
}
{
  company: '合同会社 木の葉の里',
  capital: 100000000000,
  head: '火の国',
  employee: 1000000,
  branch: [ 'ひがしきょうと', 'おおさか', 'ふくおか', 'なごや', 'さっぽろ' ]
}

実行するとこのようになります。
プロパティの削除をするには、delete演算子を使用します。みてみると、kindプロパティが消えているのが確認できます。