Los objetos y arreglos en JavaScript nos permiten agrupar variables y valores en un solo lugar. Aunque esto es muy útil, hay momentos en los que queremos desempacar esta agrupación para acceder a una sola variable o a un solo valor. Por ello, en este post, te enseñaremos cómo funciona la desestructuración en JavaScript para que puedas dividir tus objetos en grupos más pequeños.
¿Qué es la desestructuración en JavaScript?
La desestructuración en JavaScript es una sintaxis o forma de escritura que nos permite extraer valores de un array o propiedades de un objeto en secciones más pequeñas. Esta desestructuración hace que podamos acceder a elementos específicos de un conjunto más grande por medio de distintas variables. Esto abre la posibilidad de pintar un único valor o conjunto de valores de las variables de un objeto, al igual que pintar determinadas propiedades de un valor de un array.
A continuación, te enseñamos cómo puedes usar la desestructuración en JavaScript para extraer o capturar las propiedades de un objeto.
Desestructurar objetos
Para ejemplificar cómo puedes desestructurar objetos en JavaScript, primero debemos tener un objeto en mente. Supongamos entonces que tenemos el objeto character, que tiene las propiedades name, kind y role, cada una con un valor determinado.
let character = {
name: ‘Aragorn’,
kind: ‘human’,
role: ‘King of humans’
}
Entonces, con la desestructuración de JavaScript podemos capturar una sola de estas propiedades en una nueva variable, fuera del objeto. Para ello, utilizamos cualquiera de las palabras clave de variables, luego encerramos la propiedad en las llaves { } y, finalmente, la igualamos al objeto del que proviene. A continuación, te mostramos exactamente cómo se escribe esto:
let {role} = character
Ten presente que la desestructuración sucede a la izquierda del operador aritmético de igual. Es decir, sucede dentro de las llaves de la variable. Ahora que hemos desestructurado la variable de su objeto, podemos acceder a ella de manera singular. Esto nos permite, por ejemplo, pintar el valor de esta variable únicamente. Para ello, utilizamos el comando console.log y pintamos el nombre de la nueva variable, como puedes ver en las siguientes líneas de código:
console.log (role)
// resultado pintado por pantalla: King of humans
También podemos capturar más de una propiedad de un elemento al separarlas por comas dentro de la desestructuración. A continuación, verás la forma en la que lo haríamos para las propiedades name y role:
let {name, role} = character;
Ahora, con estas variables desestructuradas podemos acceder a ellas para pintar un string:
console.log (‘${name} is ${role}’)
// resultado pintado por pantalla: ‘Aragorn is king of humans’
De este modo, podemos desestructurar las propiedades de un objeto y pasarlas a ser variables individuales.
Desestructurar arrays
Con la sintaxis de desestructuración en JavaScript también podemos desestructurar arrays para extraer las propiedades de cada uno de sus valores. Una de las propiedades básicas que podemos extraer en un array es el índice. Si no sabes qué es este concepto, te invitamos a leer nuestro post sobre cómo funciona el índice de un array en JavaScript para profundizar en él.
Para desestructurar un array en JavaScript debemos utilizar el método array.entries, del cual puedes aprender más en nuestro post llamado array.entries de JavaScript o en el post de la MDN sobre el tema. Entonces, supongamos que tenemos el siguiente array:
const arr = [1, 2, 3]
Usando el método arr.entries podemos desestructurar este array para acceder a su índice y pintar las parejas de este método:
const iteratorOfTheArr = arr.entries ( );
for (const [index, value] of iteratorOfTheArr ( )) {
console.log (index, value)
}
El resultado de estas líneas de código sería el siguiente:
0 1
1 2
2 3
La desestructuración en JavaScript puede encontrarse mucho más en relación a los objetos. Esto sucede porque este lenguaje de programación es muy rico en las posibilidades que nos da para nombrar propiedades y valores en un objeto. De manera general, cuando tenemos que estructurar datos, utilizamos los objetos. Por ello, serán los elementos que más se beneficien de la actividad de desestructurar. Por su parte, un array funciona más para acumular elementos.
Ahora que sabes cómo funciona la desestructuración en JavaScript, te invitamos a seguir aprendiendo con nosotros sobre las posibilidades de este lenguaje de programación en nuestro Desarrollo Web Full Stack Bootcamp. Este curso consiste en una formación íntegra e intensiva de alta calidad en la que, entre muchas otras cosas, aprenderás a dominar lenguajes de programación para la web como JavaScript, CSS y HTML. Así, al cabo de unos pocos meses, te convertirás en un experto del desarrollo web. ¿A qué esperas para inscribirte? ¡Hazlo ya!
