Todos sabemos que Javascript es un lenguaje de programación poderoso y modernos, aunque tenemos que aceptar que en muchas cosas no tiene lo patitos en fila. Hace cosas muy extrañas que tiene que conocer si quieres dedicarte de forma profesional a programar con él.
Una de estas cosas raras sucede a la hora de copiar objetos como matrices o array y objetos o maps. Cuando copiamos valores primitivos todo sucede normal, pero cuando realizamos copias de esos objetos realmente lo que hacemos es una relación, así que el cambio del operador asignado afecta al nuevo objeto creado a partir de él.
Es decir, imagina que tenemos un array de elementos, por ejemplo tenemos una matriz con todas la etiquetas que le asignamos a una fotografía de un post de nuestra aplicación. Si realizamos una copia de este elemento para asignarlo a otro post diferente que tendrá las mismas etiquetas y cambiamos una de las etiquetas del primer elemento, el segundo se verá afectado también.
Les parece si mejor vemos un ejemplo en código:
// Creamos el primer array al que llamaremos array1 let array1 = ["a", "b", "c"]; // realizamos una copia tradicional o superficial del array1 y lo asignamos a un nueva llamada array2 let array2 = array1; // Ahora modificaremos el array1 array1.shift(); // Esta funcion elimina el primer elemento del array1 // imprimamos ahora los 2 arrays console.log(array1); // esto devuelve ["b", "c"] console.log(array2); // esto tambien devuelve ["b", "c"]
Esto es lo curioso, a pesar de que la única variable que cambiamos fue el primer array (array1) el segundo array (array2) también se vio afectado. Esto puede generar muchos conflictos en nuestro código y hacer que nos rompamos la cabeza por horas intentando resolver este asunto.
Es para esto que existen los operadores SPREAD de Javascript moderno, con este operador podemos olvidarnos de estos problemas y trabajar los array y los objetos de la forma correcta para evitar las relaciones no deseadas que nos puede llegar a causar Javascript.
Uso del operador SPREAD
El operado Spread de Javascript se representa como tres puntos dentro de un objeto ( … ) seguido por el valor que queremos asignar al nuevo objeto. Gracias a este operador se genera un nuevo objeto que no va a depender en lo absoluto de su fuente, podemos comenzar a tratarlos como variables diferentes e independientes.
Veamos un ejemplo:
// Creamos el primer array al que llamaremos array1 let array1 = ["a", "b", "c"]; // realizamos una copia usando el operador SPREAD let array2 = [...array1]; // Ahora modificaremos el array1 array1.shift(); // Esta funcion elimina el primer elemento del array1 // imprimamos ahora los 2 arrays console.log(array1); // esto devuelve ["b", "c"] console.log(array2); // esto devuelve ["a", "b", "c"]
Como podemos ver, en esta ocasión el array2 mantiene su valor sin importar los cambios que se realicen en el array1. Así nos evitamos futuros dolores de cabeza.
El operador Spread también puede usarse para unir diferentes array u objetos en uno uso o asignar nuevos elementos a él. Para hacerlo solo tenemos se agregar los elementos colocándolos antes o después del valor asignado con los 3 puntos. Como siempre, creo que es mejor explicarlo con un ejemplo:
// Creamos el primer array al que llamaremos array1 let array1 = ["a", "b", "c"]; // Creamos el segundo array al que llamaremos array2 let array2 = ["d", "e", "f"]; // Creamos el tercer array que sera la suma de los 2 primeros let array3 = [...array1, ...array2, "g", "h", "i"];
El orden de los elementos del nuevo array va a depender del orden en que los pongamos en la asignación. Por ejemplo, podemos agregar el primer array (…array1) y luego agregar los nuevos valores primitivos ( ,»g», «h», «i»,) y por último agregar el segundo array (…array2). El resultado en el array3 serían las letras en ese orden.
Hay muchos otros casos en los que puedes usar el operador Spread, en funciones, en destructuración, etc, pero en este artículo lo dejaremos aquí por ahora, si te interesa conocer más sobre el uso extendido del operador SPREAD puede pedirlo en los comentarios y haré otros ejemplos prácticos para explicar todas sus funcionalidades-
Espero que te haya gustado, pero sobre todo espero que les haya servido este artículo. Si tienes alguna duda o comentario puede escribirlo abajo y lo más pronto posible estaré contestando. Un abrazo y hasta la próxima.
Seguir leyendo: