Posted on Sep 20 Cloning JS Object is pretty common task in our day-to-day life. Lets discuss techniques about it.PS. Use structuredClone for proper cloning as it's now available in native JS.Lets first discuss what actually is shallow cloning and deep cloning:Shallow cloning and deep cloning are two different approaches to copying objects in JavaScript, and they have distinct characteristics and use cases:Shallow Cloning:Shallow cloning creates a new object, but it only copies the top-level properties of the original object. If the properties of the original object are references to other objects, those references are shared between the original and cloned objects.Deep Cloning:Deep cloning creates a completely new object with all of its properties and nested properties duplicated. It ensures that no references are shared between the original and cloned objects, resulting in a fully independent copy.1. Object.assign()The Object.assign() method is a concise way to perform shallow cloning of JavaScript objects. It creates a new object and copies enumerable properties from the original object to the new one. However, be aware that if the properties in the original object are objects or arrays, they will be copied by reference.2. Spread Operator (ES6)The spread operator is another method for shallow cloning objects introduced in ES6. It provides a more modern and concise syntax for creating a shallow copy of an object.3. JSON.parse() and JSON.stringify()To create a deep clone of an object, you can use JSON.parse() and JSON.stringify(). This method serializes the original object to a JSON string and then parses it back into a new object. It's great for deep cloning but has limitations, such as not handling functions, symbols, or circular references.4. Structured CloneIn web worker environments, you can use the structuredClone method to clone objects. This method can handle more complex data types but is specific to web workers.Let's say you have an object with a function property:Now, let's try to clone this object using both methods: JSON.parse(JSON.stringify()) and structuredClone.As you can see, the function property is lost during the cloning process. JSON.stringify serializes the object to JSON, and JSON.parse creates a new object from the JSON representation. Functions are not valid JSON, so they are omitted.With structuredClone, the cloning process preserves the function property, and you can call it on the cloned object without any issues. This method is more powerful and versatile when working with complex objects that contain non-serializable properties.For shallow cloning, consider using the spread operator or Object.assign() for their simplicity.When deep cloning is required and your object doesn't contain functions, symbols, or circular references, opt for JSON.parse() and JSON.stringify().structuredClone method is your best bet as it is now natively available and also helps cloning Dates, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays.Follow me for more such content:LinkedIn: https://www.linkedin.com/in/shameeluddin/Github: https://github.com/Shameel123Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Pragya Sapkota - Sep 19 Programming with Shahan - Sep 18 ADITI ANAND - Sep 18 Ankur Magan - Sep 14 Once suspended, shameel will not be able to comment or publish posts until their suspension is removed. Once unsuspended, shameel will be able to comment and publish posts again. Once unpublished, all posts by shameel will become hidden and only accessible to themselves. If shameel is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Shameel Uddin. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag shameel: shameel consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging shameel will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.