👌

JSXで使われる&&についてちょっとだけ深掘りする

に公開
JavaScript
React
tech

JavaScriptの小ネタ

ドキュメントの条件付きレンダーの項に書かれているこういう書き方をきちんと理解するにはJavaScriptの論理積(&&)について理解する必要がある

jsx
{unreadMessages.length > 0 &&
  <h2>
    You have {unreadMessages.length} unread messages.
  </h2>
}

論理積(&&)

&&は左から順にFalsyかどうかを判定してFalsyな値がみつかったタイミングでその値をかえす。Falsyな値がみつからなかったら一番右の値をかえす

例１）

const x = false && true
console.log(x) // false

1つめの値を判定→falseはFalsyな値なのでxはfalseになる

例２）

const x = 1 && 0 && true
console.log(x) // 0

1つめの値を判定→1はTruthyな値なので次の値の判定に進む
2つめの値を判定→0はFalsyな値なのでxは0になる

例３）

const x = 1 && true && "foo"
console.log(x) // foo

1つめの値を判定→1はTruthyな値なので次の値の判定に進む
2つめの値を判定→trueはTruthyな値なので次の値の判定に進む
3つめの値を判定→fooはTruthyな値だけど1番右の値なのでxはfooになる

論理和(||)

||は左から順にTruthyかどうかを判定してTruthyな値がみつかったタイミングでその値をかえす。Truthyな値がみつからなかったら一番右の値をかえす

例１）

const x = true || false
console.log(x) // true

1つめの値を判定→trueはTruthyな値なのでxはtrueになる

例２）

const x = 0 || 1 || true
console.log(x) // 1

1つめの値を判定→0はFalsyな値なので次の値の判定に進む
2つめの値を判定→1はTruthyな値なのでxは1になる

例３）

const x = 0 || false || undefined
console.log(x) // undefined

1つめの値を判定→0はFalsyな値なので次の値の判定に進む
2つめの値を判定→falseはFalsyな値なので次の値の判定に進む
3つめの値を判定→undefinedはFalsyな値だけど1番右の値なのでxはundefinedになる

FalsyとTruthy

上の説明で使われているFalsyとTruthyについて

以下はFalsyの説明の引用

Falsyな値は、Booleanコンテキストに現れたときに偽とみなされる値です。
Falsyな値は8つあります。0、-0、0n、""、null、undefined、NaN

以下はTruthyの説明の引用

Falsyして定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN) を除くすべての値はTruthyです。

おわりに

jsx
{unreadMessages.length > 0 &&
  <h2>
    You have {unreadMessages.length} unread messages.
  </h2>
}

に戻ると、unreadMessages.length > 0がFalsyの場合、JSXに埋め込まれたこの式はfalseと評価され、何もレンダリングされないことが理解できる

Discussion