Monday, 4 Aug 2025
  • My Interests
  • My Saves
  • Try Intents
Subscribe
Focus - Code Reveals
  • Home
  • HTML

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

    By Chief Editor

    What are the different types of HTML tags?

    By Chief Editor
    What is Symentic HTML

    What is Symentic HTML?

    By Chief Editor

    What is a Meta Tag in HTML?

    By Chief Editor

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

    By Chief Editor

    What is Doctype HTML in HTML?

    By Chief Editor
  • JavaScript

    What is memoization in JavaScript?

    By Chief Editor

    What are the map, filter, and reduce methods in JavaScript?

    By Chief Editor

    What is the Event Loop in JavaScript?

    By Chief Editor

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

    By Chief Editor

    What is Arrow and Normal Function in JavaScript?

    By Chief Editor

    What are the Rest and Spread operators in JavaScript?

    By Chief Editor
  • Frontend Interview

    How to Reverse a String in JavaScript: Two Essential Methods

    By Chief Editor

    What is Symentic HTML?

    By Chief Editor

    What is Block level Element and Inline Level Element?

    By Chief Editor

    Explain Deep Copy and Shallow Copy in JavaScript.

    By Chief Editor

    Is JavaScript a synchronous or asynchronous language?

    By Chief Editor

    What are the Lexical Scope in JavaScript?

    By Chief Editor
  • Backend Interview

    What is a Function Component in React?

    By Chief Editor

    What are the map, filter, and reduce methods in JavaScript?

    By Chief Editor

    What are controlled and uncontrolled components in React?

    By Chief Editor

    What are the Lexical Scope in JavaScript?

    By Chief Editor

    What are the Rest and Spread operators in JavaScript?

    By Chief Editor

    What is Arrow and Normal Function in JavaScript?

    By Chief Editor
  • Nodejs
  • JavaScript Interview
  • React Interview
  • Frontend Interview
  • Backend Interview
  • Contact Us
  • Advertise with Us
  • Complaint
  • Cookies Policy
  • Privacy Policy
  • Donate
  • 🔥
  • ReactJS
  • JavaScript
  • JavaScript Interview
  • React Interview
  • HTML
  • Frontend Interview
  • CSS
  • Redux
  • Javascript
  • System Design
Font ResizerAa
Focus - Code RevealsFocus - Code Reveals
  • My Saves
  • My Interests
  • My Feed
  • History
  • Technology
Search
  • Homepage
  • ReactJS
  • JavaScript
  • JavaScript Interview
  • HTML
  • CSS
  • Backend Interview
Have an existing account? Sign In
Follow US
© 2022 Code Reveals Inc. All Rights Reserved.
Home Blog Explain Deep Copy and Shallow Copy in JavaScript.
Frontend InterviewJavaScript

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

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

What are the async and defer Attributes in the <script> Tag? When loading JavaScript in…

By Chief Editor

What is the this Keyword in JavaScript?

The this keyword in JavaScript refers to the object that is executing the current function.…

By Chief Editor

What are controlled and uncontrolled components in React?

When working with form inputs in React, you will often hear the terms Controlled Components…

By Chief Editor

You Might Also Like

JavaScriptJavaScript Interview

What is Callback Hell in JavaScript?

By Chief Editor
JavaScriptJavaScript Interview

What are the Rest and Spread operators in JavaScript?

By Chief Editor
JavaScriptJavaScript Interview

What are the map, filter, and reduce methods in JavaScript?

By Chief Editor
JavaScriptJavaScript Interview

What is Scope in JavaScript?

By Chief Editor

Focus by CodeReveals is your dedicated platform for mastering tech interviews and advancing your development skills. Whether you’re aiming to become a Frontend Developer, Backend Developer, or simply preparing for your next big interview, we’re here to guide you every step of the way.

Our mission is to help aspiring developers gain real-world knowledge, build confidence, and succeed in technical interviews. We offer structured content, curated interview questions, coding challenges, and practical guidance — all designed by experienced professionals who understand what top tech companies are looking for.

At Improve, we don’t just teach — we prepare you to think like a developer, solve like an engineer, and present like a pro.

Join us and start improving today — because your dream tech job is within reach

Most Famous
  • HTML
  • CSS
  • JavaScript
  • NodeJS
Top Categories
  • JavaScript Interview
  • React Interview
  • Frontend Interview
  • Backend Interview
Usefull Links
  • Contact Us
  • Advertise with Us
  • Complaint
  • Cookies Policy
  • Privacy Policy
  • Donate

©2025  Code Reveals Inc. All Rights Reserved.

Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?