JavaScriptのオブジェクトは非常に多様な構造が存在するので、プログラムが複雑になりがちです。

しかしながら、ES2015(ES6)以降のモダンで便利な記述方法を使えば、複雑になりがちなプログラムを簡潔に書くことができるようになります。

今回はその中でよく使いそうなオブジェクトに関する構文・演算子をまとめてみました。

スプレッド構文(…)

参考: スプレッド構文 – JavaScript | MDN

例）

例えば3階層の構造を持ったobjというオブジェクトについて、obj.b.d の値だけを差し替えてobj2にコピーしたい場合に、スプレッド構文を使うと上記のような書き方が可能です。

変更したい箇所だけの値を記述し、それ以外は省略して穴埋めできるので、部分的にデータを変更して渡したい場合に便利です。

すべてクローンしたい場合、

で済んでしまいます。

オプショナルチェーン(?.)

参考: オプショナルチェーン (?.) – JavaScript | MDN

例）

例えば上記のようなオブジェクトで、特定のプロパティが存在するかどうか不明瞭な段階で、さらにその下層のプロパティを検証したい場合があります。

以前の書き方だと、上層から順に存在を検証する必要がありましたが、オプショナルチェーンを使うと、上層のプロパティの存在を検証せずにエラーを出すことなく下層のプロパティを検証することができます。

初期化時の動的なプロパティの指定

参考: オブジェクト初期化子 – JavaScript | MDN

例）

プロパティの名称を動的にしたい場合、以前だと動的に名称を指定したいプロパティを省いだ状態で初期化した上で、後からブラケット表記（obj[propName + 1] = ‘fuga’ のような書き方）で指定する必要がありましたが、
モダンな書き方では、初期化時に直接ブラケット表記のような書き方で、動的にプロパティ名を指定することができます。

ReactのHooksなどでは、ステートの更新で更新前の状態を参照して変更する場合も多く、これらの書き方がプログラムの表記を簡単にしてくれますので、とても便利です。

[番外編]JSXで使える三項演算子、&&、||の短絡評価を使った表記方法（オブジェクトでもモダンでもありませんが）

オブジェクトではないですが、関連してReactでよく使う表現をご紹介したいと思います。

JSXでは、if文による表記は見づらいため、条件により出し分けとして三項演算子や短絡評価による表記がよく見られます。

条件 (三項) 演算子

参考: 条件 (三項) 演算子 – JavaScript | MDN

?の前に条件式を書き、trueのときの値を?の後に、falseのときの値をその後の:の後に記述します。

&&の短絡評価を使った表現

参考: 論理和 (||) – JavaScript | MDN

ある条件のときだけ表示したい場合に便利な表現です。

||の短絡評価を使った表現

参考: 論理積 (&&) – JavaScript | MDN

ある条件に合わない場合だけ表示したい場合に便利な表現です。