株式会社Anthea エンジニア研修

Appearance

オブジェクト操作 ​

知識課題 ​

知識課題1 ​

  • オブジェクトリテラルにおいて、プロパティ名をクォートなしで記述できる場合と、クォートが必要となる場合について、具体的なコード例を示しながら、理由を説明してください。
  • オブジェクトリテラル内でブラケット記法（[]）を利用してプロパティ名を動的に設定する方法について、具体的なコード例を示しながら、そのメリットや利用シーンを解説してください。
  • 変数名とプロパティ名が一致する場合に利用できる省略記法について、具体的なコード例を交えて説明してください。

知識課題2 ​

  • オブジェクトのプロパティにアクセスする際、ドット記法とブラケット記法を使った場合の具体的なコード例を示し、それぞれの使い所や注意点を説明してください。
  • Optional chaining演算子 (?。)を利用した安全なプロパティアクセス方法について、実例を交えながらその動作やメリットを解説してください。
  • オブジェクトの分割代入（Destructuring Assignment）の基本的な使い方と、ネストされたオブジェクトから必要な値を取り出す方法について、具体的なコード例を示して説明してください。

知識課題3 ​

  • constで定義されたオブジェクトが変更可能な理由を踏まえ、プロパティの追加方法を直接追加する方法とComputed Property Namesを利用する方法の両面から、具体例を交えて説明してください.
  • オブジェクトからプロパティを削除する際のdelete演算子の使い方、削除後の挙動および注意点について、具体例を交えて考察してください。
  • Object.freezeメソッドを利用してオブジェクトのプロパティの追加・変更・削除を防止する方法と、その使用上の注意点について、実際のコード例を用いて解説してください.
  • in演算子/Object.hasOwn/Object.prototype.hasOwnPropertyを用いたプロパティの存在確認方法について、それぞれの特徴や使い分けを、具体例とともに説明してください.

知識課題4 ​

  • Object.keys/Object.values/Object.entriesを使用して、オブジェクトのキー/値/キーと値の組み合わせを取得する方法を、具体的なコード例を交えて説明してください。
  • オブジェクトのプロパティ（キー）の反復処理に使用されるfor...in文の基本構文について、具体例を用いて説明してください。
  • Object.assignを利用して複数のオブジェクトをマージしたり、オブジェクトを複製する方法について、具体的なコード例を交えて説明してください。
  • スプレッド構文を利用して、オブジェクトのプロパティを展開・マージする例を具体的なコード例を交えて説明してください.

実践課題 ​

以下の要件をすべて満たすpersonオブジェクトを作成し、各操作の結果をconsole.logで出力してください。

実践課題1 ​

  1. person オブジェクトを作成し、以下の条件に従ってプロパティを設定してください。
    • プロパティ名
      • 英数字のみのプロパティid/nameをクォートなしで記述してください。
      • ハイフンやスペースを含むプロパティ"job-title"/"birth date"をクォートで囲んで記述してください。
    • ネストしたオブジェクト
      • 連絡先情報を保持するaddressプロパティを追加し、その内部にcityとcountryのプロパティを設定してください。
    • 省略記法の活用
      • 変数名とプロパティ名が一致する場合、オブジェクトリテラルの省略記法を利用してください。
  2. 作成した person オブジェクトを console.log で表示し、各プロパティが正しく設定されていることを確認してください。

注意

解答例
js
const id = 101;
const name = 'John Doe';

const person = {
  id, // 省略記法
  name, // 省略記法
  "job-title": "Software Engineer", // クォートが必要な例
  "birth date": "1990-01-01", // クォートが必要な例
  address: {
    city: "Tokyo",
    country: "Japan"
  }
};

console.log(person);

実践課題2 ​

  1. ドット記法を利用して、personのnameおよびaddress.cityにアクセスし、その値をコンソールに出力してください。
  2. ブラケット記法を利用して、"birth date"および"job-title"の値をコンソールに出力してください。
  3. Optional chaining 演算子 (?.)を用いて、存在しないプロパティに安全にアクセスし、値がundefinedとなることを確認してください。
  4. 変数newPropKeyに任意の文字列（例: "hobby"）を代入し、ブラケット記法（Computed Property Names）を利用してpersonオブジェクトに新たなプロパティを追加してください。追加する値は任意の数値（例: 5）で構い、追加後のpersonオブジェクトをコンソールで確認してください。

実践課題3 ​

  1. personはconstで定義されていますが、プロパティの追加や変更が可能であることを確認するため、既存のプロパティ（例: name）の値を変更してください。変更前と変更後のpersonオブジェクトをそれぞれコンソールに出力して確認してください。
  2. personオブジェクトから、キーが"birth date"のプロパティを削除してください。削除後、同プロパティにアクセスしてundefinedとなっていることを確認してください。
  3. 新たにfrozenPersonというオブジェクトを作成し、Object.freezeを利用して凍結してください。凍結後にプロパティの追加や変更を試み、その結果、変更が反映されない（またはエラーが発生する）ことをコンソールで確認してください。
  4. in 演算子/Object.hasOwn/Object.prototype.hasOwnPropertyを用いて、personに特定のプロパティが存在するか確認してください。例として、idとnonExistingPropの存在確認を行い、その結果をコンソールに出力してください。

実践課題4 ​

  1. Object.keys、Object.values、Object.entriesを利用して、personオブジェクトの各情報（キー、値、キーと値の組み合わせ）をそれぞれコンソールに出力してください。
  2. for…in文を利用して、personオブジェクトのすべてのプロパティ名とその値を直接コンソールに出力してください。
  3. 新たにadditionalInfoというオブジェクトを作成し、例として{ nationality: "Japanese", age: 35 }の内容を持たせてください。
  4. Object.assignを利用して、personとadditionalInfoをマージした新しいオブジェクトを作成し、その結果をコンソールに出力してください。
  5. 同様に、スプレッド構文を利用して、別のマージ例またはpersonオブジェクトの複製を実装し、結果を確認してください。

参考資料 ​