En Javascript muchas veces, cuando estamos programando en JavaScript, es necesario copiar todo un objeto, ya sea porque necesitamos hacer modificaciones de sus valores pero conservando el objeto original, o porque no queremos enviar a alg\u00fan m\u00e9todo la referencia original.<\/p>\n\n\n\n
Para esto, hay dos maneras de copiar un objeto y son deep y shallow copy, que b\u00e1sicamente vienen a ser copia profunda y copia superficial.<\/p>\n\n\n\n
Cuando creamos una variable en JavaScript, estas simplemente son referencias en memoria a donde realmente se encuentran los valores:<\/p>\n\n\n\n
const v1 = {\nuno:1,\ndos:2\n}<\/code><\/pre>\n\n\n\nSi creamos otra variable de esta manera:<\/p>\n\n\n\n
const v2 = v1;<\/code><\/pre>\n\n\n\nLo que estamos haciendo es solo crear una referencia a donde se encuentran los datos de v1 en v2, por lo tanto si modificamos v2 de esta manera:<\/p>\n\n\n\n
v2.dos = 3;\nconsole.log(v1.dos); \/\/ 3\nconsole.log(v2.dos); \/\/ 3<\/code><\/pre>\n\n\n\nAhora tenemos el mismo valor en ambas variables por que no es una copia si no un apuntador o punteros como en el lenguaje C.<\/p>\n\n\n\n
Shallow copy<\/h2>\n\n\n\n
Es una copia superficial, porque copia los valores de un objeto, pero si este objeto tiene objetos hijos, es decir, objetos anidados, estos no se copian y solo se toman las referencias, por lo que quedamos a la mitad entre una copia de valores y asignaci\u00f3n por referencia.<\/p>\n\n\n\n
El siguiente ejemplo detalla muy bien mi punto:<\/p>\n\n\n\n
let original = { \n a: 1, \n b: { \n c: 2 \n } \n};\n\nlet shallowCopy = { ...original };\n\nconsole.log(original.b.c); \/\/ Output: 2\nconsole.log(shallowCopy.b.c); \/\/ Output: 2\n\n\/\/ Modificamos el objeto interno en la copia\nshallowCopy.b.c = 3;\n\nconsole.log(original.b.c); \/\/ Output: 3\nconsole.log(shallowCopy.b.c); \/\/ Output: 3<\/code><\/pre>\n\n\n\nComo se ve si hay una copia, pero el objeto intento c es un apuntador.<\/p>\n\n\n\n
Deep copy<\/h2>\n\n\n\n
Esto es una copia total de valores incluidos objetos hijos dentro del objeto padre y los hijos de los hijos, para ello se usa una funci\u00f3n que tal vez sea muy conocida por todos.<\/p>\n\n\n\n
Veamos un ejemplo:<\/p>\n\n\n\n
let original = { a: 1, b: { c: 3 } };\nlet deepCopy = JSON.parse(JSON.stringify(original));<\/code><\/pre>\n\n\n\nEn este ejemplo, se realizaron dos pasos: el primero es convertir el objeto a un string y despu\u00e9s, el string a objeto. Con este m\u00e9todo, se crea una copia de los valores y dos referencias en memoria, y en caso de que se cambie alg\u00fan valor, no afectar\u00e1 a ninguna variable.<\/p>\n\n\n\n
Consideraciones<\/h2>\n\n\n\n
Este m\u00e9todo tiene limitaciones, ya que s\u00f3lo funcionar\u00e1 con propiedades y valores que puedan ser representados en JSON. No funcionar\u00e1 con funciones, expresiones regulares, y otros tipos de valores no serializables. Adem\u00e1s, tampoco preserva la prototypical inheritance.<\/p>\n","protected":false},"excerpt":{"rendered":"
Deep Copy y Shallow Copy. Copiar objetos en javascript mediante esta dos t\u00e9cnicas y como funcionan cada una.<\/p>\n","protected":false},"author":1,"featured_media":504,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"everybody","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,20],"tags":[34],"class_list":["post-499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js","category-lenguajes-de-programacion","tag-javascript"],"jetpack_featured_media_url":"https:\/\/80bits.blog\/wp-content\/uploads\/2023\/06\/js.png","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":5,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/499\/revisions"}],"predecessor-version":[{"id":505,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/499\/revisions\/505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/media\/504"}],"wp:attachment":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/media?parent=499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/categories?post=499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/tags?post=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}