undefinedとnullに関連する演算子

JavaScriptになんか便利そうな演算子がありますね。勉強してみます。

Optional Chaining A?.B / オプショナルチェーン

Optional chaining (?.)~mdn~

参照先Bがnull, undefinedの場合にエラーとならずにundefinedを返す。

//objは宣言済み。xプロパティは無い。
console.log(obj);
console.log(obj.x); // undefined
console.log(obj.x.y); // error
console.log(obj.x?.y); // undefined
console.log(objx?.x); // error // 存在しないobjxにはアクセスできない

使用感としては、アクセス先が未定義である可能性を考慮して使用する感じでしょうか。

obj.xがerrorにならないんだと思いました。

未宣言な変数名からアクセスはできない。恐らくその時は変数名のタイポなのかな？

ちなみに1段目に”?.”不要かな。

//obj2は宣言済み
console.log(obj2.x?.x?.x);

さて、「?.」を使用しないで、いろいろ考慮しながらアクセスすると、こんな感じになるのかな。

//obj2は宣言済み
console.log(obj2 && obj2.address && obj2.address.city);

他、if文と”===”の使用もあり得ますかな。

Nullish coalescing Operator A??B / Null合体演算子

Nullish coalescing Operator (??)~mdn~

AがnullかundefinedのときBを返す。それ以外のときAを返す。

let foo = null ?? "xxx"; // "xxx"
let foo = undefined ?? "xxx"; // "xxx"
let foo = "Hello" ?? "Ops"; // "Hello"
let foo = xyz ?? "xxx"; //未定義の文字列 // error

初期値の代入なんかに使用されると思っています。

以前は、”||”演算子を使用していたようです。たまによく見かけるような気がしますね。

ただし、falseなものが判定されます。数値の0とか空文字の””などです。??演算子とは同じではありません。

//obj2.xは未定義
console.log(obj2.x || "foo"); // "foo"
console.log("" || "foo"); // "foo"

補足

試行錯誤 / trial and error

宣言していない物を、console.log(); で、表示したら何になるか確認してみた。

• 宣言していない変数（変数とは呼べないと思うけど） : Errorでした。x is not defined
• 宣言だけした変数。(宣言しているので変数と呼べるだろう) : undefined でした。
• 定義していない関数の呼び出し : Errorでした。x is not defined
• 定義したけどreturnしない関数 : undefined でした。

null

• 意図的にオブジェクトの値が存在しないことを表す
• 「存在しない」ことを表したい場面で使われる値
• プリミティブ値の 1 つ
• 論理演算では偽値
• nullというリテラル
• undefinedとは違う
• undefined のようなグローバルオブジェクトのプロパティではない
• null は識別できないことを表し、変数がオブジェクトを指していないことを示す
• undefined == null : true
• undefined === null : false

undefined

• 文字通り「定義されていない」ことを意味する
• まだ値が代入されていない変数は undefined 型となる
• グローバルオブジェクトのプロパティ
• プリミティブ型の一つ
• 変数を宣言しただけならundefinedです
• returnしない関数の返り値はundefinedです

グローバルオブジェクト (Global Objects) のプロパティ

19.1 Value Properties of the Global Object

• globalThis(19.1.1)
• Infinity(19.1.2)
• NaN(19.1.3)
• undefined(19.1.4)

Primitive

• プリミティブはオブジェクトでなく、メソッドを持たないデータのこと。
• すべてのプリミティブ値は、イミュータブル (immutable) 、つまり変更できない。
• nullは違う。undefinedはそうです。
• 6個あります。
  • 文字列
  • 数値
  • BigInt
  • 真偽値
  • undefined
  • シンボル
• ラッパーオブジェクトが5つあります。
  • String: 文字列プリミティブ用
  • Number: 数値プリミティブ用
  • BigInt: 巨大整数プリミティブ用
  • Boolean: 真偽値プリミティブ用
  • Symbol: シンボルプリミティブ用