EveSquare
@EveSquare (EveSquare)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

JavaScriptの記法について

解決したいこと

GitHubにてThree.jsの環境を提供しているライブラリを見ていたところ、以下のリンクのような記法がありました。このように記述する理由が知りたいです。
https://github.com/edwinwebb/three-seed/blob/35ae2b246062202e7ebae3df39f26a7c401fdf3d/src/entry.js#L30-L34

自分で試したこと

同じ記法でサンプルを作成し、試しました。

class Hoge {
    update(piyo) {
        console.log("hoge" + piyo);
    }
}

const hoge = new Hoge();
const piyo = "piyo";
hoge.update && hoge.update(piyo);
//>> hogepiyo
class Hoge {
    update(piyo) {
        console.log("hoge" + piyo);
    }
}

const hoge = new Hoge();
const piyo = "piyo";
hoge.update(piyo);
//>> hogepiyo

どちらも結果は同じなのですが、hoge.update && hoge.update(piyo);と記述する理由が知りたいです。

0

1Answer

hogeupdateがあるとは限らないからです。

hoge.update && hoge.update(piyo);

&&には短絡性があるので、左辺がfalsyであれば右辺は評価されません。
結果的に、次のif文のショートハンドになっています。

if (hoge.update) {
    hoge.update(piyo);
}

ただ、今日的にはOptional Chainingを使う場面かと。

hoge.update?.(piyo);

厳密にはnullish(undefinednullのみ)とfalsy(false0なども含む)の違いがありますが、こう書く以上、関数であることは前提なので等価です。

2Like

Comments

  1. @EveSquare

    Questioner

    なるほど..Optional Chainingというものがあるのですね。
    とても為になりました!ありがとうございます。

Your answer might help someone💌