JavaScriptで日付をコピーする

JavaScriptでDateオブジェクトをコピーしようとして少し詰まることがあったのでメモ。

うまくいかなかった場合

開始日をDateオブジェクトで設定して、その開始日を元に終了日をDateオブジェクトで作成するサンプルで試してみます。
まずはうまくいかなかった方法です。

JavaScript

// 開始日の設定
var start = new Date(2018, (6- 1), 14);
console.log('start', start); // start Thu Jun 14 2018 00:00:00 GMT+0900

// 開始から終了までの期間
var period = 31;

// 終了日の設定
var end = start;
end.setDate(end.getDate() + period);
console.log('start', start); // start Sun Jul 15 2018 00:00:00 GMT+0900
console.log('end', end); // end Sun Jul 15 2018 00:00:00 GMT+0900

9行目で開始日をコピーして、10行目で一定期間進めて終了日を設定しています。
この方法だと、10行目の終了日を設定したタイミングで開始日も同様に変更されてしまいました。
うまくいかなかった場合のデモページ
　

この原因は以前記事にも書いたことがありますが、オブジェクトをコピーすると参照渡しになってしまい、コピーした値を変更するとコピー元も同じく変更されてしまうためです。
以前の対応方法と同様に、いったんJSON文字列に変換する方法を試してみます。

JavaScript

// 開始日の設定
var start = new Date(2018, (6- 1), 14);
console.log('start', start); // start Thu Jun 14 2018 00:00:00 GMT+0900

// 開始から終了までの期間
var period = 31;

// 終了日の設定
var end = JSON.parse(JSON.stringify(start));
console.log('end', end); // end 2018-06-13T15:00:00.000Z
end.setDate(end.getDate() + period);
console.log('start', start); // エラーのため表示されない
console.log('end', end); // エラーのため表示されない

これでいけるかなと思ったのですが、うまくいきませんでした。
うまくいかなかった場合のデモページ2
　

対応方法

最終的に、開始日の値を使って新しくDateオブジェクトを作ることで対応できました。

JavaScript

// 開始日の設定
var start = new Date(2018, (6- 1), 14);
console.log('start', start); // start Thu Jun 14 2018 00:00:00 GMT+0900

// 開始から終了までの期間
var period = 31;

// 終了日の設定
var end = new Date(start.getTime());
end.setDate(end.getDate() + period);
console.log('start', start); // start Thu Jun 14 2018 00:00:00 GMT+0900
console.log('end', end); // end Sun Jul 15 2018 00:00:00 GMT+0900

対応後のデモページ2
　

【参考サイト】

• Dateは地雷原