JavaScriptの分割代入でそれぞれのデータを抽出して使用する

const monsters = ['フシギダネ', 'ヒトカゲ', 'ゼニガメ']

// 配列の値をそれぞれ変数に代入する
const x0 = monsters[0]
const x1 = monsters[1]
const x2 = monsters[2]
console.log(x0, x1, x2) // フシギダネ ヒトカゲ ゼニガメ 

// 上記を分割代入で再現
const [y0, y1, y2] = monsters
console.log(y0, y1, y2) // フシギダネ ヒトカゲ ゼニガメ 

// ...を利用して残りの配列を変数に代入
const [z0, ...rest] = monsters
console.log(z0) // フシギダネ
console.log(rest) // ['ヒトカゲ', 'ゼニガメ']

// 関数の戻り値(配列)に分割代入を利用
const returnMonsters = (): string[] => monsters
const [w0, w1, w2] = returnMonsters()
console.log(w0, w1, w2) // フシギダネ ヒトカゲ ゼニガメ

const husigidane = {
  no: 1,
  name: 'フシギダネ',
  isMegaEvolution: false,
  types: ['くさ', 'どく'],
  abilities: ['しんりょく'],
  hiddenAbilities: ['ようりょくそ'],
  stats: {
    hp: 45,
    attack: 49,
    defence: 49,
    spAttack: 65,
    spDefence: 65,
    speed: 45
  }
}

// オブジェクトのプロパティをそれぞれ変数に代入
const no = husigidane.no
const types = husigidane.types
console.log(no, types) // 1 ['くさ', 'どく']

// 上記を分割代入で再現
const {abilities, hiddenAbilities} = husigidane
console.log(abilities, hiddenAbilities) // ['しんりょく'] ['ようりょくそ']

// 抽出したキー名とは別の変数名とする
const {name: monsterName} = husigidane
console.log(monsterName) // フシギダネ

// ネストしたオブジェクトのプロパティ
const {isMegaEvolution, stats: {attack: attackValue}} = husigidane
console.log(isMegaEvolution, attackValue) // false 49

type LogMonster = {
  name: string,
  types: string[],
  stats: {
    attack: number,
    defence: number
  }
}

const hitokage = {
  no: 4,
  name: "ヒトカゲ",
  types: ["ほのお"],
  abilities: ["もうか"],
  stats: {
    hp: 39,
    attack: 52,
    defence: 43,
    spAttack: 60,
    spDefence: 50,
    speed: 65
  }
}

// 引数にオブジェクトをとる関数
const logMonsterAttack = (monster: LogMonster): void => {
  const name = monster.name
  const types = monster.types
  const spAttack = monster.stats.attack
  console.log(name, types, spAttack)
}
logMonsterAttack(hitokage) // ヒトカゲ ["ほのお"] 52

// 上記を分割代入で再現してみる
const logMonsterDefence = (
    {name, types, stats: {defence: defenceValue}}: LogMonster
  ): void => {
  console.log(name, types, defenceValue)
}
logMonsterDefence(hitokage) // ヒトカゲ ["ほのお"] 52