JavaScriptでNullを上手に扱う

JavaScript

近年、Null安全という言葉と共に、各言語でNullを安全に扱うための構文が一般的になってきています。
こちらの記事にあるように、この流れはJavaScriptに限った話ではありません。

今回はJavaScriptに限った話になりますが、Nullを扱う際に便利な構文をいくつか紹介できればと思います。

論理和 (||)

論理和を使用すると、変数のデフォルト値を定義する際に便利です。これはJavaScriptの特性によるもので、JavaScriptではnullをfalseとして判定する言語仕様となっています。(null以外にも数値の0なども同様です。）
そのため、以下のコードを実行すると、hoge || "default"は、変数hogeがfalseとして扱われることにより論理和の右辺が評価され"default"がobjに代入されることとなります。

let hoge = null
let obj = hoge || "default";
console.log(obj) //default

Optional Chaining (?.)

次に、Optional chainingを見ていきます。
こちらは、変数がnullの場合にundefinedを、そうでなければチェインした式を実行することになります。例を見てみましょう。

var user1 = {
    name: "hoge",
    age: 30,
    address: {
        country: "japan",
        city: "tokyo"   
    }
}

var user2 = {
    name: "hoge",
    age: null,
    address: null
}

console.log(user1?.name) //hoge
console.log(user1.address?.country) //japan
console.log(user2.address?.country) //undefined

この構文を使用すると、万が一変数がnullであったとしても実行時エラーとなりません。例えばuser2.address.countryとして呼び出すと、TypeError: Cannot read property 'country' of nullが発生してしまいます。
とはいえ、undefinedが返されるというのも実用的ではありませんので、Optional Chainingは後述するNull合体と一緒に使うと良いでしょう。

Null合体 (??)

というわけでNull合体を見ていきましょう。
Null合体演算子??を使用すると、左辺の値がnullまたはundefinedの時、右辺を返し、それ以外の場合は左辺の値を返します。

var user2 = {
    name: "hoge",
    age: null,
    address: null
}
console.log(user2?.name) //hoge
console.log(user2.address?.country ?? "unknown") //unkown

Null合体とoptional chainingを組み合わせることで安全な変数の取り扱いができるようになります。

Null合体代入 (??=)

最後に、Null合体代入を見てみましょう。 Null合体代入を使用すると、変数がnullまたはundefinedの場合にのみ値の代入ができるようになります。
例を見てみましょう。

let a = null
a ??= 100

let b = 50
b ??= 100

console.log(a) //100 aはnullだったため、代入が行われる
console.log(b) //50 bはnullでなかったため、代入が行われない

以上、JavaScriptでnullを安全に使う方法をいくつか紹介しました。 ただ、これから何かJavaScriptで作ろうとしているのなら、TypeScriptを使えばよりnullに対して安全になるので、そちらも考慮しても良いかもしれません。

それではまた。