Destructuring y Rest/Spread operators.

Destructuring de objetos en variables

La destructuración funciona tanto para arreglos como para objetos. Aquí tenemos un ejemplo para objetos utilizando el objeto Math incorporado en JavaScript.

Cuando tiene un objeto como Math, y desea extraer valores de este objeto en el ámbito que lo envuelve, por ejemplo, en lugar de usar Math.PI, sería mejor tener solo una constante llamada PI para contener el valor de Math.PI, lo cual es fácil porque puede tener una línea como esta para Math.PI y otra para E, si necesita lo mismo para E, y así sucesivamente.

// Normal way
const PI = Math.PI
const E = Math.E

console.log(PI,E)

Con la sintaxis de destructuración, estas líneas son equivalentes a esta sola línea. Destructura las propiedades del objeto de su derecha y las introduce en el ámbito actual. Esto es útil cuando necesita usar unas pocas propiedades de un objeto más grande.

// ES6 way
const {PI, E } = Math

console.log(PI,E)

Esto es útil cuando necesita usar algunas propiedades de un objeto más grande. Por ejemplo, aquí hay una línea para desestructurar solo el método readFile del módulo FS de NodeJS

const { readFile } = require('fs')
//  We can use the readFile method directly like this.
readFile

Destructuring en argumentos para variables locales

También podemos desestructurar agumentos pasados a funciones. Si el argulento que pasamos a una función es un objeto, podemos usar esta sintáxis en los parámetros de la función para las propiedades que usaremos y hacerlas variables locales de la función. Esto en general mejora la legibilidad dentro de las funciones. Revisa el siguiente ejemplo

const student = {
    name: "Buster",
    grades: [9,8,9,10],
    // Lots of other properties and method
}
const studentAverage = ({grades},{decimals = 2 } = {}) => { 
     let sum = grades.reduce((acc, grade) => acc + grade)
     return (sum/grades.length).toFixed(decimals)
    } 

console.log(studentAverage(student))
console.log(studentAverage(student, {decimals: 3}))

En el ejemplo tenemos la función studentAverage que espera un objeto como argumento y espera que ese objeto tenga la propiedad grades. Por lo que estamos desestructurando la propiedad y usándola clocalmente en la función. Además podemos darle valores por defecto. Si queremos que las posiciones decimales sean por defecto 2, lo hacemos de la forma anterior que además permite que el segundo parámetro sea completamente opcional.

Destructuring en arreglos

Si tienemos un arreglo de valores y queremos extraer estos valores en variables locales, podemos usar las posiciones de los elementos para desestructurar sus valores en variables locales, así:

// Double commas to skip the third argument
const [first, second,,last] = [1,2,3,4]
console.log(first,second,last)

Esto es útil cuando se combina con el operador ..., como en el siguiente ejemplo.

const [first,...restOfItems] = [1,2,3,4]
console.log(first)
console.log(restOfItems)

Al usar estos tres puntos (...), le pedimos a JavaScript que desestructura solo un elemento desde el array y luego cree un nuevo arreglo con el nombre restOfItems para contener el resto de los elementos después de eliminar el primero. Probemos eso. Primero aquí será 1 y restOfItems será una matriz de [2,3,4]. Esto es poderoso para dividir arreglos, y también es aún más poderoso cuando se trabaja con objetos para filtrar ciertas propiedades de un objeto. Aquí hay un ejemplo de eso.

const data = {
    prop1: 'abc',
    prop2: 'def',
    firstName: 'Bob',
    lastName: 'Esponja',
}

const { prop1, prop2, ...bob } = data

console.log(bob.firstName)
console.log(prop1,prop2)

Digamos que tenemos este objeto de datos, que tiene algunas propiedades temporales, y nos gustaría crear un nuevo objeto que tenga los mismos datos excepto temp1 y temp2. Podemos desestructurar prop1 y prop2, y luego usar el operador para obtener las propiedades restantes en un nuevo objeto llamado bob.

Al igual que los tres puntos de descanso, puede usar los tres puntos para expandir una matriz u objeto en una nueva matriz u objeto. Esto es útil para copiar arreglos y objetos. Puede distribuir los elementos de una matriz en una nueva matriz como este ejemplo.

const [first,...restOfItems] = [1,2,3,4]
const newArray = [...restOfItems]

La nueva matriz aquí será una copia de la matriz restOfItems que desestructuramos anteriormente. Y de manera similar, también puede distribuir los pares clave-valor de un objeto en un nuevo objeto, como este ejemplo.

const data = {
    prop1: 'abc',
    prop2: 'def',
    firstName: 'Bob',
    lastName: 'Esponja',
}

const { prop1, prop2, ...bob } = data
const newObject = {
    ...bob
}
console.log(newObject.lastName)

El nuevo objeto aquí será una copia del objeto persona.

Tenga en cuenta que estas copias también son copias superficiales. Todas las matrices o objetos anidados se compartirán entre estas copias. No olvides eso.