【TS】Null合体演算子(??)についてざっくりまとめてみた

目次

背景

Null合体演算子を実務で使うことがあったのですが、パッと使うことができなかったので、ブログにまとめようと思います。

Null 合体演算子とは

Null合体演算子(??)とは、論理演算子の一種です。TSで代表的な論理演算子は論理積演算子(&&)や論理和演算子(||)です。Null合体演算子は、基本的にはNull合体演算子の左辺の値を返しますが、左辺の値がnullまたはundefinedの場合に右辺の値を返します。

■defaultAgeがnullの場合

const originalDefaultAge = 25;

const defaultAge = null;

const user = {
  name: "yuki",
  age: defaultAge ?? originalDefaultAge,
};

console.log(user);
// => {
//      "name": "yuki",
//      "age": 25
//    }

■defaultAgeがundefinedの場合

const originalDefaultAge = 25;

const defaultAge = undefined;

const user = {
  name: "yuki",
  age: defaultAge ?? originalDefaultAge,
};

console.log(user);
// => {
//      "name": "yuki",
//      "age": 25
//    }

■defaultAgeが30の場合

const originalDefaultAge = 25;

const defaultAge = 30;

const user = {
  name: "yuki",
  age: defaultAge ?? originalDefaultAge,
};

console.log(user);
// => {
//      "name": "yuki",
//      "age": 30
//    }

Null合体演算子を三項演算子で書く場合、記述が冗長になってしまうので、Null合体演算子で書ける場合は、Null合体演算子を使用した方が良いです。

const originalDefaultAge = 25;

const defaultAge = undefined;

const user = {
  name: "yuki",
  // Null合体演算子を使用する場合、defaultAge ?? originalDefaultAgeと書ける 
  age: (defaultAge === null) || (defaultAge === undefined) ? originalDefaultAge : defaultAge,
};

console.log(user);
// => {
//      "name": "yuki",
//      "age": 25
//    }

論理和演算子との違い

Null合体演算子は、論理和演算子の特殊形とみなすことができます。論理和演算子は、左辺の値がnullやundefinedに関わらず、falsyな値の場合に、右辺の値を返します。

参考記事

Null 合体演算子 (??) - JavaScript | MDN

演算子 · JavaScript Primer #jsprimer