【JavaScript】アロー関数の引数で分割代入をする

f:id:lampler:20210522070058p:plain Reactでよく使われるアロー関数の引数で分割代入を行うパターンを解説する。

まずは分割代入の復習から

分割代入はオブジェクトのキーと値をオブジェクトの外に出して変数として使えるようにすること。英語名はObject destructuringで、その名の通りオブジェクトを破壊して値を取り出す、といったイメージである。オブジェクトに存在しないキーを指定するとundefinedが格納される。

const person = { name: 'lamp', age: 22, isMan: true }
console.log(name, age)
// => Uncaught ReferenceError: Cannot access 'name' before initialization"

const { name, age, adress } = person
console.log(name, age, adress) // => "lamp", 22, undefined

別名をつけて分割代入

キー : 新しい名前という文法で書く。

const person = { name: 'lamp', age: 22 } 
const { name: userName,  age: userAge } = person

console.log(userName, userAge) // => "lamp", 22
console.log(name, age) // => Uncaught ReferenceError: age is not defined"

アロー関数の引数で分割代入

呼び出すときは引数で代入しているプロパティをもったオブジェクトを渡す。

const person = { 
  name: 'lamp', 
  age: 22, 
  isMan: true, 
  money: 36, 
  haveChild: true
}

const fn = ({ name, age, isMan, ...rest }) => {
  console.log(name, age, isMan);
  console.log(rest);
}

fn(person) 
// => "lamp", 22, true
// => { haveChild: true, money: 36 }