Copia/clona variables en JavaScript

Aprenderás a cómo copiar variables en JavaScript tanto por referencia como por valor

Cuando aterricé al mundo de la programación, una cosa que no asimilé instantáneamente fue la diferencia entre copiar por valor o por referencia.

En VB6, que fue con el lenguaje que comencé a programar se podía especificar cuando copiabas una variable si lo querías hacer por referencia (byRef) o por valor (byVal).

Lo que significa es que si quieres copiar una variable lo puedes hacer apuntando a su dirección en memoria (por referencia), o creando la variable nuevo y asignándole el valor de la cúal quieres copiar.

Variables o tipo de datos primitivos

Cuando copias datos primitivos, la copia siempre erá por valor, con lo que no tendrás daños colaterales al copiar datos primitivos en tu código.

Los datos primitivos son:

• undefinded
• null
• symbol; en otro artículo hablaré sobre este tipo de dato
• boolean
• number
• string

Arrays y objetos

Arrays

En el caso de los objetos y arrays, la copia siempre será por referencia. Te lo explico con un ejemplo:

  const uno:number[] = [1,2,3,4,5];
  let dos:number[]=uno;
  dos[1]=1;
  console.log(dos); //[1,1,3,4,5]
  console.log(uno); //[1,1,3,4,5]
  

Vemos que como la copia es por referencia también cambia el array llamado uno.

¿Cómo lo solucionamos? Spread operator al rescate.

Con la llegada de ECMAScript v6, se introdujo el spread operator, que además de copia de array o objetos también te permite la desestructuración, que es muy útil cuando la comprendes.

Pues lo dicho, con el spread operator se haría así:

  const uno:number[] = [1,2,3,4,5];
  let dos:number[]=[...uno];
  dos[1]=1;
  console.log(dos); //[1,1,3,4,5]
  console.log(uno); //[1,2,3,4,5]
  

Objetos

Con los objetos sería de forma muy similar:

  const biciUno:{marca:string, pais:string, url:string}={
    marca: 'Specialized',
    pais: 'USA',
    url: 'https://www.specialized.com/'
  }
  const biciSpecialized={...biciUno}; //AQUÍ TIENES AL SPREAD OPERATOR EN ACCIÓN 
  

No es oro todo lo que reluce

No todo iba a ser bueno con el spread operator, el problema que tiene es que como estamos haciendo una copia completa del elemento pues vamos a consumir más memoria.

El ejemplo que he puesto es un poco tonto, pero imagina que tuvieras un array MUY grande de objetos y sólo quisiera cambiar una propidad de cada objeto, al hacerlo con el spread operator harías una copia completa del array original.

Saludos,