More than 3 years have passed since last update.

分割代入

Last updated at 2021-02-07Posted at 2020-12-13

#分割代入とはなにか

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
docs

###オブジェクトの分割代入だとこんな感じになる。

const profile = {
    age: 13,
    name: 'Taro',
}

const {age, name} = profile;
console.log(age) // 13
console.log(name) // Taro

#こんなもん使うの？
分割代入を知った時に初めに抱いた感想は「いつ使うのさ」でした。
しかし、reactを使用しているプロジェクトで働き始めると毎日のように使うようになっていました。

こんな感じで。

// propsでageとnameを受け取るコンポーネント
const Profile = props => {
    const {age, name} = props;
    return <div>{`${name}は${age}さいです。`}</div>
}

引数の段階で分割代入を行うこともできるので、こうやって書くことが多いです↓

// propsでageとnameを受け取るコンポーネント
const Profile = {age, name} => {
    return <div>{`${name}は${age}さいです。`}</div>
}