JavaScriptで日付をコピーして計算すると、コピー元の日付も変わってしまう場合の対処法

JavaScriptで日付の処理をするとき、すでに設定してある開始日から30日後先の終了日を設定したいときがあります。

適当にささっと書いてしまったら少しつまづいたので、その時の対処法を備忘録として残しておきます。

うまくいかないパターン

うまくいかなかったのが下記のコードです。
やっていることは開始日を設定（実際には別の場所から取得）し、それを終了日の変数に一時的に入れてから、30日後に変更しているだけです。

ただ、この方法だと開始日も一緒に30日後に変わってしまいます。

// 開始日の設定
let startDate = new Date(2021, 4, 1);

// 終了日の設定
let endDate = startDate; // 一時的に開始日を入れる
endDate.setDate(endDate.getDate() + 30); // 開始日から30日後に変更

原因は参照渡し

こちらの原因ですが、let endDate = startDate;のときに参照渡しになってしまっているのが原因です。

JavaScriptには「値渡し」と「参照渡し」があり、値渡しというのが直接の値を変数に渡しているもので、参照渡しはあくまでパスを渡しているだけです。

簡単に説明すると、本当に「endDate = startDate」の状態になってしまっているので、片方変えるともう片方も変わってしまう。リンクされたような状態になっているということです。

新しくDateオブジェクトを作成する

参照渡しになってしまっていた部分を、開始日の情報を元にしてnew Date()で作成すれば問題なく動作しました。

let endDate = new Date(startDate.getTime());

全文は下記の通りです。

// 開始日の設定
let startDate = new Date(2021, 4, 1);

// 終了日の設定
let endDate = new Date(startDate.getTime()); // 一時的に開始日を入れる
endDate.setDate(endDate.getDate() + 30); // 開始日から30日後に変更

参照渡しなのか値渡しなのかの差は、「あれ？なんか変なことになっている…」の原因になるので、変数周りで意図した値になっていない場合は疑ってみるようにしましょう。