6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年11月6日 JavaScript (JS Primer) 分割代入

分割代入

前回オブジェクトのプロパティにアクセスする方法を学習しました。 以下はオブジェクトのプロパティを変数として定義し直しています。

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

// 複数のプロパティを一括で分割代入する場合の例
const { ja, en } = languages;
// これでconsole.logとすれば上記と同様の出力が得られます。

このようにオブジェクトのプロパティをひとつずつ変数として定義し直すこともできますが、分割代入(Destructuring assignment)を利用すると、指定したプロパティを変数に代入できます。 分割代入を利用することで、上のコードを簡潔に書くことができます。また、オブジェクトリテラル内でconst { ja, en} = languages と書けば、複数のプロパティを一括で分割代入することもできます。

コード例

const languages = {
    ja: "日本語",
    en: "英語",
    ch: "中国語", 
    thai: "タイ語"
};

// 変数名は、分割代入したいプロパティと同じにする。
const { thai } = languages;
console.log(thai); //=> タイ語

const { en, ch } = languages;
console.log(en); // => 英語
console.log(ch); // => 中国語

存在しないプロパティ名で変数を定義した場合、undefinedが代入されます。

const languages = {
    ja: "日本語",
    en: "英語",
    ch: "中国語", 
    thai: "タイ語"
};
const { x } = languages;
console.log(x); //=> undefined

ここまでのまとめ

変数名をプロパティ名にしてオブジェクトリテラルで囲うと、値を分割代入できます。

プロパティの追加

オブジェクトは、一度作成した後もその値自体を変更できるというミュータブル(mutable)の特性を持ちます。 そのため、作成したオブジェクトに対して、後からプロパティを追加できます。

// 空のオブジェクトを定義します。
const obj = {};
// 
obj.key = "value";
obj.yano = "yano";

// ドット記法でkeyを追加しています。
console.log(obj.key); // => "value"
// ブラケット記法でyanoを追加しています。
console.log(obj["yano"]); // => "yano"

ブラケット記法を扱う場合は変数なのかプロパティなのか整理しておいた方が良さそうです。
obj[key]・・・このkeyは変数(変数定義した段階で文字列として扱われています) obj["key"]・・・このkeyはプロパティです。

参考

JavaScript Primer オブジェクト