【React】オプショナルチェイニング派？AND演算子派？

投稿日 12月 17, 2023
更新日 1月 7, 2024
著者しんぺー
カテゴリー JavaScript
カテゴリー React

Reactで同じような処理をオプショナルチェーンで記述しているものと、AND演算子で記述しているものがありました。
どちらが良いのでしょうか？

オプショナルチェイニング

プロパティやメソッドが存在しない場合に、エラーにならずundefinedを返してくれます。
簡単に記述できていいですね。

function App({ result }) {
    return (
      <div className="container">
        {result?.map((item, index) => (
          <ul key={index}>
            <li>User ID: {item.userId}</li>
          </ul>
        ))}
      </div>
    )
  }

AND演算子

こちらもプロパティやメソッドが存在しない場合エラーにならず、オプショナルチェイニングと同じような挙動ですがコードは少し長くなります。

  function App({ result }) {
    return (
      <div className="container">
        {result && result.map((item, index) => (
          <ul key={index}>
            <li>User ID: {item.userId}</li>
          </ul>
        ))}
      </div>
    )
  }