CookieやWebStorageでのnullの振る舞い

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にすれば恩恵がうけれたかな、と思いつつも、今後同じことを繰り返さないよう気をつける。