【JavaScript】スプレット構文について｜SKILLDO

今回はReactを勉強しているとよく出てくるスプレット構文についてかんたんにまとめていきたいと思います。

スプレット構文とは
オブジェクトのコピー
スプレット構文と分割代入
Reactで使われる場面
さいごに

スプレット構文とは

スプレット構文とは配列やオブジェクトの前に…をつけることでその中身が展開される記法です。

// 配列の場合
const arr = [1, 2, 3]
const arr_2 = [...arr, 4, 5]
console.log(arr_2)  // [ 1, 2, 3, 4, 5 ]

// オブジェクトの場合
const obj = {a: 1, b: 2, c: 3}
const obj_2 = {...obj, d: 4, e, 5}
console.log(obj_2)  // { a: 1, b: 2, c: 3, d: 4, e: 5 }

オブジェクトの場合、キーがかぶっていた場合は上書きされます。

const obj_3 = {...obj, c: 10, d: 4, e: 5}
console.log(obj_3)  // { a: 1, b: 2, c: 10, d: 4, e: 5 }

オブジェクトのコピー

スプレット構文はオブジェクトをコピーするのにも使われます。

const original = {a: 1, b: 2, c: 3}
const copy = {...original}
copy === original  // false

copy.c = 10
console.log(copy)  // { a: 1, b: 2, c: 10 }
console.log(original)  // { a: 1, b: 2, c: 3 }

ただし、この方法は浅いコピー（シャローコピー）なので、オブジェクトの深さが１段までしか有効ではないです。

const user_1 = {
  name: 'sakai',
  email: 'abc@example.com',
  age: 27,
  address: { town: 'suzuka' }
}

const copy = { ...user }
copy.address.town = 'kasai'
console.log(copy)
// {
//   name: 'sakai',
//   email: 'abc@example.com',
//   age: 27,
//   address: { town: 'kasai' }
// }

console.log(user)
// {
//   name: 'sakai',
//   email: 'abc@example.com',
//   age: 27,
//   address: { town: 'kasai' }
// }

スプレット構文と分割代入

スプレット構文は分割代入と組み合わせると表現力が高まります。

const user = {
  id: 1,
  name: 'sakai',
  email: 'abc@example.com',
  age: 27
}

const { id, ...userWithoutId } = user;
console.log(id, userWithoutId)
// 1 { name: 'sakai', email: 'abc@example.com', age: 27 }

Reactで使われる場面

Reactで実際にスプレット構文が使われる場面を紹介して終わりにしたいと思います。

export const restaurantsReducer = (state, action) => {
  switch (action.type) {
    case restaurantsActionTypes.FETCHING:
      return {
        ...state,
        fetchState: REQUEST_STATE.LOADING,
      };
    // 略
  }
}

ここでのstateは{ fetchState: 'INITIAL', restaurantsList: [] }になります。なので、…stateの部分でオブジェクトが展開され、6行目のところでfetchStateを上書きしていることになります。

このように業務で使ったことのない自分でさえよく見る構文なので、ちゃんと押さえておいて損はない構文なのかなと思います。