オブジェクト・スプレッド構文・分割代入・残余構文まとめ

こんにちは。今回はJavaScriptのオブジェクト、配列に関する種々の構文についてまとめます。

オブジェクト

まずはオブジェクトについてです。

オブジェクトの定義に関して、以下のような特徴があります。

• キーとして変数が使える。その際、[]でかこむ必要がある
• "キー名"と"値として指定する変数名"が同じとき、省略して書くことができる（ショートハンドプロパティ）

const key = "age"
const country = "America"

const obj = {
  name: "Bob", 
  [key]: 12, 
  country
}

分割代入

次は分割代入についてまとめます。

オブジェクト

まずはオブジェクトの分割代入についてです。

コード例にあるように、原則として同じキー名同士が対応するようになっています。
ただし、name: name_のように別の変数に割り当てることも可能です。
また、デフォルト値の設定も可能です。

特徴をまとめると、以下の2点が挙げられます。

-　新しい変数名に割り当てることができる

• デフォルト値を設定できる(取り出した値がundefinedの時に使われる)

const obj = {
  name: "Bob",
  age: 12,
  country: "America"
}

const { name = "Mary", country } = obj
const { name: name_ = "Mary", country} = obj

配列

配列の分割代入はコードの通りです。

const arr = [1, 2, 3, 4, 5]
const [a, b, c = 4] = arr

配列の分割代入を応用すると、swapが簡単に行えます。

let a = 2, b = 3;
[a, b] = [b, a]

スプレッド構文

次はスプレッド構文についてです。これは配列・オブジェクトを展開するための構文です。
例えば、配列やオブジェクトの（シャロー）コピーに使うことができます。

const arr1 = [1, 2, 3]
const arr2 = [...arr1, 3, 4]

arr2 // [1, 2, 3, 3, 4]

arr2[0] = 100
arr1 // [1, 2, 3]

const obj1 = {a: 1, b: 2, c: 3}
const obj2 = {...obj1, d: 99, c: 10000}

obj2 //{a: 1, b: 2, c: 10000, d: 99}

残余引数・残余構文

最後に残余構文についてまとめます。残余構文は複数の要素を一つのオブジェクトにまとめるための構文です。

関数の引数については、下記のコードのようになります。

const showNames = (a, b, ...rest) => {
  console.log(a, b)
  console.log(rest)
}

showNames('a', 'b', 'c', 'd')

残余構文 + 分割代入

残余構文は配列・オブジェクトにも使えます。分割代入と組み合わせて使用します。

// 関数の引数をタプル型と思えば、配列と関数の残余構文は全く同じ
const [a, b, ...rest] = ['a', 'b', 'c', 'd']

const {a, b, ...rest} = {a: 'a', b: 'b', c: 'c', d: 'd'}