【React備忘録】めっちゃ多用する演算子「&&」「??」のまとめ

Reactで使わない日はないといっても過言ではない演算子。
忘れないようにメモしておく。

&&（論理AND演算子）

• 左側がtrueの場合、右側を評価し、結果を返す。
• 左側がfalsy（false、null、undefiend、0、Nan、''など）の場合、右側を評価せずに、左側を返す。

App.tsx

const Test = () => {
  const array = ['1', '2', '3']

  return (
    <div>
      {array.length > 0 && <ArrayPanel />}
    </div>
  )
}

上記の例は、配列に値が1個以上ある場合にコンポーネントを表示させる処理になっている。
例えば、地図アプリで、地図上でクリックしたデータを配列に格納。データが格納されたら、初期状態では非表示だったArrayPanelコンポーネントを表示し、データを一覧で表示させる...といった処理など、コンポーネントの表示・非表示に活用できる。

??（Nullish Coalescing演算子）

• 左側がnullまたはundefiendの場合に限り、右側を返す。
• 注意点として、左側がfalsyの場合は右側を返さない（nullかundefiendの時だけ返す）。

const Test = () => {
  const label = getLabel();

  return (
    <div>
      {label ?? '（ラベルなし）'}
    </div>
  )
}

すごく簡単な例だけれど、ラベルを取得する関数があったとして、値がある場合は表示し、ない場合（null or undefined）は「（ラベルなし）」と表示させる。

「評価する」と「返す」の違い

評価する

式や値を計算、または実行すること。
&&（論理積）の場合、左辺がtrueであれば右辺が評価（実行）され、その評価結果が返される。

true && console.log('実行されました'); // コンソールに「実行されました」と表示される

上記の例では、trueが左辺にあるため、右辺のconsole.log('aaa') が実行される。

返す

式全体としての値を返すこと。
??（nullish coalescing operator）の場合、左辺がnullまたはundefinedのときに右辺が評価され、その結果が返される。

null ?? 'デフォルトの値'; // 結果は 'デフォルトの値'

上記の例では、左辺がnullなので右辺の'デフォルトの値' がそのまま返される。