javascript logo

StructuredClone: La solución para clonar objetos en JavaScript sin errores

javascriptreactclonar objetosrendimiento

Tomás Cuevas

/

Introducción

Cuando trabajas con objetos en JavaScript, a menudo necesitas clonarlos para realizar operaciones sin modificar el objeto original. Hay varias formas de clonar objetos en JavaScript, como el operador spread ({...object}), la asignación por objeto (Object.assign(object)) y la serialización/deserialización de JSON (JSON.stringify() y JSON.parse()).

Sin embargo, la función structuredClone() ofrece algunas ventajas significativas en comparación con estas otras formas de clonar objetos.

¿Qué es structuredClone?

La función structuredClone en JavaScript es una función que permite clonar objetos con sus propiedades y métodos. A diferencia de otras formas de clonar objetos, como la copia por referencia o la serialización/deserialización, structuredClone crea una copia profunda del objeto, lo que significa que todas las propiedades y métodos del objeto original se copian en el objeto clonado.

La función structuredClone es útil cuando necesitas crear una copia de un objeto complejo para realizar operaciones sin modificar el objeto original. Además, esta función puede clonar objetos que no pueden ser serializados mediante (JSON.stringify() o JSON.parse()), como objetos que contienen funciones.

¿Cuándo se debe utilizar structuredClone en lugar de otros métodos de clonación?

En la mayoría de los casos, utilizar el operador spread ({...object}) es suficiente para clonar objetos en JavaScript. Sin embargo, es importante tener en cuenta algunas limitaciones y desventajas. Por ejemplo, el operador spread no puede manejar correctamente objetos con referencias circulares. En tales casos, el clon resultante tendrá una copia superficial de la referencia en lugar de una nueva instancia.

Otro método común para clonar objetos en JavaScript es (Object.assign(object)). Sin embargo, este método también presenta la misma limitación de referencia circular. Además, no puede clonar objetos complejos que contienen referencias a otros objetos.

Si necesitas clonar objetos complejos que contienen objetos DOM, objetos RegExp o objetos de fecha, o si necesitas clonar objetos que contienen referencias a otros objetos, structuredClone es el método recomendado. A diferencia de las alternativas mencionadas anteriormente, structuredClone puede manejar objetos con propiedades no enumerables y objetos que contienen referencias circulares.