【TypeScript】nullまたはundefinedを回避する方法

タイプスクリプト TypeScript

TypeScriptのNull合体演算子を勉強したのでアウトプットします。

 

nullまたはundefinedを回避する方法

例えばデータベースなどから返ってくる値(何が返ってくるかわからない値)がnullまたはundefinedだった場合に特定の値を設定したいという場合があります。このような場合Null合体演算子を使用します。Null合体演算子の書き方は「〜 ?? デフォルト値」と書きます。

Null合体演算子で判定結果をみる

では、Null合体演算子を使用して ‘ ‘(空文字)、null、undefinedの場合の判定結果を見てみます。

//空文字の場合
const input = '';
const keepData = input ?? '入力がありません'

console.log(keepData); //(空文字)

//nullの場合
const input2 = null;
const keepData2 = input2 ?? 'input2はnullでした'

console.log(keepData2); //input2はnullでした

//undefinedの場合
const input3 = undefined;
const keepData3 = input3 ?? 'input3はundefinedでした'

console.log(keepData3); //input3はundefinedでした

上記のようにnullまたはundefinedだった場合、デフォルト値である ?? の後ろの値が設定される結果となりました。

Null合体演算子を使用すればnullまたはundefinedだった場合、特定の値を設定することでnullやundefinedを回避することができます。

 

「”(空文字)」も回避したい場合

nullまたはundefinedだけでなく「”(空文字)」も回避したい場合は論理or演算子を使用します。

//空文字の場合
const input = '';
const keepData = input || '空文字です'

console.log(keepData); //空文字です

//nullの場合
const input2 = null;
const keepData2 = input2 || 'input2はnullでした'

console.log(keepData2); //input2はnullでした

//undefinedの場合
const input3 = undefined;
const keepData3 = input3 || 'input3はundefinedでした'

console.log(keepData3); //input3はundefinedでした

上記のような結果となりました。

Null合体演算子と論理or演算子を上手に使っていきたいものです。

 

きせる

タクシー運転手を1年経験し、畑違いのエンジニアに転職。エンジニアに向いていないと思いつつ現在3年目。

きせるをフォローする
スポンサーリンク
TypeScript