¿Qué es copia superficial y copia profunda en JavaScript?

JavaScript es un lenguaje de secuencias de comandos del lado del cliente de tipo dinámico de alto nivel. JavaScript agrega funcionalidad a las páginas HTML estáticas. Como la mayoría de los otros lenguajes de programación, JavaScript admite el concepto de copia profunda y copia superficial. 

Copia superficial: cuando una variable de referencia se copia en una nueva variable de referencia mediante el operador de asignación, se crea una copia superficial del objeto al que se hace referencia. En palabras simples, una variable de referencia almacena principalmente la dirección del objeto al que se refiere. Cuando a una nueva variable de referencia se le asigna el valor de la antigua variable de referencia, la dirección almacenada en la antigua variable de referencia se copia en la nueva. Esto significa que tanto la variable de referencia antigua como la nueva apuntan al mismo objeto en la memoria. Como resultado, si el estado del objeto cambia a través de cualquiera de las variables de referencia, se refleja para ambas. Pongamos un ejemplo para entenderlo mejor.

Implementación de código

var employee = {
    eid: "E102",
    ename: "Jack",
    eaddress: "New York",
    salary: 50000
}
 
 
console.log("Employee=> ", employee);
var newEmployee = employee;    // Shallow copy
console.log("New Employee=> ", newEmployee);
 
console.log("---------After modification----------");
newEmployee.ename = "Beck";
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);
// Name of the employee as well as
// newEmployee is changed.

Producción:

Explicación: Del ejemplo anterior, se ve que cuando se modifica el nombre de newEmployee, también se refleja para el antiguo objeto de empleado. Esto puede causar inconsistencia en los datos. Esto se conoce como copia superficial. El objeto recién creado tiene la misma dirección de memoria que el anterior. Por lo tanto, cualquier cambio realizado en cualquiera de ellos cambia los atributos de ambos. Para superar este problema, se utiliza la copia profunda. Si uno de ellos se borra de la memoria, el otro deja de existir. En cierto modo, los dos objetos son interdependientes.

Copia profunda: a diferencia de la copia superficial, la copia profunda hace una copia de todos los miembros del objeto anterior, asigna una ubicación de memoria separada para el nuevo objeto y luego asigna los miembros copiados al nuevo objeto. De esta forma, ambos objetos son independientes entre sí y, en caso de que se produzca alguna modificación en uno de ellos, el otro no se ve afectado. Además, si uno de los objetos se elimina, el otro aún permanece en la memoria. Ahora, para crear una copia profunda de un objeto en JavaScript, usamos los métodos JSON.parse() y JSON.stringify(). Pongamos un ejemplo para entenderlo mejor.

Implementación de código:

var employee = {
    eid: "E102",
    ename: "Jack",
    eaddress: "New York",
    salary: 50000
}
console.log("=========Deep Copy========");
var newEmployee = JSON.parse(JSON.stringify(employee));
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);
console.log("---------After modification---------");
newEmployee.ename = "Beck";
newEmployee.salary = 70000;
console.log("Employee=> ", employee);
console.log("New Employee=> ", newEmployee);

Producción:

Explicación: Aquí, el nuevo objeto se crea utilizando los métodos JSON.parse() y JSON.stringify() de JavaScript. JSON.stringify() toma un objeto JavaScript como argumento y luego lo transforma en una string JSON. Esta string JSON se pasa al método JSON.parse() que luego la transforma en un objeto JavaScript. Este método es útil cuando el objeto es pequeño y tiene propiedades serializables. Pero si el objeto es muy grande y contiene ciertas propiedades no serializables, existe el riesgo de pérdida de datos. Especialmente si un objeto contiene métodos, entonces JSON.stringify() fallará ya que los métodos no son serializables. Hay mejores formas de clonar en profundidad, de las cuales una es Lodash, que también permite métodos de clonación.

Lodash To Deep Copy: Lodash es una biblioteca JavaScript que proporciona múltiples funciones de utilidad y una de las funciones más utilizadas de la biblioteca Lodash es el método cloneDeep(). Este método ayuda en la clonación profunda de un objeto y también clona las propiedades no serializables que eran una limitación en el enfoque JSON.stringify().

Implementación de código

const lodash = require('lodash');
var employee = {
    eid: "E102",
    ename: "Jack",
    eaddress: "New York",
    salary: 50000,
    details: function () {
        return "Employee Name: "
            + this.ename + "-->Salary: "
            + this.salary;
    }
}
 
var deepCopy = lodash.cloneDeep(employee);
console.log("Original Employee Object");
console.log(employee);
console.log("Deep Copied Employee Object");
console.log(deepCopy);
deepCopy.eid = "E103";
deepCopy.ename = "Beck";
deepCopy.details = function () {
    return "Employee ID: " + this.eid
        + "-->Salary: " + this.salary;
}
console.log("----------After Modification----------");
console.log("Original Employee Object");
console.log(employee);
console.log("Deep Copied Employee Object");
console.log(deepCopy);
console.log(employee.details());
console.log(deepCopy.details());

Producción:

Explicación: Ambos objetos tienen propiedades diferentes después de la modificación. Además, los métodos de cada objeto se definen de manera diferente y producen resultados diferentes.

mejor manera de copiar en profundidad en javascript

https://www.geeksforgeeks.org/how-to-deep-clone-in-javascript/