More than 1 year has passed since last update.

[ES6] オブジェクトリテラルの省略記法

Last updated at 2023-11-22Posted at 2023-11-22

Reactで頻出するこれ

// id, name, email がpropsで渡ってきているとして
const　userData = {
  id,
  name,
  email,
  ........
}

こういう書きかた。
よくわからないがkeyとvalueが同じであれば省略できるという理解でいる。
詳しく理解せずに1年以上もReactを書いている。
よくない。調べようと思う。

前述のuserDataオブジェクトは、昔ながらの書きかたではこうなる。

// id, name, email がpropsで渡ってきているとして
const　userData = {
  id = id,
  name = name,
  email = email,
  ........
}

しかしReactではpropsで持ってきた変数にデータを代入することが頻発するため、さすがに冗長に感じてしまう。

そのときにES6で加わったオブジェクトリテラルの省略記法という新しい書きかたをしているのが、一番上のコードだったのだ。

同じくES6で加わったデフォルト引数とも相性がよい。

function fn ( options = {} ) {
  let id = options.id;
  let name = options.name;
  let email = options.email;
  // 以下同じような定義
}

引数のオプションはこうやってだらだら書いてしまいがち。というか、今まではこう書くほかはなかった。

↑これを、↓こう書くことができる。

function fn(options = {}){
  let {id, name, email, 以下続く} = options;
}

見通しがよくなる。

省略記法は糖衣構文ではないので独断で採用して怒られるということはないが、使う必要のないところ（例：keyが2、3の少ないデータ）で使うのは初見の開発者にとって見づらいかもしれない。

一番大切なのはセキュリティで、次点は処理速度、三番目はメンバーにとって読みやすいことだと常々思っている。