Tuesday, 1 Jul 2025
  • My Feed
  • My Interests
  • My Saves
  • History
  • Blog
Subscribe
Code Reveals
  • Home
  • HTML

    What is a Meta Tag in HTML?

    By Chief Editor

    Difference between HTML Tag and HTML Element in HTML?

    By Chief Editor
    What is Symentic HTML

    What is Symentic HTML?

    By Chief Editor

    What are the async and defer attributes in the “script” tag?

    By Chief Editor

    What is Block level Element and Inline Level Element?

    By Chief Editor

    What is the difference between “HTML” and “HTML5”?

    By Chief Editor
  • JavaScript

    What is Scope in JavaScript?

    By Chief Editor

    What is a Promise in JavaScript, and what are its parameters?

    By Chief Editor

    What are the Rest and Spread operators in JavaScript?

    By Chief Editor

    Explain Call, Apply and Bind in JavaScript.

    By Chief Editor

    Explain var let and const in JavaScript with Example.

    By Chief Editor

    Explain Deep Copy and Shallow Copy in JavaScript.

    By Chief Editor
  • Frontend Interview

    Explain Deep Copy and Shallow Copy in JavaScript.

    By Chief Editor

    Is JavaScript a synchronous or asynchronous language?

    By Chief Editor

    What is Position in CSS?

    By Chief Editor

    Difference Between position: relative and position: absolute in CSS

    By Chief Editor

    What is Symentic HTML?

    By Chief Editor

    What are the Lexical Scope in JavaScript?

    By Chief Editor
  • Backend Interview

    What is Higher Order Component in React?

    By Chief Editor

    What is Doctype HTML in HTML?

    By Chief Editor

    Difference between HTML Tag and HTML Element in HTML?

    By Chief Editor

    What are the drawbacks of React?

    By Chief Editor

    Is JavaScript a synchronous or asynchronous language?

    By Chief Editor

    What is NodeJS and its main features?

    By Chief Editor
  • Other
    • Contact Us
  • Frontend Interview
  • Backend Interview
  • React Interview
  • JavaScript Interview
  • Contacts Us
  • Advertise with Us
  • Complaint
  • Privacy Policy
  • Cookie Policy
  • Submit a Tip
  • 🔥
  • ReactJS
  • JavaScript
  • JavaScript Interview
  • React Interview
  • HTML
  • Frontend Interview
  • CSS
  • Redux
  • Javascript
  • System Design
Font ResizerAa
Code RevealsCode Reveals
  • My Saves
  • My Interests
  • My Feed
  • History
  • Technology
Search
  • Homepage
  • Pages
    • Home
    • Blog Index
    • Contact Us
    • Search Page
    • 404 Page
  • Features
    • Post Headers
    • Layout
  • Personalized
    • My Feed
    • My Saves
    • My Interests
    • History
  • About
  • Categories
    • Technology
  • Categories
Have an existing account? Sign In
Follow US
© 2022 Code Reveals Inc. All Rights Reserved.

Home Explain Deep Copy and Shallow Copy in JavaScript.

JavaScriptFrontend Interview

Explain Deep Copy and Shallow Copy in JavaScript.

Chief Editor
Last updated: May 6, 2025 5:08 am
Chief Editor
Share
SHARE

1. Shallow Copy

A shallow copy creates a new object with copies of the values of the original object’s properties.
If the properties are primitive values (like numbers, strings, booleans), they are copied as-is.
However, if a property is a reference to an object, only the reference is copied, not the actual object.
This means changes to the nested object in the copy will affect the original object.

Contents
1. Shallow Copy2. Deep CopyKey Differences Summary:When to Use Which?Final Example Showing the Difference:

Examples of Shallow Copy Methods:

  • Object.assign()
  • Spread operator { ...obj }
  • Array.prototype.slice()
  • Array.from()

Example:

const original = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};

// Shallow copy
const copy = { ...original };

copy.name = 'Mike'; // Changes only the copy
copy.address.city = 'Los Angeles'; // Changes the original too!

console.log(original.name); // 'John'
console.log(original.address.city); // 'Los Angeles'

Key Point:

  • Primitive values (like name) are copied by value.
  • Objects inside (like address) are copied by reference.

2. Deep Copy

A deep copy creates a new object along with recursively copying all nested objects.
No references to the original objects remain in the copied object.
Changes in the copy will not affect the original object.

Ways to Create a Deep Copy:

  • JSON.parse(JSON.stringify(object)) (Simple but has limitations)
  • Libraries like Lodash: _.cloneDeep(object)
  • Custom recursive function

Example:

const original = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};

// Deep copy using JSON methods
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.address.city = 'Los Angeles'; // Changes only the deep copy

console.log(original.address.city); // 'New York'

Limitations of JSON.parse(JSON.stringify()):

  • Does not handle functions, undefined, Symbol, Date, RegExp, etc. properly.
  • Works best for simple objects with JSON-compatible values.

Key Differences Summary:

AspectShallow CopyDeep Copy
Copies Primitive Values?YesYes
Copies Nested Objects?By ReferenceCreates New Copies
Changes in Copy Affect Original?Yes (For nested objects)No
Common MethodsObject.assign(), {...obj}, Array.slice()JSON.parse(JSON.stringify()), _.cloneDeep()
Handles Functions, Dates, etc.?YesJSON way: No (Use Lodash for robust deep copying)

When to Use Which?

Use CaseSuggested Copy Type
Simple Objects (No nested structure)Shallow Copy
Nested Objects / Complex ObjectsDeep Copy
Performance is Critical, No NestingShallow Copy
Ensuring Full Data SeparationDeep Copy

Final Example Showing the Difference:

const original = { name: 'Alice', info: { age: 25 } };

const shallow = { ...original };
const deep = JSON.parse(JSON.stringify(original));

// Modifying nested object in shallow copy
shallow.info.age = 30;

// Modifying nested object in deep copy
deep.info.age = 40;

console.log(original.info.age); // 30 (because shallow copy affected original)
console.log(shallow.info.age); // 30
console.log(deep.info.age); // 40 (deep copy is independent)
Share This Article
Email Copy Link Print
Previous Article What is a Closure in JavaScript?
Next Article Explain Call, Apply and Bind in JavaScript.
Leave a Comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Your Trusted Source for Accurate and Timely Updates!

Our commitment to accuracy, impartiality, and delivering breaking news as it happens has earned us the trust of a vast audience. Stay ahead with real-time updates on the latest events, trends.
FacebookLike
XFollow
InstagramFollow
YoutubeSubscribe
LinkedInFollow
QuoraFollow
- Advertisement -
Ad imageAd image

Popular Posts

How can you delay the dispatch in React?

To delay a dispatch in React, especially when using something like Redux or React state…

By Chief Editor

What is Virtual DOM in React?

Virtual DOM (VDOM): The Virtual DOM is a lightweight JavaScript object (a virtual representation of…

By Chief Editor

How to Improve the Performance of React Applications

React is a powerful library for building interactive user interfaces, but performance issues can arise…

By Chief Editor

You Might Also Like

What is Symentic HTML
Frontend InterviewHTML

What is Symentic HTML?

By Chief Editor
JavaScript

What is a Closure in JavaScript?

By Chief Editor
Frontend InterviewHTML

What is Block level Element and Inline Level Element?

By Chief Editor
JavaScriptJavaScript Interview

What is the this Keyword in JavaScript?

By Chief Editor

Code Reveals is a cutting-edge software development company dedicated to delivering high-quality, scalable, and innovative solutions for businesses of all sizes. Our team of expert developers, designers, and engineers specializes in creating custom software, web applications, mobile apps, and enterprise solutions that are tailored to meet the unique needs of our clients.

Most Famous
  • HTML
  • CSS
  • JavaScript
  • Node
Top Categories
  • Frontend Interview
  • Backend Interview
  • React Interview
  • JavaScript Interview
Usefull Links
  • Contacts Us
  • Advertise with Us
  • Complaint
  • Privacy Policy
  • Cookie Policy
  • Submit a Tip

©2025  Code Reveals Inc. All Rights Reserved.

Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?