How do I clone a JavaScript object?

Question

In the function formatHours() below, I am trying to assign newHours to selectedLocation.data.hours (an object)

I am using the spread operator to clone the object, so that when the function finishes selectedLocation.data.hours remains the same, but it doesn't. After this function runs, selectedLocationd.data.hours is now equal to newHours.

formatHours():

const formatHours = () => {
    // ERROR: trying to clone selectedLocation.data.hours, but not working
    const newHours = { ...selectedLocation.data.hours };

    // loop through all hours and convert them to javascript date with .toDate()
    for (const hour in newHours) {
      newHours[hour][0] = newHours[hour][0].toDate();
      newHours[hour][1] = newHours[hour][1].toDate();
    }

    // set hours state with updated hours
    setHours(newHours);
  };

Here's what selectedLocation.data.hours looks like BEFORE passing it through formatHours():

(object of arrays of Firebase Firestore timestamps)

Here's what selectedLocation.data.hours looks like AFTER passing it through formatHours():

(object of arrays of Javascript Date objects)

NOTE: selectedLocation.data.hours should stay the same before and after the function, but doesn't. I must be missing something.

Does this answer your question? How do I correctly clone a JavaScript object? — romellem
– romellem, Commented Feb 24, 2021 at 14:55

CertainPerformance · Accepted Answer · 2021-02-24 14:58:46Z

1

Instead of changing the newHours[hour] array (which mutates the object currently in state/props), create an entirely new array at that location, with the properties you need:

// Shallow clone newHours
const newHours = { ...selectedLocation.data.hours };
// Reassign each property; it'll affect the clone, not the original
for (const [hour, arr] of Object.entries(newHours)) {
  newHours[hour] = [
    arr[0].toDate(),
    arr[1].toDate(),
    arr[2]
  ];
}

Another method, with Object.fromEntries:

const newHours = Object.fromEntries(
    Object.entries(selectedLocation.data.hours).map(([hour, arr]) => (
        [ // return an entry array
            hour, // key in new object
            [ // value in new object
                arr[0].toDate(),
                arr[1].toDate(),
                arr[2]
            ]
        ]
    ))
);

answered Feb 24, 2021 at 14:58

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

beartrap · Accepted Answer · 2021-02-24 15:05:35Z

0

I'm not sure if it's the best way to do that, but you can do this

    const newHours = JSON.parse(JSON.stringify(selectedLocation.data.hours));

This will deep clone the object.

answered Feb 24, 2021 at 15:05

beartrap

512 bronze badges

Collectives™ on Stack Overflow

How do I clone a JavaScript object?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related