📝

【JavaScript Primer】オブジェクト

2021/11/21に公開

JavaScript Primerより

オブジェクト

オブジェクトはプロパティの集合であり、プロパティはkeyとvalueで構成される。

変数名の省略

またES2015からは、プロパティ名と値に指定する変数名が同じ場合は{ name }のように省略して書けます。

const name = "名前";
// `name`というプロパティ名で`name`の変数を値に設定したオブジェクト
const obj = {
    name
};
console.log(obj); // => { name: "名前" }

{} はObjectのインスタンスオブジェクト

  • Object: ビルトインオブジェクト(=JavaScriptの実行環境にあらかじめ組み込まれているオブジェクトのこと)
  • {} : Objectのインスタンスオブジェクト; Objectを元に新しいオブジェクトを作る

プロパティへのアクセス

  • 基本はドット記法を使い、こちらで扱えない場合ブラケット記法を使う。

ドット記法ではプロパティ名に変数は利用できないため、プロパティ名に変数を指定したい場合はブラケット記法を利用します。 基本的には簡潔なドット記法(.)を使い、ドット記法で書けない場合はブラケット記法([])を使うとよいでしょう。

分割代入

const languages = {
    ja: "日本語",
    en: "英語"
};
const { ja, en } = languages;
console.log(ja); // => "日本語"
console.log(en); // => "英語"

オブジェクトのプロパティの存在確認

  1. in演算子を使う
const obj = { key: undefined };
// `key`プロパティを持っているならtrue
if ("key" in obj) {
    console.log("`key`プロパティは存在する");
}
  1. hasOwnPropertyメソッド
const obj = { key: "value" };
// `obj`が`key`プロパティを持っているならtrue
if (obj.hasOwnProperty("key")) {
    console.log("`object`は`key`プロパティを持っている");
}

[ES2020] Optional chaining演算子(?.)

ドット記法では、ネストしたプロパティにアクセスする際にプロパティの存在を順に確認する必要がある。
そこで、?.記法を使うことでこの問題を完結に処理できる。d

Optional chaining演算子(?.)は左辺のオペランドがnullish(nullまたはundefined)の場合は、それ以上評価せずにundefinedを返します

Discussion