Javascriptのデストラクチャリング(オブジェクト)

前回の投稿

本題

今回はオブジェクトのデストラクチャリングについてアウトプットしていきます。

基本構文

const {keyと同じ変数} = obj

例

以下のように日本に関するオブジェクトを作成しました

const japan = {
    name: "Japan",
    capital: "Tokyo",
    population: 122860000,
    majorCitiesInJapan: {
        Tokyo: {
            prefecture: "Tokyo",
            population: 14270748,
        },
        Yokohama: {
            prefecture: "Kanagawa",
            population: 3767468,
        },
        Osaka: {
            prefecture: "Osaka",
            population: 2815322,
        },
        Nagoya: {
            prefecture: "Aichi",
            population: 2338873,
        },
        Sapporo: {
            prefecture: "Hokkaido",
            population: 1967361,
        },
        Fukuoka: {
            prefecture: "Fukuoka",
            population: 1702000,
        },
    },
};

例えば国名と人口を取得したい時

const countryName = japan.name;
const countryPopulation = japan.population;

console.log(countryName, countryPopulation); // Japan 122860000

のようにそれぞれ宣言して代入できるが

デストラクチャリングを使うと

const { name, population } = japan; 
console.log(name, population); // Japan 122860000

宣言した変数と同じキーの値が代入され取得できる。

またネストされているもの(今回は札幌)を取得したい場合は

const {majorCitiesInJapan: { Sapporo },} = japan;
console.log(Sapporo); //{prefecture: 'Hokkaido', population: 1967361}

のように

const {keyと同じ変数 :{keyと同じ変数}} = obj

で取得できる

変数の変更

もしも自分で変数を付けたいなら

const {key : 変数} = obj

で変更できる

例

const { name: countryName, majorCitiesInJapan: bigCity } = japan;
console.log(countryName);
console.log(bigCity); 

デフォルト値

もしもオブジェクトが指定したキーを持っていなかった場合、代わりになる値を設定することができる

const {keyと同じ変数 = "デフォルト値"} = obj

例

const {
name: countryName, 
majorCitiesInJapan: bigCity,
primeMinister = "Sanae Takaichi" } = japan;
console.log(primeMinister); //primeMinisterというキーはないので設定した値が表示される

ネストのところが混乱しかけましたがなんとかアウトプットできるくらいの理解はできました。