Artículo original escrito por Nishant Kumar
Artículo original JavaScript Destructuring and the Spread Operator – Explained with Example Code
Traducido y adaptado por Josue Custodio
JavaScript tiene dos estructuras de datos impresionantes que te ayudan a escribir código limpio y eficiente. Pero su manejo puede resultar complicado a veces.
En este blog, le mostraré cómo manejar la desestructuración en arreglos y objetos en JavaScript. También aprenderemos a usar el operador de propagación.
Vamos a sumergirnos.
¿Qué es la desestructuración de arreglos en JavaScript?
Digamos que tenemos un arreglo que contiene cinco números, como este:
let array1 = [1, 2, 3, 4, 5]Para obtener los elementos del arreglo, podemos hacer algo como obtener el número de acuerdo con sus índices:
array1[0];
array1[1];
array1[2];
array1[3];
array1[4];
Pero este método es antiguo y torpe, y hay una mejor manera de hacerlo: utilizando la desestructuración de arreglos. Se parece a esto:
let [ indexOne, indexTwo, indexThree, indexFour, indexFive ] = array1;Ambos métodos anteriores producirán el mismo resultado:
Ahora, tenemos cinco elementos en el arreglo y los imprimimos. Pero, ¿qué pasa si queremos omitir un elemento intermedio?
let [ indexOne, indexTwo, , indexFour, indexFive ] = arreglo1;Aquí, nos hemos saltado indexThird, y hay un espacio vacío entre indexTwo e indexFour.
let [ indexOne, indexTwo, , indexFour, indexFive ] = array1;
console.log(indexOne);
console.log(indexTwo)
console.log(indexFour)
console.log(indexFive)
Puede ver que no obtenemos el tercer elemento porque lo hemos configurado como vacío.
¿Qué es la Desestructuración de Objetos en JavaScript?
Esta desestructuración también funciona bien con objetos. Déjame darte un ejemplo.
let object = {
name: "Nishant",
age: 24,
salary: 200,
height: '20 meters',
weight: '70 KG'
}Digamos que queremos que el nombre (name), el salario (salary) y el peso (weight) de este objeto se impriman en la consola.
console.log(object.name)
console.log(object.salary)
console.log(object.weight)Podemos obtenerlos usando las claves, que son el nombre, el salario y el peso.
Pero este código a veces se vuelve difícil de entender. Ahí es cuando la desestructuración es útil:
let { name, salary, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)Y ahora, podemos simplemente registrar el nombre, el salario y el peso en lugar de usar ese método antiguo.
También podemos usar la desestructuración para establecer valores predeterminados si el valor no está presente en el objeto.
let object = {
name: "Nishant",
age: 24,
height: '20 meters',
weight: '70 KG'
}
let { name, salary, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)Aquí, tenemos nombre y el peso presentes en el objeto, pero no el salario:
Obtendremos un valor indefinido para el salario.
Para corregir ese problema, podemos establecer valores predeterminados cuando estamos desestructurando el objeto.
let object = {
name: "Nishant",
age: 24,
height: '20 meters',
weight: '70 KG'
}
let { name, salary = 200, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)
Puedes ver que obtenemos 200 como salario. Esto solo funciona cuando no tenemos esa clave en el objeto y queremos establecer un valor predeterminado.
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
let { name, salary = 200, weight } = object;
console.log(name)
console.log(salary)
console.log(weight)Agregue salario en el objeto y obtendrá 300 como salario.
Cómo utilizar la desestructuración de objetos con funciones
Digamos que tenemos una función que imprime todos los datos del arreglo en la consola.
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
function printData(){
}
printData(object)
Pasamos el objeto como parámetro en la función cuando se llama:
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
function printData(object){
console.log(object)
}
printData(object)Normalmente, haríamos algo como esto: pasar el objeto y registrarlo en la consola.
Pero, de nuevo, podemos hacer lo mismo utilizando la desestructuración.
let object = {
name: "Nishant",
age: 24,
salary: 300,
height: '20 meters',
weight: '70 KG'
}
function printData({name, age, salary, height, weight}){
console.log(name, age, salary, height, weight)
}
printData(object)Aquí, estamos desestructurando el objeto en nombre, edad, salario, altura y peso en los parámetros de la función e imprimimos todo en la misma línea.
Puede ver cómo la desestructuración hace que sea mucho más fácil de entender.
Veamos un último ejemplo.
function sample(a, b) {
return [a + b, a * b]
}
let example = sample(2, 5);
console.log(example)Aquí tenemos una función que acepta dos números. Devuelve un arreglo agregándolos y multiplicándolos y los registra en la consola.
Usemos la desestructuración aquí en su lugar.
Podemos desestructurarlo en variables de suma y multiplicación como esta:
let [addition, multiplication] = sample(2, 5);
console.log(addition)
console.log(multiplication)
Y en la salida, puede ver que obtenemos la suma y la multiplicación de ambos números.
¿Qué es el operador de propagación (Spread) en JavaScript?
Propagación significa esparcirse o expandirse. Y el operador de propagación en JavaScript se indica con tres puntos.
Este operador de propagación tiene muchos usos diferentes. Veámoslos uno por uno.
Ejemplos de operador de propagación
Digamos que tenemos dos arreglos y queremos fusionarlas.
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]
let array3 = array1.concat(array2);
console.log(array3)
Obtenemos la combinación de ambas arreglos, que son array1 y array2.
Pero hay una forma más sencilla de hacer esto:
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]
let array3 = [...array1, ...array2]
console.log(array3)En este caso, estamos usando el operador de propagación para fusionar ambos arreglos.
Y como puede ver, obtendremos el mismo resultado.
Imaginemos otro caso de uso en el que tenemos que insertar array1 entre los elementos de array2.
Por ejemplo, queremos insertar array2 entre el segundo y tercer elemento de array1.
¿Entonces cómo hacemos eso? Podemos hacer algo como esto:
let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, ...array1, 8, 9, 10]
console.log(array2);
Y puede ver, obtenemos los elementos array1 entre 7 y 8.
Ahora, fusionemos dos objetos usando el operador de propagación.
let object1 = {
firstName: "Nishant",
age: 24,
salary: 300,
}
let object2 = {
lastName: "Kumar",
height: '20 meters',
weight: '70 KG'
}Tenemos dos objetos aquí. Uno contiene nombre, edad y salario. El segundo contiene apellido, altura y peso.
Vamos a fusionarlos juntos.
let object1 = {
firstName: "Nishant",
age: 24,
salary: 300,
}
let object2 = {
lastName: "Kumar",
height: '20 meters',
weight: '70 KG'
}
let object3 = {...object1, ...object2}
console.log(object3);Ahora hemos combinado ambos objetos usando el operador de propagación y hemos registrado el valor en la consola.
Puedes ver que estamos obteniendo la combinación de ambos objetos
Por último, también podemos copiar un arreglo en otro utilizando el operador de propagación. Déjame mostrarte como funciona:
let array1 = [1, 2, 3, 4, 5]
let array2 = [...array1]
console.log(array2);Aquí, estamos copiando array1 en array2 usando el operador de propagación.
Estamos registrando array2 en la consola, y estamos obteniendo los elementos de array1.
Conclusión
¡Eso es todo amigos! En este artículo, aprendimos sobre la desestructuración de arreglos y objetos y el operador de propagación propagación.
También puedes ver mi video de Desestructuración de arreglos y objetos y el operador de propagación en Youtube (en ingles) si quieres complementar tu aprendizaje.
Feliz aprendizaje.