Cómo usar la desestructuración de objetos en JavaScript

La desestructuración de objetos es una característica de JavaScript útil para extraer propiedades de objetos y vincularlas a variables.

Lo que es mejor, la desestructuración de objetos puede extraer varias propiedades en una instrucción, puede acceder a propiedades de objetos anidados y puede establecer un valor predeterminado si la propiedad no existe.

En esta publicación, explicaré cómo usar la desestructuración de objetos en JavaScript.

1. La necesidad de desestructuración de objetos

Imagine que desea extraer algunas propiedades de un objeto. En un entorno anterior a ES2015, debería escribir el siguiente código:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

El valor de la propiedad hero.name se asigna a la variable name. De la misma manera, el valor hero.realName se asigna a realName.

Esta forma de acceder a las propiedades y asignarlas a variables requiere código repetitivo. Al escribir var name = hero.name, debe mencionar el enlace name 2 veces, y lo mismo para realName.

Aquí es donde la sintaxis de desestructuración de objetos es útil: puede leer una propiedad y asignar su valor a una variable sin duplicar el nombre de la propiedad. Más que eso, ¡puede leer varias propiedades del mismo objeto en una sola instrucción!

Refactoricemos el script anterior y apliquemos la desestructuración de objetos para acceder a las propiedades name y realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero es una asignación de desestructuración de objetos. Esta instrucción define las variables name y realName, luego les asigna los valores de propiedades hero.name y hero.realName correspondientes.

Comparación de los 2 enfoques para acceder a las propiedades del objeto:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

es visible que la desestructuración del objeto es más práctica porque ni los nombres de las propiedades ni la variable del objeto están duplicados.

2. Extracción de una propiedad

La sintaxis básica de la desestructuración de objetos es bastante simple:

const { identifier } = expression;

Donde identifier es el nombre de la propiedad a acceder y expression debe evaluarse a un objeto. Después de la desestructuración, la variable identifier contiene el valor de la propiedad.

Aquí está el código equivalente usando un accessor de propiedad:

const identifier = expression.identifier;

Probemos la desestructuración de objetos en la práctica:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

La instrucción const { name } = hero define la variable name y la inicializa con el valor de la propiedad hero.name.

3. Extracción de varias propiedades

Para desestructurar el objeto en varias propiedades, enumere tantas propiedades como desee agregando comas , en el medio:

const { identifier1, identifier2, ..., identifierN } = expression;

Donde identifier1,…, identifierN son nombres de propiedades a las que se debe acceder, y expression debe evaluarse a un objeto. Después de la desestructuración, las variables identifier1, …, identifierN contienen los valores de propiedades correspondientes.

Aquí está el código equivalente:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

Echemos un vistazo de nuevo al ejemplo de la primera sección, donde se extraen 2 propiedades:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero crea 2 variables name y realName asignadas con valores de las propiedades correspondientes hero.name y hero.realName.

4. Valores predeterminados

Si el objeto desestructurado no tiene la propiedad especificada en la asignación de desestructuración, la variable se asigna con undefined. Veamos cómo sucede.:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

Después de desestructurar la variable enemies es undefined porque la propiedad enemies no existe en el objeto hero.

Afortunadamente, puede establecer un valor predeterminado si la propiedad no existe en el objeto desestructurado. Aquí está la sintaxis básica:

const { identifier = defaultValue } = expression;

Donde identifier es el nombre de la propiedad a acceder y expression debe evaluarse a un objeto. Después de la desestructuración, la variable identifier contiene el valor de la propiedad o se le asigna defaultValue si la propiedad identifier no existe.

Aquí está el código equivalente:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

Cambiemos el ejemplo de código anterior y usemos la función valor predeterminado:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

Ahora, en lugar de ser undefined, la variable enemies por defecto es .

5. Alias

Si desea crear variables con nombres diferentes a los de las propiedades, puede usar la función de alias de desestructuración de objetos.

const { identifier: aliasIdentifier } = expression;

identifier es el nombre de la propiedad a acceder, aliasIdentifier es el nombre de la variable, y expression debe evaluarse como un objeto. Después de la desestructuración, la variable aliasIdentifier contiene el valor de la propiedad.

El código equivalente:

const aliasIdentifier = expression.identifier;

Este es un ejemplo de la característica alias de desestructuración de objetos:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

Mirando const { realName: secretName } = hero, el destucturado define una nueva variable secretName (variable alias), y le asigna el valor hero.realName.

6. Extracción de propiedades de objetos anidados

En los ejemplos anteriores, los objetos eran simples: las propiedades tienen tipos de datos primitivos (por ejemplo, cadenas).

A menudo, los objetos se pueden anidar en otros objetos. En otras palabras, algunas propiedades pueden contener objetos.

En tal caso, aún puede usar las propiedades de desestructuración de objetos y acceso desde deep. Aquí está la sintaxis básica:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp es el nombre de la propiedad que contiene un objeto anidado. identifier es el nombre de propiedad a acceder desde el objeto anidado. expression debe evaluar el objeto desestructurado.

Después de la desestructuración, la variable identifier contiene el valor de propiedad del objeto anidado.

La sintaxis anterior es equivalente a:

const identifier = expression.nestedObjectProp.identifier;

El nivel de anidamiento del que puede extraer propiedades es ilimitado. Si desea extraer propiedades de las profundidades, simplemente agregue más tirantes rizados anidados:

const { propA: { propB: { propC: { .... } } } } = object;

Por ejemplo, el objeto hero contiene un objeto anidado { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

El objeto desestructuring const { address: { city } } = hero le permite acceder a la propiedad city desde el objeto anidado.

7. Extracción de una propiedad de nombre dinámico

Puede extraer a variables propiedades con un nombre dinámico (el nombre de la propiedad se conoce en tiempo de ejecución):

const { : identifier } = expression;

propName la expresión debe evaluarse como un nombre de propiedad (generalmente una cadena), y identifier debe indicar el nombre de variable creado después de la desestructuración. El segundo expression debe evaluar el objeto que desea destruir.

Un código equivalente sin desestructuración de objetos:

const identifier = expression;

Veamos un ejemplo en el que prop contiene el nombre de la propiedad:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero es un objeto de desestructuración que asigna a la variable name el valor hero, donde prop es una variable que contiene el nombre de la propiedad.

8. Objeto Rest después de la desestructuración

La sintaxis rest es útil para recopilar las propiedades restantes después de la desestructuración:

const { identifier, ...rest } = expression;

Donde identifier es el nombre de la propiedad a acceder y expression debe evaluarse a un objeto.

Después de la desestructuración, la variable identifier contiene el valor de la propiedad. la variable rest es un objeto plano con las propiedades restantes.

Por ejemplo, vamos a extraer la propiedad name, pero mantener el resto de las propiedades:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

La desestructuración const { name, ...realHero } = hero extractos de la propiedad name.

Al mismo tiempo, las propiedades restantes (realName en este caso) se recopilan en la variable realHero: { realName: 'Bruce Wayne' }.

9. Casos de uso comunes

9.1 Enlazar propiedades a variables

Como se ha visto en muchos ejemplos anteriores, la desestructuración de objetos enlaza valores de propiedades a variables.

La desestructuración de objetos puede asignar valores a variables declaradas usando const, let y var. O incluso asignar a una variable ya existente.

Por ejemplo, te mostramos cómo desestructurar usando la instrucción let :

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

Cómo desestructurar usando la instrucción var :

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

Y cómo desestructurar una variable ya declarada:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

Me resulta satisfactorio combinar el ciclo for..of con la desestructuración de objetos para extraer la propiedad de inmediato:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 Desestructuración de parámetros de función

Generalmente, la desestructuración de objetos se puede colocar en cualquier lugar donde se realice una asignación.

Por ejemplo, puede destruir un objeto dentro de la lista de parámetros de una función:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) desestructura el parámetro de función, creando una variable name que contiene el valor de la propiedad name.

10. Resumen

La desestructuración de objetos es una potente función que le permite extraer propiedades de un objeto y vincular estos valores a variables.

Me gusta especialmente la desestructuración de objetos es la sintaxis concisa y la capacidad de extraer múltiples variables en una instrucción.

¡Espero que mi publicación te haya ayudado a ver lo útil que es la desestructuración de objetos!