Friday, 18 Jul 2025
  • My Interests
  • My Saves
  • Try Intents
Subscribe
improve-logo improve-logo
  • Home
  • HTML
    What is Symentic HTML

    What is Symentic HTML?

    By Chief Editor

    What is a Meta Tag in HTML?

    By Chief Editor

    What is Block level Element and Inline Level Element?

    By Chief Editor

    Difference between HTML Tag and HTML Element in HTML?

    By Chief Editor

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

    By Chief Editor

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

    By Chief Editor
  • JavaScript

    What is memoization in JavaScript?

    By Chief Editor

    What is Callback Hell in JavaScript?

    By Chief Editor

    How to Reverse a String in JavaScript: Two Essential Methods

    By Chief Editor

    What is one-way data binding in React?

    By Chief Editor

    What are the Rest and Spread operators in JavaScript?

    By Chief Editor

    What is the Event Loop in JavaScript?

    By Chief Editor
  • Frontend Interview

    Difference Between position: relative and position: absolute in CSS

    By Chief Editor

    What are the Lexical Scope in JavaScript?

    By Chief Editor

    How to Reverse a String in JavaScript: Two Essential Methods

    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 is Symentic HTML?

    By Chief Editor
  • Backend Interview

    What are controlled and uncontrolled components in React?

    By Chief Editor

    Explain var let and const in JavaScript with Example.

    By Chief Editor

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

    By Chief Editor

    What is a Function Component in React?

    By Chief Editor

    What is Position in CSS?

    By Chief Editor

    What are the Lexical Scope in JavaScript?

    By Chief Editor
  • Nodejs
  • Frontend Interview
  • Backend Interview
  • React Interview
  • JavaScript Interview
  • Contacts Us
  • Advertise with Us
  • Complaint
  • Privacy Policy
  • Cookie Policy
  • Donate
  • 🔥
  • ReactJS
  • JavaScript
  • JavaScript Interview
  • React Interview
  • HTML
  • Frontend Interview
  • CSS
  • Redux
  • Javascript
  • System Design
Font ResizerAa
ImproveImprove
  • 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

Explain the uesReducer and useContext hooks in React

useReducer and useContext Hooks in React 1. useReducer Hook Purpose: The useReducer hook is an…

By Chief Editor

What is React Fiber and its importance in react?

React Fiber is the reimplementation of React's core reconciliation algorithm, introduced in React 16 (2017).It…

By Chief Editor

Difference between display none and visibility hidden in CSS?

The display: none; and visibility: hidden; properties in CSS both make elements invisible, but they…

By Chief Editor

You Might Also Like

JavaScriptJavaScript Interview

What is memoization in JavaScript?

By Chief Editor
JavaScript

Explain var let and const in JavaScript with Example.

By Chief Editor
Frontend InterviewHTML

What is Block level Element and Inline Level Element?

By Chief Editor
JavaScript

What is a Closure in JavaScript?

By Chief Editor
improve-logo

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
  • Donate

©2025  Code Reveals Inc. All Rights Reserved.

Welcome Back!

Sign in to your account

Username or Email Address
Password

Lost your password?