分割代入でオブジェクトにある特定の値を取得してくる

今回は分割代入でオブジェクトにある特定のキーの値を取得してくる方法を見ていきたいと思います。

経緯

reduxのコードを見ている時に分割代入をしているコードを見かけて挙動が気になった。

従来の方法と分割代入の比較

nameを取得する

const person = {
  name: "ジロリン丸",
  address: "Tokyo",
}

// 従来
const name = person.name
console.log(name) // ジロリン丸

// 分割代入
const { name } = person
console.log(name) // ジロリン丸

複数階層の時

この中のbrotherを取得する

const person = {
  name: "ジロリン丸",
  address: "Tokyo",
  family: {
    brother: 2,
    sister: 1
  },
  favoriteFoods: ["ramen", "ziro"]
};

// 従来
const brother = person.family.brother;
console.log(brother) // 2

// 分割代入
const { family: { brother } } = person;
console.log(brother) // 2

以上になります。

まとめ

分割代入は便利ではありますが、読みやすさという点では最初理解しずらいところはあるかもしれません。それを踏まえても便利な点が多いので積極的に使っていこうと思います。