new Date 文字列 vs オブジェクト

カレンダーを実装する際に、dateが文字列として受け取られる場合とオブジェクトとして受け取られる場合で値を比較する際に何度もエラーが発生した。

確認したところ、dateが文字列のときのフォーマット方法とオブジェクトのときのフォーマット方法が異なり、比較対象にならなかったのだ！

これ以上このようなエラーを避けるために、ブログで整理してみる。

new Date()

new Dateをコンソールに表示すると、以下のように出る。

コンソール結果 : Tue Nov 05 2024 17:24:55 GMT+0900 (韓国標準時)

new Date()はJavaScriptが提供するdateオブジェクトを生成するコンストラクタ関数であり、オブジェクトに該当する。

ここで、私は初心者のよくあるミスなのか、単純に無知だったのか、日付を比較する際に単純に===を使って比較したためにエラーが発生した。

例) 今日の日付todayとtaskというオブジェクトがあると仮定しよう。
todayの日付とtask.dateを比較して一致すればデータ値を取得しようとしている。

間違った例

	const today= new Date()
    const task = {title : 'todo', content : 'make cake' , date : '2024-11-11'}

    
   return(
    {today === task.date ? <div>{task.title}</div> : null}
      )

🙌上記のコードでは、todayはオブジェクトでtask.dateは文字列なので比較が成り立たない。

したがって、todayを文字列として返すか、task.dateをオブジェクトに変換して比較する必要がある！

変換例

🧐todayを文字列に変換

const today = new Date().toISOString().split('T')[0]; // "YYYY-MM-DD" 
const task = { title: 'todo', content: 'make cake', date: '2024-11-11' };

return(
{today === task.date ? <div>{task.title}</div> : null}
)

🧐task.dateをオブジェクトに変換

const today2 = new Date();
const task = { title: 'todo', content: 'make cake', date: '2024-11-11' };
const taskDate = new Date(task.date); // task.dateを Dateオブジェクトに変換

return(
  //両方を文字列形式に変換した後に比較 
{today2.toDateString() === taskDate.toDateString() ? <div>{task.title}</div> : null}
) 

私だけが知らなかった～

タイプにはいつも注意するように言われていたのに、毎回タイプのせいでエラーが出るみたいだ。。

注意しよう！