Comprender desestructurar, los parámetros Rest y propagar sintaxis en JavaSript

La desestructuración de objetos permite crear nuevas variables usando una propiedad de objeto como el valor.

Considere este ejemplo, un objeto que representa una nota con id, title y date:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Tradicionalmente, si quería crear una nueva variable para cada propiedad, tendría que asignar cada variable individualmente, con muchas repeticiones:

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

Con la desestructuración de objetos, esto puede hacerse en una línea. Al rodear cada variable entre corchetes {}, JavaScript creará nuevas variables desde cada propiedad con el mismo nombre:

// Destructure properties into variables
const { id, title, date } = note

Ahora console.log() las nuevas variables:

console.log(id)
console.log(title)
console.log(date)

Obtendrá los valores originales de la propiedad como resultado:

Output
1
My first note
01/01/1970

La asignación predeterminada para la desestructuración de objetos crea nuevas variables con el mismo nombre que la propiedad del objeto. Si no desea que la nueva variable tenga el mismo nombre que el nombre de la propiedad, tendrá la opción de cambiar el nombre de la nueva variable usando dos puntos (:) para decidir un nuevo nombre, como se puede ver con noteId a continuación:

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

Registre la nueva variable noteId para la consola:

console.log(noteId)

Recibirá el siguiente resultado:

Output
1

También puede desestructurar valores de objetos anidados. Por ejemplo, actualice el objeto note para tener un objeto author anidado:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

Ahora puede desestructurar note, luego desestructurarla de nuevo para crear variables desde las propiedades author:

// Destructure nested properties
const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

A continuación, registre las nuevas variables firstName y lastName usando los literales de plantilla:

console.log(`${firstName} ${lastName}`)

Esto generará el siguiente resultado:

Output
Sherlock Holmes

Observe que en este ejemplo, aunque tiene acceso a los contenidos del objeto author, el objeto author en sí mismo no es accesible. Para acceder a un objeto y a sus valores anidados, tendría que declararlos por separado:

// Access object and nested values
const {
  author,
  author: { firstName, lastName },
} = note

console.log(author)

Este código dará como resultado el objeto author:

Output
{firstName: "Sherlock", lastName: "Holmes"}

Desestructurar un objeto no es solo útil para reducir la cantidad de código que tiene que escribir; también le permite orientar el acceso a las propiedades que necesita.

Finalmente, la desestructuración puede usarse para acceder a las propiedades de los valores primitivos del objeto. Por ejemplo, String es un objeto global para cadenas, y tiene una propiedad length:

const { length } = 'A string'

Esto encontrará la propiedad de longitud inherente de una cadena y la establecerá igual a la variable length. Registre length para ver si funciona:

console.log(length)

Verá el siguiente resultado:

Output
8

La cadena A string se convirtió específicamente en un objeto para recuperar la propiedad length.

La desestructuración de conjuntos le permite crear nuevas variables usando un elemento de una matriz como valor. Considere este ejemplo, una matriz con las diferentes partes de una fecha:

const date = ['1970', '12', '01']

Se garantiza que los conjuntos en JavaScript conserven su orden, de forma que en este caso, el primer índice siempre será un año, el segundo será el mes y así sucesivamente. Sabiendo esto, puede crear variables a partir de los elementos de la matriz:

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

Pero hacer esto manualmente puede ocupar mucho espacio en su código. Con la desestructuración de matrices, puede descomprimir los valores de la matriz para ordenarlos y asignarlos a sus propias variables, de esta forma:

// Destructure Array values into variables
const [year, month, day] = date

Ahora registre las nuevas variables:

console.log(year)
console.log(month)
console.log(day)

Verá el siguiente resultado:

Output
1970
12
01

Los valores pueden omitirse dejando la sintaxis de desestructuración en blanco entre comas:

// Skip the second item in the array
const [year, , day] = date

console.log(year)
console.log(day)

Al ejecutar esto obtendremos el valor de year y day:

Output
1970
01

Los conjuntos anidados pueden ser desestructurados también. Primero cree una matriz anidada:

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

Luego, desestructure esa matriz y registre las nuevas variables:

// Destructure nested items
const [one, two, [three, four], five] = nestedArray

console.log(one, two, three, four, five)

Recibirá el siguiente resultado:

Output
1 2 3 4 5

La sintaxis de desestructuración puede aplicarse para desestructurar los parámetros en una función. Para probar esto, desestructurará keys y values de Object.entries().

Primero, declare el objeto note:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Dado este objeto, podría listar los pares clave-valor desestructurando argumentos a medida que se pasan al método forEach():

// Using forEach
Object.entries(note).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

O podría conseguir lo mismo usando un bucle for:

// Using a for loop
for (let [key, value] of Object.entries(note)) {
  console.log(`${key}: ${value}`)
}

De cualquier forma, recibirá lo siguiente:

Output
id: 1
title: My first note
date: 01/01/1970

La desestructuración de objetos y la desestructuración de conjuntos pueden combinarse en una única asignación de desestructuración. También pueden usarse parámetros predeterminados con la desestructuración, como se ve en este ejemplo que establece la fecha predeterminada a new Date().

Primero, declare el objeto note:

const note = {
  title: 'My first note',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
  tags: ['personal', 'writing', 'investigations'],
}

Luego desestructure el objeto, a la vez que establece una nueva variable date con el predeterminado de new Date():

const {
  title,
  date = new Date(),
  author: { firstName },
  tags: [personalTag, writingTag],
} = note

console.log(date)

console.log(date) proporcionará un resultado similar al siguiente:

Output
Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

Como se muestra en esta sección, la sintaxis de asignación de desestructuración añade mucha flexibilidad a JavaScript y le permite escribir un código más conciso. En la siguiente sección, verá cómo propagar sintaxis puede usarse para expandir las estructuras de datos en sus entradas de datos constituyentes.

La propagación puede simplificar las tareas comunes con los conjuntos. Por ejemplo, digamos que tiene dos conjuntos y quiere combinarlos:

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

Originalmente, usaría concat() para concatenar los dos conjuntos:

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

Ahora también puede propagar para descomprimir las matrices en un nueva matriz:

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]

console.log(allTools)

Al ejecutar esto obtendrá lo siguiente:

Output
["hammer", "screwdriver", "wrench", "saw"]

Esto puede ser particularmente útil con la inmutabilidad. Por ejemplo, es posible que esté trabajando con una aplicación que tiene users guardados en una matriz de objetos:

// Array of users
const users = [
  { id: 1, name: 'Ben' },
  { id: 2, name: 'Leslie' },
]

Podría usar push para modificar la matriz existente y añadir un nuevo usuario, que será una opción mutable:

// A new user to be added
const newUser = { id: 3, name: 'Ron' }

users.push(newUser)

Pero esto cambia la matriz user, que quizá queramos conservar.

La propagación le permite crear una nueva matriz partir de una existente y añadir un nuevo elemento al final:

const updatedUsers = [...users, newUser]

console.log(users)
console.log(updatedUsers)

Ahora, la nueva matriz updatedUsers tiene el nuevo usuario, pero la matriz original users permanece sin cambios:

Output
[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}]

[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}
 {id: 3, name: "Ron"}]

Crear copias de datos en vez de cambiar los datos existentes puede ayudar a prevenir cambios inesperados. En JavaScript, cuando crea un objeto o matriz y lo asigna a otra variable, no está creando realmente un nuevo objeto, está pasando una referencia.

Tome este ejemplo, en el cual se crea una matriz y se asigna a otra variable:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Assign Array to another variable
const secondArray = originalArray

Eliminar el último elemento de la segunda matriz modificará el primero:

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Esto generará el siguiente resultado:

Output
["one", "two"]

La propagación le permite realizar una copia superficial de una matriz u objeto, lo que significa que cualquier propiedad de nivel superior se clonará, pero los objetos anidados se pasarán por referencia. Para conjuntos u objetos simples, una copia superficial puede ser todo lo que necesita.

Si escribe el mismo código de ejemplo pero copia la matriz con propagación, la matriz original no se modificará:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Use spread to make a shallow copy
const secondArray = [...originalArray]

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Lo siguiente se registrará en la consola:

Output
["one", "two", "three"]

La propagación también puede usarse para convertir un conjunto, o cualquier otro iterable, a una matriz.

Crear un nuevo conjunto y añadir algunas entradas:

// Create a set
const set = new Set()

set.add('octopus')
set.add('starfish')
set.add('whale')

A continuación, utilice el operador de propagación con set y registre los resultados:

// Convert Set to Array
const seaCreatures = [...set]

console.log(seaCreatures)

Esto dará el siguiente resultado:

Output
["octopus", "starfish", "whale"]

Esto puede ser útil para crear un conjunto desde una cadena:

const string = 'hello'

const stringArray = [...string]

console.log(stringArray)

Esto proporcionará una matriz con cada carácter como un elemento en la matriz:

Output
["h", "e", "l", "l", "o"]

Cuando se trabaja con objetos, la propagación puede usarse para copiar y actualizar objetos.

Originalmente, Object.assign() se usó para copiar un objeto:

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

El secondObject ahora será un clon del originalObject.

Esto se simplifica con la sintaxis de propagación; puede copiar superficialmente un objeto propagándolo a uno nuevo:

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject)

Esto dará como resultado lo siguiente:

Output
{enabled: true, darkMode: false}

Igual que con las matrices, esto solo creará una copia superficial y los objetos anidados seguirán pasándose por referencia.

Añadir o modificar propiedades sobre un objeto existente de forma inmutable se simplifica con la propagación. En este ejemplo, la propiedad isLoggedIn se añade al objeto user:

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

Esto dará el siguiente resultado:

Output
{id: 3, name: "Ron", isLoggedIn: true}

Algo importante a tener en cuenta a la hora de actualizar objetos mediante la propagación es que cualquier objeto anidado también se propagará. Por ejemplo, digamos que en el objeto user hay un objeto anidado organization:

const user = {
  id: 3,
  name: 'Ron',
  organization: {
    name: 'Parks & Recreation',
    city: 'Pawnee',
  },
}

Si intentase añadir un nuevo elemento a organization, sobrescribiría los campos existentes:

const updatedUser = { ...user, organization: { position: 'Director' } }

console.log(updatedUser)

Esto resultará en lo siguiente:

Output
id: 3
name: "Ron"
organization: {position: "Director"}

Si la mutabilidad no es un problema, el campo podría actualizarse directamente:

user.organization.position = 'Director'

Pero ya que estamos buscando una solución inmutable, podemos propagar el objeto interno para que conserve las propiedades existentes:

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

console.log(updatedUser)

Esto dará el siguiente resultado:

Output
id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

La propagación también puede usarse con argumentos en las invocaciones de funciones.

Como ejemplo, aquí hay una función multiply que toma tres parámetros y los multiplica:

// Create a function to multiply three items
function multiply(a, b, c) {
  return a * b * c
}

Normalmente, pasaría tres valores individualmente como argumentos a la invocación de función, de esta forma:

multiply(1, 2, 3)

El resultado sería el siguiente:

Output
6

Sin embargo, si todos los valores que desea pasar a la función ya existen en una matriz, la propagación de sintaxis le permite usar cada elemento en una matriz como argumento:

const numbers = [1, 2, 3]

multiply(...numbers)

Esto dará el mismo resultado:

Output
6

multiply.apply(null, [1, 2, 3])

Output
6

Ahora que ha visto cómo la propagación puede acortar su código, puede echar un vistazo a un uso diferente de la sintaxis ...: parámetros rest.