ブロックスコープ内で {} をオブジェクトとして扱うには「式として書く」必要

例えば useState の更新関数などで：

setUser(prev => {
  { name: "kato", age: prev.age + 1 }   // ❌これは文として解釈される
});

これは オブジェクトではなく「ブロック文」 と解釈されてしまい、返り値が undefined になってしまいます。

---

なぜ？ → JS のパーサーは {} を常に「文」として解釈するから

ブロックの最初の {} は 文（statement） なのか オブジェクトの式（expression） なのか曖昧です。
JS では以下のように判断します：

• { a: 1 } が 文の開始に見えたら → ブロック文として処理される
• ({ a: 1 }) のように括弧で囲まれていれば → 式として評価される

---

React の useState 更新関数でよく起きる例

❌ 間違い（返り値がない）

setUser(prev => {
  { ...prev, age: prev.age + 1 };
});

→ この {} は ブロック文
→ リターンされていないので undefined を渡してしまう
→ React は undefined の更新を無視する

---

正しい書き方1：return を書く

setUser(prev => {
  return { ...prev, age: prev.age + 1 };
});

---

正しい書き方2：暗黙 return で括弧を使う（よく使う）

setUser(prev => ({
  ...prev,
  age: prev.age + 1,
}));

→ これは ( ) によって オブジェクトが式である と宣言している形

---

ポイント：括弧は「これは式だよ」と JS に教えている

({ ... })  // オブジェクト式
{ ... }    // 文（ブロック）

React では setState(prev => ({ ... })) のように書くことがよくあるため、括弧は必須です。

---

さらに深掘り：ブロック内で「オブジェクトを書く」とは？

例：if 文の中にオブジェクトを返したい場合
❌ ブロック文扱い

if (true) {
  { a: 1 };
}

✅ return が必要

if (true) {
  return { a: 1 };
}

または式として括弧で囲む

if (true) {
  const obj = ({ a: 1 });
}

---

まとめ

書き方	ブロックスコープ	オブジェクトとして扱われる？
{ ... }	ブロック文	❌ ならない
({ ... })	式	✅ なる
return { ... }	return で式になる	✅ なる

---

React で特に覚えるべきルール

🔹 useState 更新関数

setState(prev => ({ ...prev, x: 1 }));  // ◎
setState(prev => { ...prev, x: 1 });    // ✖ ブロック文

🔹 JSX 中

<div>{ { a: 1 } }</div>   // JSX では式なのでOK（ただし表示は [object Object]）