はじめに
JavascriptやTypescriptには従来言語のnullに値する表現が二つあります。
「null」と「undefined」です。今回はTypescriptにおけるこの二つの扱いについてまとめていきます。
既に詳しく説明されている方はたくさんいらっしゃるので、要点だけまとめました。
追記
- 例で出したプログラムが間違えていたので修正いたしました。(@t9hr4 さんありがとうございます！)
- 「null」や例外について追記しました。
結論
- 「null」は使わない。
- 比較するときは厳密等価演算子「===」を使うようにしよう
- 「falsy値」を比較せずに判定に使うのはやめよう
「null」を使わない理由
null
- 「代入すべき値が存在しない為、値がない」という意味
- 自然発生しない
- 一部の
DOM系APIがnullを返すことがある - リテラルなので、「null」という名前の変数を作成することはできない
const null = {}; // error
typeof null; // 'object'
undefine
- 「値が代入されていない為、値がない」という意味
- 言語仕様上自然に発生する
- 変数のため、「undefined」という名前の変数を作成することができる
const undefined = {}; // success
typeof undefined; // 'undefined'
nullを使わない理由
- それぞれの意味を考えて運用する場合、チーム全体で意味を理解し、
パターンAの場合は「null」、パターンBの場合は「undefined」のような取り決めをしなければならず
運用コストが高くなってしまう。 - チーム全体で「undefined」を使うで統一したほうが勘違いをしないで済む。
- 後述するが、比較する際にそれぞれを厳密等価演算子で比較しなければならず、バグの原因になってしまう。
比較するときは厳密等価演算子を使う
等価演算子(==)と厳密等価演算子(===)の詳しい違いはここでは取り上げないが、
上記のように「null」と「undefined」では型が違うので、
厳密等価演算子(===)ではないと同じものとして取り扱われてしまう。
null == undefined; // true
null === undefined; // false
「falsy値」を比較せずに判定に使うのはやめよう
「falsy値」とは
「falsy値」とは「false」ではないが、「false」として認められる値のことである。
一般的には以下の値がfalsy値である。（ほかにもある）
false-
0-0NaN -
''"" nullundefined
if文やfor文などの扱い
if文やfor文の比較において、「false」以外の「falsy値」も判定として利用できる。
つまりこういった利用の仕方ができる。
また「!」を使うことで否定することもできる。
if (0) {}
if (null) {}
if (!undefined) {}
if (!'') {}
「false」以外の「falsy値」を判定に使うのはやめよう
「falsy値」を判定に使ったときの問題
たとえばこんなコードがあったとします。
const str = 'hoge';
const num = Number(str);
if (!num) { console.log('数値ではありません'); }
文字列をnumber型にパースして失敗(NaN)であれば数値ではないとログを出すプログラムです。
ですがもし最初の文字が'hoge'ではなく'0'だった場合、numの中身は0となり、
!numはfalseとして扱われます。そのため、'0'の場合でも数値ではありませんと出てしまいます。
これからの「falsy値」の判定
「falsy値」を判定に使う時はそのまま使わず、一旦「false」にしてから判定に使いましょう。
先ほどの例の場合、
const str = 'hoge';
const num = Number(str);
if (Number.isNaN(num)) { console.log('数値ではありません'); }
このように「falsy値」を比較して「false」にしてから判定に使うことで先ほどの問題を回避することができます。
例外について
冒頭の結論でnullを使わないとありますが、一部APIの戻り値やjsonのパースなど(ほかにもあるかもしれません)で、nullが出てくるときがあると思います。
その場合は、それらを実行するラッパーを作成し、あくまでも自作しているプログラムの中ではnullを使わないといった運用をしていただければ、nullを使わないを達成できると思います。
const getHogeAPI = (str: string) => {
const result = hogeAPI(str); // nullが返ってくるAPI
if (result === null) {
// error処理
}
return result; // 適切な戻り値
}
最後に
自分自身の成長とこれからのTypescript初心者に向けて記事を書いてみました。
間違いや、改善点などありましたら、コメントやリクエストを送っていただけると助かります。