CodeMafia 外村 将大 @codemafia0000 さんの 独習JavaScript 新版 の第3章 変数とデータ型 [3.6] オブジェクト の練習問題(3.6)を解きました。

オブジェクトはJavaScriptの仕組みの根幹にも深く関わっているもの。
オブジェクトを使いこなせることがJavaSctriptを学ぶ上で重要ということなので、しっかり学びたく、わからなかった点や、覚えておきたいなと思ったことなどをメモしていきます。

問題1

プログラムで以下のように使用可能なオブジェクトを、オブジェクトリテラルを使って作成してください。

プログラムで以下のように使用可能なオブジェクトを、オブジェクトリテラルを使って作成してください。

独習JavaScript 新版 CodeMafia 外村 将大

//【1】
console.log(obj.prop);
// > true

//【2】
console.log(obj.subObj.val);
// > 100

//【3】
obj.greeting();
// > "こんにちは。"

オブジェクトの作成

//objectの初期化（利用可能な状態にする）
let obj = {
  prop:true,//【1】
  
  subObj:{
    val:100
  },//【2】
  
  greeting: function(){
    console.log("こんにちは。");
  }//【3】
}

【１】を実現

objにpropというプロパティを作成し値を真偽値のtrueに設定。

【２】を実現

objにsubObjというサブオブジェクトを作成し、valというプロパティの値を100に設定。

【３】を実現

objにgreetingというプロパティを作成し、値にconsole.log(“こんにちは”)が実行される関数を設定。

問題2

問題1のオブジェクトの使用箇所をすべてブラケット記法に書き換えてください。

独習JavaScript 新版 CodeMafia 外村 将大

//【1】
console.log(obj["prop"]);
//【2】
console.log(obj["subObj"]["val"])
//【3】
obj["greeting"]();

【２】に関するメモ

objの中のサブオブジェクトを取得するには。subObjもobjの位置から見るとプロパティとなるので、ブラケット記法で[“subObj”]とする。
解答時、誤って以下のように回答してしまっていた。
以下の記法でも要素自体は取得できるが、ドット記法とブラケット記法が混ざっている。
コードの一貫性が失われるので、混ぜた使用方法はあまりよろしくない。
また、今回においてはブラケット記法で取得するのが目的のため、以下のコードは誤りでした。

console.log(obj.subObj["val"])

【３】に関するメモ

以下のように呼び出せば、オブジェクト内のプロパティにある関数を取得することができる。

オブジェクト名["プロパティ名"]();

問題3

問題1のオブジェクトのsubObjオブジェクトに、プロパティval2とその値1000を追加してください。

独習JavaScript 新版 CodeMafia 外村 将大

//ドット記法の場合
obj.subObj.val2 = 1000;

//ブラケット記法の場合
obj["subObj"]["val2"] = 1000;

プロパティやオブジェクトの追加は、追加したいプロパティまで指定して、そこに値を代入することで追加することができる。

オブジェクトとは

変数を管理する入れ物のようなもの。
変数は変数ごとに値の場所（アドレス）を管理するが、オブジェクトは複数の値を１つのまとまり（構造体）として管理できる。

オブジェクトの取得方法

オブジェクトの取得方法には、ドット記法とブラケット記法の２種類がある。

ドット記法

以下のようなオブジェクトがあったときの値の取得や変更方法など。
ドットに続くキーワードは、必ずプロパティ名を直接指定すること。

直感的で読みやすい記法。

    let person = {
        name: { first: "太郎", last: "独習" },
        age: 18,
        greeting: function(){
          console.log("こんにちは。");
        }
    };

値の取得

console.log(person.age);
// > 18 
console.log(person.name.last);
// > 独習

関数の取得

obj.greeting();
// > こんにちは

値の変更

person.name.last = "次郎";
// 独習　→ 太郎に変更

値の追加

オブジェクト.新規プロパティ名 = “新規値”;
とすることで値を追加できる。オブジェクトも追加できる。

person.gender = "男";
// personオブジェクトにgenderプロパティ : 男という値が追加された

person.family = {
  wife: "花子",
  child: "三郎"
}
//personオブジェクトにfamilyプロパティを追加、そのなかにオブジェクトを作成

ブラケット記法

オブジェクトの後ろに[]をつけて、その中に文字列でプロパティ名を記述。
変数や式を使ってプロパティ名を指定できる。

↓先ほどのobjectでの値取得を流用。

値の取得

console.log(person["age"]);
// > 18 
console.log(person["name"]["last"]);
// > 独習

関数の取得

obj["greeting"]();
// > こんにちは

値の変更

person["name"]["last"] = "次郎";
// 独習　→ 太郎に変更

値の追加

ドット記法同様、オブジェクトも追加できる。

person["gender"] = "男";
// personオブジェクトにgenderプロパティ : 男という値が追加された

person["family"] = {
  wife: "花子",
  child: "三郎"
}
//personオブジェクトにfamilyプロパティを追加、そのなかにオブジェクトを作成

ドット記法とブラケット記法の違い・使い分け

変数や式を使って、動的にプロパティ名を決定したいときにはブラケット記法を使う。
ドット記法はシンプルで直感的だが、使えるプロパティ名に制限がある。（変数や式は使えない）

感想

オブジェクトについて学ぶことができました。といってもまだ今回の内容は深い内容には触れられていないとのことでした。
演習問題を解くことで自分が理解していない箇所に気づくことができました。

CodeMafia 外村 将大 @codemafia0000 さん、すばらしい書籍をありがとうございます。

参考

独習JavaScript 新版（CodeMafia 外村 将大）｜翔泳社の本
https://www.shoeisha.co.jp/book/detail/9784798160276

【JavaScript】ドット記法・ブラケット記法について #JavaScript – Qiita
https://qiita.com/TakanoriOkawa/items/7de0b158afa17ef2dae8