【JavaScript】分割代入のサンプルコードまとめ【スプレッド構文あり】

どーも、ぐるたか@guru_takaです。

JavaScript の分割代入が便利だったので、備忘録として、まとめます。

分割代入とは?

分割代入とは配列とオブジェクト内のデータを複数の変数に代入できる構文です。

分割代入を使うことで、変数を定義するコードがシンプルになります。

分割代入の基本的なコード

分割代入のサンプルコードは以下の通りです。

index.js
const [a, b] = [1, 2]
console.log(a, b)
// 1 2

const { name, age } = { name: 'hoge', age: 20 }
console.log(name, age)
// hoge 20

複数のデータをそれぞれ変数に定義したいとき、配列を用いて分割代入すると、1行でスッキリと記述できて便利!

また、オブジェクトのバリューを取得したいとき、分割代入を使うことで、簡単に変数に定義できます。変数名をキーとは異なる変数名で定義したい場合は、以下のようになります。

index.js
const { name: user, age : age_hoge = 0 } = { name: 'hoge', age: 20 }
console.log(user, age_hoge)
// hoge 20

age : age_hoge = 0 のように、初期値を設定することも可能です。

特に API から取得したデータを変数に代入するときに重宝します。コードは以下の通りです。

index.js
const res = {
  data: [
    { name: 'taro', age: 20 },
    { name: 'hanako', age: 30 },
  ],
}

const { data: users = [] } = res
console.log(users)
// [ { name: 'taro', age: 20 }, { name: 'hanako', age: 30 } ]

スプレッド構文を使った分割代入

スプレッド構文を使って、分割代入することもできます。サンプルコードは以下の通りです。

index.js
const [a, b, ...c] = [1, 2, 3, 4, 5]
console.log(a, b, c)
// 1 2 [ 3, 4, 5 ]

const { name, age, ...rest } = {
  name: 'hoge',
  age: 20,
  sex: 'man',
  email: 'hoge@hoge.com',
}
console.log(name, age, rest)
// hoge 20 { sex: 'man', email: 'hoge@hoge.com' }

応用例として、スプレッド構文と分割代入を組み合わせ、関数の引数に渡すことがあります。

index.js
const foo = (a, b, ...rest) => console.log(a, b, rest)
foo(1, 2, 3, 4, 5)
// 1 2 [ 3, 4, 5 ]

参考リンク

参考 分割代入 - JavaScriptMDN

コメントを残す