3 Simple Examples to Copy Objects in JavaScript

Copying objects in JavaScript can be tricky because we can either do a shallow copy (just copy the object but keep the reference) or a deep copy. (creating a new copy with a new reference)

To copy an object in JavaScript, you have three options:

• Use the spread operator
• Use JSON.stringify and JSON.parse
• Use Object.assign with an empty object

All of the above methods can be used to perform a deep copy. To shallow copy an object, and keep the reference, you can do a simple assignment:

const obj = { ... };

// Shallow copy can be done by using assignment:
const shallow = obj;

To deep copy an object and create a new reference for it, you can use the following options:

// Using JSON.parse & JSON.stringify
JSON.parse(JSON.stringify(obj));
Object.assign({}, obj);

// Using Object.assign
const shallow = Object.assign({}, obj);

// Using object spread
const deep = { ...obj };

Note that you can also perform a shallow copy with Object.assign if you pass an existing object as the first parameter:

const obj = { ... };

const shallow = Object.assign(obj, obj2);

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

The difference between shallow and deep copy

Shallow copy means you copy the object and keep the reference, while deep copy means you copy the object with a new reference.

Why is this important for us? Image the following situation. You have the internal state of your application stored in an object that is reflected in your user interface. You pass the state to a child component, where you modify the format of one of the properties.

// The root state contains a timestamp
const state = {
  timestamp: 1655718139739
}

// In your child component you want to display a formatted date
const passedState = state

// This will also modify the original object
passedState.timestamp = format(state.timestamp)

This will not only modify the format inside the child component but everywhere else since the two objects share the same reference. When you modify passedState, you also modify state.

This is why you usually want to go with a deep copy, where you create a new reference while copying the object. To fix the above error, we can use the above-mentioned solutions:

// The root state contains a timestamp
const state = {
  timestamp: 1655718139739
}

// This time, we performed a deep copy
const passedState = { ...state }

// This will NOT modify the original object
passedState.timestamp = format(state.timestamp)

50 JavaScript Interview QuestionsAnd their answers explainedHere are 50 JavaScript interview questions that often come up during a technical interview. In one place, one resource to learn from.Learn More

• Destructuring assignment
• Documentation for Object.assign
• JSON.parse
• JSON.stringify