Rubén Tejera Cordero

Como vimos en otro post, Paso por Valor Paso por Referencia, los elementos que no son tipos primitivos, al igualarlos a otros, se pasa la referencia.

var persona1 = {nombre:"Ruben",edad:25};
var persona2 = {nombre:"Ale",edad:20};
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona1 = persona2;
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona1.nombre = "Pepe";
console.log("Persona1:",persona1,"\nPersona2:",persona2);

 

¿Entonces como hacemos para copiar solamente el valor de un Objecto a otro en Javascript?

Método 1:

var persona1 = {nombre:"Ruben",edad:25};
var persona2 = {nombre:"Ale",edad:20};
console.log("Persona1:",persona1,"\nPersona2:",persona2);

//persona1 = Object.assign({}, persona2); //Copia tal cual el objeto
persona1 = Object.assign({}, persona2, { nombre:"Juan", edad: 40, pelo:"castaño" }); //Copio el objeto y le pongo propiedades personalizadas
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona1.nombre = "Pepe";
console.log("Persona1:",persona1,"\nPersona2:",persona2);

 

Método 2:

var persona1 = {nombre:"Ruben",edad:25};
var persona2 = {nombre:"Ale",edad:20};
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona1 = {...persona2};
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona1.nombre = "Pepe";
console.log("Persona1:",persona1,"\nPersona2:",persona2);

***Solo para el nivel 1 de copia profunda.

 

Objetos mas complejos (Objetos dentro de Objetos):

var redessociales = {facebook:{
                                cuentapersonal:"ruben@facebook.com",
                                cuentaprofesional:"rubenpro@facebook.com"},
                     instagram:"@ruben"}

var persona1 = {nombre:"Ruben",edad:25};

var persona2 = {nombre:"Ale",
                edad:20,
                social:redessociales,
                getEdad:function(){
                      return this.edad;}
                };
console.log("Persona1:",persona1,"\nPersona2:",persona2);

//persona1 = {...persona2}; //Cualquiera de los dos casos
persona1 = Object.assign({},persona2);
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona2.social.facebook.cuentapersonal = "NUEVACUENTA";
console.log("Persona1:",persona1,"\nPersona2:",persona2);

¿Que ha pasado con el objeto redes sociales dentro del objeto Persona1?

¿Un objeto dentro de otro objeto?

Ha cambiado al cambiar Persona2 … Nos ha copiado la referencia!! No nos vale!

 

Método 3:

var redessociales = {facebook:{
                                cuentapersonal:"ruben@facebook.com",
                                cuentaprofesional:"rubenpro@facebook.com"},
                     instagram:"@ruben"}

var persona1 = {nombre:"Ruben",edad:25};

var persona2 = {nombre:"Ale",
                edad:20,
                social:redessociales,
                getEdad:function(){
                      return this.edad;}
                };
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona1 = JSON.parse(JSON.stringify(persona2));
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona2.social.facebook.cuentapersonal = "NUEVACUENTA";
console.log("Persona1:",persona1,"\nPersona2:",persona2);

Perfecto… ya nos copia el valor del objeto redessociales dentro de un nuevo objeto y son independientes uno de otro ….

pero…. ¿la función getEdad() donde esta en Persona1?

JSON.parse y JSON.stringify no copia las funciones…. Tampoco nos vale!!!

 

Método 4: Función Recursiva

function deepClone(object){
    var clone = {};
    for ( var key in object){
        var value = object[key];
        if(typeof(value) != 'object'){
            clone[key] = value;
        }
        else{
            clone[key] = deepClone(value);
        }
    }
    return clone;
}

var redessociales = {facebook:{
                                cuentapersonal:"ruben@facebook.com",
                                cuentaprofesional:"rubenpro@facebook.com"},
                     instagram:"@ruben"}

var persona1 = {nombre:"Ruben",edad:25};

var persona2 = {nombre:"Ale",
                edad:20,
                social:redessociales,
                getEdad:function(){
                      return this.edad;}
                };
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona1 = deepClone(persona2);
console.log("Persona1:",persona1,"\nPersona2:",persona2);

persona2.social.facebook.cuentapersonal = "NUEVACUENTA";
console.log("Persona1:",persona1,"\nPersona2:",persona2);

 

 

Ahora si  hemos conseguido lo que buscabamos, crear un objecto totalmente independiente al otro.

 

**Recordamos: ¿Que es un Objeto en Javascript? Un objecto es un conjunto de pares clave/valor. En otros lenguajes lo llamaras diccionario, hash o array asociativo.

 

Explicación Clonado de Objecto de Carlos Blé:

 

Como vimos en otro post, Paso por Valor Paso por Referencia, los elementos que no son tipos primitivos, al igualarlos a otros, se pasa la referencia.

var equipo1 = ["a","b","c"];
var equipo2 = ["d","e","f"];
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1 = equipo2;
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1[0] = "X";
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

¿Entonces como hacemos para copiar solamente el valor de un Array a otro en Javascript?

Método 1: Slice()

var equipo1 = ["a","b","c"];
var equipo2 = ["d","e","f"];
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1 = equipo2.slice();
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1[0] = "X";
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

Método 2: Creando un nuevo array y concatenando el viejo en el.

var equipo1 = ["a","b","c"];
var equipo2 = ["d","e","f"];
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1 = [].concat(equipo2);
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1[0] = "X";
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

Método 3: La nueva forma de ES6 con el operador Spread:

var equipo1 = ["a","b","c"];
var equipo2 = ["d","e","f"];
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1 = [...equipo2];
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1[0] = "X";
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

Método 4: Con Array.from:

var equipo1 = ["a","b","c"];
var equipo2 = ["d","e","f"];
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1 = Array.from(equipo2);
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1[0] = "X";
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

 

En Javascript si igualamos una variable a un tipo primitivo, se copia el valor, pero si no es un primitivo, copiamos la referencia del valor.

¿Y que pasa si copiamos la referencia en vez del valor? Que ambos objetos apuntan al mismo sitio, y si modificamos uno, el otro tambien se vera afectado.

 

Ejemplo con primitivos:

var persona1 = "Ruben";
var persona2 = "Ale";
console.log("Persona 1:",persona1,"\nPersona2:",persona2);

persona1 = persona2;
console.log("Persona 1:",persona1,"\nPersona2:",persona2);


persona1 = "Pepe";
console.log("Persona 1:",persona1,"\nPersona2:",persona2);

Vemos que en el segundo paso igualamos persona1 a persona2 y en el tercer paso asignamos a persona1 el valor de Pepe.  ¿Que le pasa al persona2? No se modifica…. lo que por lógica esperamos que pase.

 

Ejemplo con tipos no primitivos:

var equipo1 = ["a","b","c"];
var equipo2 = ["d","e","f"];
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1 = equipo2;
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

equipo1[0] = "X";
console.log("Equipo1:",equipo1,"\nEquipo2:",equipo2);

¿Que ha pasado? …Hacemos lo mismo que antes, pero ahora se modifican ambos arrays…. ¿por qué?…¡Porque se nos ha copiado la referencia no el valor!

Es un conjunto de pares clave/valor. En otros lenguajes lo llamaras diccionario, hash o array asociativo. Puedes usar cualquier numero de claves con un nombre dado, siempre que sea un string, y cada string estara asociado con un valor. Estos valores pueden ser de cualquier tipo, tanto primitivos como functions u otros objetos.

 

Algo importante sobre los objetos es que, si bien los primitivos se pasan por valor, los objetos se pasan por referencia.

 

Primitivos se pasan por valor. Si copiamos una variable primitiva dentro de otra, copiamos el valor solamente, no están unidas por ningún sitio. Podemos cambiar ambas independientemente de la otra.

 

Objetos se pasan por referencia. No estamos copiando el objeto, sigue habiendo un solo objeto, lo que estamos copiando es la referencia, el puntero, el cursor… Si modificamos uno, el otro también lo hará.