分割代入をさらっと簡潔に

さらっと使用される分割代入.Reactでもプロパティの受け渡しに使われますね.

まず.配列の場合とオブジェクトの場合に分けて考えたほうが考えやすいので,分けます.

配列の分割代入

const array1 = ["apple", "banana"]
const [fruit_A, fruit_B] = array1
// 順番に代入される

console.log(fruit_A) // apple
console.log(fruit_B) // banana

// 以下と一緒
// const fruit_A = array1[0]
// const fruit_B = array1[1]

配列の中身を順番に定義したり,代入したいときに使える.

オブジェクトの分割代入

const obj = {
  user: "nob",
  age: 123,
  hobby: "programming"
}

const { user, age, food } = obj
// keyに対応して代入される

console.log(user)
console.log(age)
console.log(food)
// foodはないのでundefined

// 以下と一緒
// const user = obj.user
// const age = obj.age

順番ではなくkeyに対応して代入される.

ReactのComponentの引数になるconst Component = ({ key, value }) => {...も分割代入だったんですねー.

【参考文献・参考記事など】

https://www.agent-grow.com/self20percent/2019/05/27/js-destructuring-assignment/