{"id":148016,"date":"2018-10-22T04:46:52","date_gmt":"2018-10-22T04:46:52","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=148016"},"modified":"2018-10-22T04:50:55","modified_gmt":"2018-10-22T04:50:55","slug":"deep-clone-a-javascript-object","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/","title":{"rendered":"Cloning In Javascript Object"},"content":{"rendered":"<p><span style=\"width: 0px;overflow: hidden;line-height: 0\" class=\"mce_SELRES_start\">\ufeff<\/span>Cloning an object means assigning\/copying the values of a variable\u00a0(previously declared\u00a0and assigned) to a newly declared variable (assigned now). Copying objects in JavaScript can be a tricky part. You can perform a shallow copy, or deep copy, whereas\u00a0shallow copy is the default behavior in most of the cases.<\/p>\n<h2><strong>Shallow Copy<\/strong><\/h2>\n<p>In a shallow copy, values are cloned, and objects references are copied (not the objects themselves), so if you edit an object property in the original object, then it also gets modified in the copied object, since the referenced inner object is the same.<\/p>\n<p><strong>\u00a0 1)\u00a0 Object.assign()<\/strong><\/p>\n<pre class=\"brush:js\">\r\n\r\nconst original = {\r\n  name: 'Fiesta',\r\n  car: {\r\n    color: 'blue'\r\n  }\r\n}\r\nconst copied = Object.assign({}, original)\r\n\r\noriginal.name = 'Focus'\r\noriginal.car.color = 'yellow'\r\n\r\ncopied.name \/\/Fiesta\r\nconsole.log(copied); \r\ncopied.car.color \/\/yellow\r\n\r\n<\/pre>\n<p> <strong> 2) Using JSON Parse and JSON Stringify  <\/strong><\/p>\n<p>Here we are using the variable source value to clone it to a variable called as target. In here JSON.stringify will convert the source object to the string and then JSON.parse\u00a0use to convert it to target variable.<\/p>\n<pre class=\"brush:js\">\r\n\r\nlet source = {a:1, b:2, c:3};\r\nconst target = JSON.parse(JSON.stringify(source));\r\nconsole.log(target); \/\/ {a:1, b:2, c:3}\r\n\/\/ Check if clones it and not changing it\r\nsource.a = 'a';\r\nconsole.log(source); \/\/ {a: \"a\", b: 2, c: 3}\r\nconsole.log(target); \/\/ {a: 1, b: 2, c: 3}\r\n\r\n<\/pre>\n<p> <strong>\u00a0 3) Using Object Spread Operator <\/strong><br \/>\nThis feature is added in ES6\/ES2015 (ES stands for\u00a0<b>ECMAScript <\/b>) which provides a very convenient way to perform a shallow clone, equivalent to what\u00a0Object.assign()\u00a0does.<\/p>\n<pre class=\"brush:js\">let source = {a:1, b:2, c:3};\r\nconst copied = { ...source }\r\ncopied.a = 10;\r\nconsole.log(copied);\r\nconsole.log(source);\r\n\r\n<\/pre>\n<h2><strong class=\"markup--strong markup--p-strong\">Deep copy<\/strong><\/h2>\n<p>A deep copy will duplicate every object it encounters. The copy and the original object will not share anything, so it will be a copy of the original.<br \/>\n<strong class=\"markup--strong markup--p-strong\">\u00a0 1) Using iteration<\/strong><\/p>\n<p>This is one of the working solutions for deep cloning but not the best one as this will have to iterate each and every time you need to clone an object. This cloning is done using iteration of the variable and this works completely fine with the deep copy.<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"brush:js\">\r\n\r\nfunction iterationCopy(src) {\r\n  let target = {};\r\n  for (let prop in src) {\r\n    if (src.hasOwnProperty(prop)) {\r\n      target[prop] = src[prop];\r\n    }\r\n  }\r\n  return target;\r\n}\r\nconst source = {a:1, b:2, c:3};\r\nconst target = iterationCopy(source);\r\nconsole.log(target); \/\/ {a:1, b:2, c:3}\r\n\/\/ Check if clones it and not changing it\r\nsource.a = 10;\r\nconsole.log(source); \/\/ { a: 10, b: 2, c: 3 }\r\nconsole.log(target); \/\/ {a:1, b:2, c:3}\r\n\r\n<\/pre>\n<p>That\u2019s all for today on how to Deep Clone A Javascript Object in JavaScript, if you still have issues feel free to comment below<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ufeffCloning an object means assigning\/copying the values of a variable\u00a0(previously declared\u00a0and assigned) to a newly declared variable (assigned now). Copying objects in JavaScript can be a tricky part. You can perform a shallow copy, or deep copy, whereas\u00a0shallow copy is the default behavior in most of the cases. Shallow Copy In a shallow copy, values <a href=\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":225,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198],"tags":[7690,7691],"class_list":["post-148016","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-object","tag-object-clone"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cloning In Javascript Object - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cloning In Javascript Object - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"\ufeffCloning an object means assigning\/copying the values of a variable\u00a0(previously declared\u00a0and assigned) to a newly declared variable (assigned now). Copying objects in JavaScript can be a tricky part. You can perform a shallow copy, or deep copy, whereas\u00a0shallow copy is the default behavior in most of the cases. Shallow Copy In a shallow copy, values [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-22T04:46:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-22T04:50:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anant Negi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anant Negi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\"},\"author\":{\"name\":\"Anant Negi\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/0cc15fd2dc52701b5d9599e2d2495db9\"},\"headline\":\"Cloning In Javascript Object\",\"datePublished\":\"2018-10-22T04:46:52+00:00\",\"dateModified\":\"2018-10-22T04:50:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\"},\"wordCount\":289,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"object\",\"object clone\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\",\"url\":\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\",\"name\":\"Cloning In Javascript Object - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2018-10-22T04:46:52+00:00\",\"dateModified\":\"2018-10-22T04:50:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cloning In Javascript Object\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/0cc15fd2dc52701b5d9599e2d2495db9\",\"name\":\"Anant Negi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/df5d3b06dfdfe65852f190a5beaf4fbcfa9079ccb2ef54e42d3d3b2e84218c5b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/df5d3b06dfdfe65852f190a5beaf4fbcfa9079ccb2ef54e42d3d3b2e84218c5b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Anant Negi\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/anantnegi-oc198\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cloning In Javascript Object - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/","og_locale":"en_US","og_type":"article","og_title":"Cloning In Javascript Object - Webkul Blog","og_description":"\ufeffCloning an object means assigning\/copying the values of a variable\u00a0(previously declared\u00a0and assigned) to a newly declared variable (assigned now). Copying objects in JavaScript can be a tricky part. You can perform a shallow copy, or deep copy, whereas\u00a0shallow copy is the default behavior in most of the cases. Shallow Copy In a shallow copy, values [...]","og_url":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-10-22T04:46:52+00:00","article_modified_time":"2018-10-22T04:50:55+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Anant Negi","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Anant Negi","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/"},"author":{"name":"Anant Negi","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/0cc15fd2dc52701b5d9599e2d2495db9"},"headline":"Cloning In Javascript Object","datePublished":"2018-10-22T04:46:52+00:00","dateModified":"2018-10-22T04:50:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/"},"wordCount":289,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["object","object clone"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/","url":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/","name":"Cloning In Javascript Object - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2018-10-22T04:46:52+00:00","dateModified":"2018-10-22T04:50:55+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/deep-clone-a-javascript-object\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cloning In Javascript Object"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/0cc15fd2dc52701b5d9599e2d2495db9","name":"Anant Negi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/df5d3b06dfdfe65852f190a5beaf4fbcfa9079ccb2ef54e42d3d3b2e84218c5b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/df5d3b06dfdfe65852f190a5beaf4fbcfa9079ccb2ef54e42d3d3b2e84218c5b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Anant Negi"},"url":"https:\/\/webkul.com\/blog\/author\/anantnegi-oc198\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/148016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/225"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=148016"}],"version-history":[{"count":15,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/148016\/revisions"}],"predecessor-version":[{"id":148495,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/148016\/revisions\/148495"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=148016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=148016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=148016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}