Desestructuración de objetos JavaScript

Resumen: en este tutorial, aprenderá sobre la desestructuración de objetos JavaScript que asigna propiedades de un objeto a variables individuales.

Si desea aprender a desestructurar una matriz, puede consultar el tutorial de desestructuración de matrices.

Introducción a la asignación de desestructuración de objetos de JavaScript

Supongamos que tiene un objeto person con dos propiedades: firstName y lastName.

Code language: JavaScript (javascript)

Antes de ES6, cuando desea asignar propiedades del objeto person a variables, normalmente lo hace de la siguiente manera:

Code language: JavaScript (javascript)

ES6 introduce la sintaxis de desestructuración de objetos que proporciona una forma alternativa de asignar propiedades de un objeto a variables:

Code language: JavaScript (javascript)

En este ejemplo, las propiedades firstName y lastName se asignan a las variables fName y lName respectivamente.

En esta sintaxis:

Code language: JavaScript (javascript)

El identificador antes de los dos puntos (:) es la propiedad del objeto y el identificador después de los dos puntos es la variable.

Observe que el nombre de la propiedad siempre está a la izquierda, ya sea un literal de objeto o una sintaxis de desestructuración de objetos.

Si las variables tienen los mismos nombres que las propiedades del objeto, puede hacer que el código sea más conciso de la siguiente manera:

Code language: JavaScript (javascript)

En este ejemplo, declaramos dos variables firstName y lastName, y asignamos las propiedades del objeto person a las variables en la misma instrucción.

Es posible separar la declaración y la asignación. Sin embargo, debe rodear las variables entre paréntesis:

Si no utiliza los paréntesis, el motor JavaScript interpretará el lado izquierdo como un bloque y arrojará un error de sintaxis.

Cuando se asigna una propiedad que no existe a una variable mediante la desestructuración de objetos, la variable se establece en undefined. Por ejemplo:

Code language: JavaScript (javascript)

En este ejemplo, la propiedad middleName no existe en el objeto person, por lo tanto, la variable middleName es undefined.

Establecer valores predeterminados

Puede asignar un valor predeterminado a la variable cuando la propiedad de un objeto no existe. Por ejemplo:

Code language: JavaScript (javascript)

En este ejemplo, asignamos la cadena vacía a la variable middleName cuando el objeto person no tiene la propiedad middleName.

Además, asignamos la propiedad currentAge a la variable age con el valor predeterminado de 18.

Sin embargo, cuando el objeto person tiene la propiedad middleName, la asignación funciona como de costumbre:

Code language: JavaScript (javascript)

Desestructurar un objeto nulo

Una función puede devolver un objeto o nulo en algunas situaciones. Por ejemplo:

Code language: JavaScript (javascript)

Y utilizas la asignación de desestructuración de objetos:

Code language: JavaScript (javascript)

El código lanzará un TypeError:

Code language: JavaScript (javascript)

Para evitar esto, puede usar el operador OR (||) para sustituir el objeto null por un objeto vacío:

Code language: JavaScript (javascript)

Ahora, no se producirá ningún error. Y firstName y lastName serán undefined.

Desestructuración de objetos anidados

Suponiendo que tiene un objeto employee que tiene un objeto name como propiedad:

Code language: JavaScript (javascript)

La siguiente instrucción desestructura las propiedades del objeto name anidado en variables individuales:

Code language: JavaScript (javascript)

Es posible hacer asignación múltiple de una propiedad a múltiples variables:

Code language: JavaScript (javascript)

Argumentos de función de desestructuración

Supongamos que tiene una función que muestra el objeto person:

Code language: JavaScript (javascript)

Es posible desestructurar el argumento objeto pasado a la función de esta manera:

Code language: JavaScript (javascript)

Se ve menos detallado, especialmente cuando se utilizan muchas propiedades del objeto argumento. Esta técnica se usa a menudo en React.

Resumen

• La desestructuración de objetos asigna las propiedades de un objeto a variables con los mismos nombres de forma predeterminada.