Spread operator
Spread operator (operador de propagación) nos permite crear una copia de un array existente. Podemos añadir elementos al final, combinar múltiples en arrays en uno solo, tambíen podemos pasar elementos de un arreglo como argumentos de una función.
// Copiar arrays
const frutas = ["Uvas", "Manzanas", "Peras"];
const copiaDeLasFrutas = [...frutas];
console.log(copiaDeLasFrutas); // ["Uvas", "Manzanas", "Peras"]
// Unir arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [...array1, ...array2];
console.log(array3); // [1, 2, 3, 4, 5, 6]
//Pasar elementos de un arreglo como argumentos de una función
const estudiante = ["Juanito", "Pérez"];
const saludarEstudiante = (nombre, apellido) => {
return `Hola, ${nombre} ${apellido}`
}
saludarEstudiante(...estudiante);
El spread operator también funciona con los objetos.
// Crear una copia del objeto y añadir una nueva propiedad
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }
// Pasar propiedades de un objeto a otro
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, b: 5 };
console.log(obj2); // { a: 1, b: 5, c: 3 }
.
Hook "useState"
¿Por qué usar el Spread Operator para hacer una copia del array y no el método push para modificar el array?Si se preguntan ¿Podríamos resolverlo usando el método push() en lugar del spread operator? La respuesta es sí, pero...
const [colaboradores, actualizarColaboradores] = useState([]);
const registrarColaborador = (colaborador) => {
colaboradores.push(colaborador);
actualizarColaboradores(colaboradores).
}
Pero debes tener en cuenta que en React (y en programación en general) se recomienda no modificar los array u objetos. En React no es una práctica recomendada, ya que React puede no detectar correctamente el cambio y no actualizará el componente de la manera que se espera.
