分割代入でオブジェクトの値を簡潔に利用する【JS】

ES6から導入された分割代入という機能を使用することで、オブジェクトの値を簡潔に利用することができます。

オブジェクトの値を利用する場合、ES6以前は下記のようにsuzuki.heightとオブジェクト.キーで値を取得していたと思います。

test() {
      const suzuki = {
        height: 175,
        weight: 80
      }
      const height = suzuki.height;
      const weight = suzuki.weight;
      console.log(height);
      console.log(weight);
    }

これを分割代入を使用することで、簡潔に記述することができます。

分割代入は

const height = suzuki.height;　

と記述していたところを　

const {height} = suzuki;

と利用したいオブジェクトのキーを中括弧でくくり、そこにオブジェクトを代入することで同じようにオブジェクトの値を取得できます。

{キー} の箇所は、オブジェクトのキーの名前と一致させる必要があります。

test() {
      const suzuki = {
        height: 175,
        weight: 80
      }
      const {height} = suzuki;
      const {weight} = suzuki;
      console.log(height);
      console.log(weight);
    }

変数の名前を変えることもできます。

｛キー名：変数名｝= オブジェクト名；で任意の変数名を付けることが可能です。

test() {
      const suzuki = {
        height: 175,
        weight: 80
      }
      // 変数名を変更
      const {height: myHeight} = suzuki;
      const {weight: myWeight} = suzuki;
      console.log(myHeight);
      console.log(myWeight);
    }