CookieやWebStorageでのnullの振る舞い

うっかり間違えたけど、その間違えが後々響くことがあるので備忘録として記載。

起きた問題

特定の変数がnullであった際に後続の処理を行わない実装をしていたが、意図せず判定に引っかからず処理が実行されてしまうパターンが発生していた。

function hoge(value) {
  // value には値がはいるかnullかのどちらか
  if (!value) {
    return false;
  }
  /* 後続の処理 */
}

原因

valueの値は、別のAPIで取得した戻り値（何かしらの値 or null）をCookie、LocalStorageへ保存している。
当たり前なのだが、、APIで取得した値がnullで、それをCookieやLocalStorageへ保存した後に取得できる値はobjectではなくstringとなってしまう。

let value_1 = null;
console.log(typeof value_1); // object
if (!value_1) {
  console.log('ここの条件に入る');
}
// 「ここの条件に入る」が出力される

let value_2 = 'null'; // CookieやlocalStorageから取得すると文字列として扱われる
console.log(typeof value_2); // string
if (!value_2) {
  console.log('ここの条件に入る');
}
// 「ここの条件に入る」が出力されない（文字列なので上記の判定分だと引っかからない）

nullはnullだと思いこみから発生した問題。
TypeScriptにすれば恩恵がうけれたかな、と思いつつも、今後同じことを繰り返さないよう気をつける。