3 Simple Examples to Copy Objects in JavaScript

3 Simple Examples to Copy Objects in JavaScript

Learn about different ways of copying objects in JavaScript
Ferenc Almasi β€’ Last updated 2022 June 20 β€’ Read time 2 min read
  • twitter
  • facebook
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:

Copied to clipboard!
const obj = { ... };

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

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

Copied to clipboard! Playground
// 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 };
deep.js

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

Copied to clipboard!
const obj = { ... };

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

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.

Copied to clipboard! Playground
// 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:

Copied to clipboard! Playground
// 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)
How you can copy objects in JavaScript
If you would like to see more Webtips, follow @flowforfrank

50 JavaScript Interview Questions

Resources:

  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.