JavaScript: 2 Ways to Clone (Deep Copy) a Date Object

Updated: March 7, 2023 By: Khue Post a comment

In JavaScript, Date objects are mutable, so if you simply assign a Date object to a new variable, changes to the new variable will affect the original Date object. This article will walk you through a couple of different ways to create a truly new Date object that is a clone (or deep copy) of an existing Date object.

Using the Date() constructor

You can use the Date constructor to create a new Date object with the same value as the original Date object.

Example:

const originalDate = new Date('2023-03-07T12:30:00.000Z');
const clonedDate = new Date(originalDate);

// Modify clonedDate
clonedDate.setFullYear(2030);
clonedDate.setDate(8);

console.log("Original date:", originalDate); 
console.log("Cloned date:", clonedDate); 

Output:

Original date: 2023-03-07T12:30:00.000Z
Cloned date: 2030-03-08T12:30:00.000Z

Using the getTime() method

The getTime() method can help us create a new Date object with the same timestamp value as the original Date object.

Example:

const originalDate = new Date("2023-01-01T12:00:00.000Z");

// Get the timestamp
const timestamp = originalDate.getTime();

// Clone the date
const clonedDate = new Date(timestamp);

// Modify clonedDate
clonedDate.setFullYear(2024);
clonedDate.setMonth(11);

console.log("Original date:", originalDate); 
console.log("Cloned date:", clonedDate);

Output:

Original date: 2023-01-01T12:00:00.000Z
Cloned date: 2024-12-01T12:00:00.000Z

What about using JSON.stringify() and JSON.parse()?

When you use JSON.stringify() on a Date object, it will convert the Date object into a string representation of the date. However, when you parse the string back into an object using JSON.parse(), it will not be a Date object but rather a string. Let me prove this fact with the code below:

const date = new Date("2029-01-01T00:00:00.000Z");

const json = JSON.stringify(date);

const clonedDate = JSON.parse(json);

console.log(clonedDate instanceof Date); 
console.log(typeof clonedDate); 

Output:

false
string

Given the above, it is better NOT to use JSON.stringify() to deep copy a Date object. If you still want to, you can do the following (it’s inefficient and too verbose):

// Original Date
const originalDate = new Date("2023-06-01T00:00:00.000Z");

// Clone Date
const clonedDate = new Date(JSON.parse(JSON.stringify(originalDate)));

// Modify the cloned date
clonedDate.setFullYear(2024);

// Log the original date
console.log("Original Date: ", originalDate);

// Log the cloned date
console.log("Cloned Date: ", clonedDate);

Output:

Original Date:  2023-06-01T00:00:00.000Z
Cloned Date:  2024-06-01T00:00:00.000Z

Conclusion

You’ve learned some techniques to deep copy a Date object in JavaScript. This knowledge can be helpful in some situations. For example, when implementing undo/redo functionality in an app, it may be necessary to clone Date objects in order to maintain the state of the application at different points in time.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments