どーも、ぐるたか@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 ]
コメントを残す