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

El autor seleccionó el COVID-19 Relief Fund para que reciba una donación como parte del programa Write for DOnations.

Introducción

Desde la Edición 2015 de la especificación ECMAScript, hay disponibles muchas nuevas funciones para el lenguaje JavaScript para trabajar con conjuntos y objetos. Algunas de las más notables que aprenderá en este artículo son desestructurar, parámetros rest y propagar sintaxis. Estas funciones ofrecen formas más directas de acceder a los miembros de una matriz o un objeto, y pueden hacer que trabajar con estas estructuras de datos sea más rápido y conciso.

Muchos otros lenguajes no tienen la sintaxis correspondiente para desestructurar, los parámetros rest y propagar, de forma que estas funciones pueden tener una curva de aprendizaje para los nuevos desarrolladores de JavaScript y para aquellos que provienen de otro lenguaje. En este artículo, aprenderá cómo desestructurar objetos y conjuntos, cómo usar el operador de propagación para descomprimir objetos y conjuntos y cómo usar los parámetros rest en las invocaciones de funciones.

Desestructurar

La asignación de desestructurar es una sintaxis que le permite asignar propiedades de objetos o elementos de una matriz como variables. Esto puede reducir enormemente las líneas de código necesarias para manipular datos en estas estructuras. Existen dos tipos de desestructuración: desestructurar objetos y desestructurar conjuntos.

Desestructurar objetos

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.

Desestructuración de conjuntos

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.

Propagación

Propagar sintaxis (...) es otra adición útil a JavaScript para trabajar con conjuntos, objetos e invocaciones de función. La propagación permite descomprimir o expandir objetos e iterables (como los conjuntos), lo que puede ser usado para realizar copias superficiales de estructura de datos para aumentar la facilidad de la manipulación de datos.

Propagación con conjuntos

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"]

Propagación con objetos

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"}

Propagación con invocaciones de función

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.

Parámetros rest

La última función que aprenderá en este artículo es la sintaxis parámetro rest. La sintaxis parece igual a medida que se propaga (...), pero tiene el efecto contrario. En vez de descomprimir una matriz u objeto en valores individuales, la sintaxis rest creará una matriz de un número indefinido de argumentos.

En la función restTest, por ejemplo, si queremos que args sea una matriz compuesta de un número indefinido de argumentos, podrías tener lo siguiente:

function restTest(...args) {
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

Todos los argumentos pasados a la función restTest están ahora disponibles en la matriz args:

Output
[1, 2, 3, 4, 5, 6]

La sintaxis rest puede usarse como el único parámetro o como el último parámetro en la lista. Si se utiliza como el único parámetro, recopilará todos los argumentos, pero si está al final de una lista, recopilará todos los argumentos que quedan, como se ve en este ejemplo:

function restTest(one, two, ...args) {
  console.log(one)
  console.log(two)
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

Esto tomará los dos primeros argumentos individualmente, y luego agrupará el resto en una matriz:

Output
1
2
[3, 4, 5, 6]

El código anterior, la variable arguments podría usarse para recopilar todos los argumentos pasados a través de una función:

function testArguments() {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

Esto nos dará el siguiente resultado:

[secondary_label Output]1
Arguments(3) ["how", "many", "arguments"]

Sin embargo, esto tiene algunas desventajas. Primero, la variable arguments no puede usarse con las funciones de flecha.

const testArguments = () => {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

Esto resultaría en un error:

Output
Uncaught ReferenceError: arguments is not defined

Adicionalmente, arguments no es una matriz verdadera y no puede usar métodos como map y filter sin convertirse primero a una matriz. También recogerá todos los argumentos pasados de solo el resto de los argumentos, como se ve en el ejemplo restTest(one, two, ...args).

Rest puede usarse cuando se desestructuran las matrices también:

const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']

console.log(firstTool)
console.log(rest)

Esto proporcionará lo siguiente:

Output
hammer
["screwdriver", "wrench"]

Rest también puede usarse cuando se desestructuran objetos:

const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }

console.log(isLoggedIn)
console.log(rest)

Proporcionar el siguiente resultado:

Output
true
{id: 1, name: "Ben"}

De esta forma, la sintaxis rest proporciona métodos eficientes para recopilar una cantidad indeterminada de elementos.

Conclusión

En este artículo, ha aprendido cómo desestructurar, propagar sintaxis y sobre los parámetros rest. En resumen:

• Desestructurar se usa para crear variables a partir de los elementos de una matriz o de propiedades de objetos.
• Propagar sintaxis se usa para descomprimir iterables como matrices, objetos e invocaciones de función.
• La sintaxis del parámetro rest creará una matriz a partir de un número indefinido de valores.

Desestructurar, parámetros rest y propagar sintaxis son funciones útiles en JavaScript que ayudan a mantener su código conciso y limpio.

Si desea ver la desestructuración en acción, eche un vistazo a Cómo personalizar componentes React con Props, que utiliza esta sintaxis para desestructurar datos y pasarlos a componentes front-end personalizados. Si desea aprender más sobre JavaScript, vuelva a nuestra página de la serie Cómo codificar en JavaScript.