1
0

More than 1 year has passed since last update.

TypeScriptのパワフルなツール: Null合体演算子 (`??`) をマスターしよう!

Posted at

目次

  1. はじめに
  2. Null合体演算子とは?
  3. Null合体演算子の使用例
  4. Null合体演算子 vs OR 演算子
  5. まとめ

1. はじめに

JavaScripttは、日々の開発作業を容易にし、コードをより簡潔に書くための多くのツールを提供しています。その一つがNull合体演算子??)です。この記事では、Null合体演算子の使い方とその強力さを解説します。


2. Null合体演算子とは?

Null合体演算子(??)は、左辺の値がnullまたはundefinedの場合に、右辺の値を返します。それ以外の場合、つまり左辺の値がnullまたはundefinedでない場合には、左辺の値がそのまま返されます。


3. Null合体演算子の使用例

以下に、JavaScript/TypeScriptにおけるNull合体演算子の使用例を示します:

let x = null;
let y = x ?? "default";
console.log(y);  // "default"

この例では、xnullなので、y"default"となります。

もう一つの例:

let x = "Hello, world!";
let y = x ?? "default";
console.log(y);  // "Hello, world!"

この例では、xnullまたはundefinedでないので、yxの値である"Hello, world!"となります。


4. Null合体演算子 vs OR 演算子

JavaScriptのOR演算子(||)も似たような動作をしますが、falsyfalse, 0, "", null, undefined, NaN)の場合に右辺のオペランドを返します。これはNull合体演算子との重要な違いです。以下の例で見てみましょう:

let x = "";
let y = x || "default";
console.log(y);  // "default"

この例では、x""(falsy)なので、y"default"となります。

しかし、Null合体演算子を使うと:

let x = "";
let y = x ?? "default";
console.log(y);  // ""

この例では、xnullまたはundefinedではないので、yxの値である""となります。

つまり、Null合体演算子はnullまたはundefinedのチェックに特化しているため、0""(空文字列)などの有効な値をデフォルト値に置き換えてしまうOR演算子の問題を避けることができます。


5. まとめ

Null合体演算子(??)は、JavaScriptやTypeScriptでの開発において強力なツールです。存在しない可能性のある値に対してデフォルト値を設定する際などに、この演算子を使ってコードを簡潔に保つことができます。また、OR演算子(||)との違いを理解することで、より適切な場面でNull合体演算子を使用することができます。


以上、JavaScript/TypeScriptのNull合体演算子の使い方についての解説でした。この記事があなたの開発に少しでも役立つことを願っています。いいねやシェアをいただけると幸いです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0