ES6 o ES2015 ha llegado para quedarse, este nuevo estándar trae muchas novedades, y muchas de ellas pensando en escribir menos código y que este sea más conciso.
Hoy vamos a hablar de la desestructuración, un nuevo concepto que nos brinda ES6 y que tiene muchas posibilidades.
Para aquellos que no estéis familiarizados con esta nueva sintaxis, hemos de deciros que no funciona al 100% en todos los navegadores, pero gracias a compiladores como Babel podréis escribir código en ES6 y dejar que este compilador lo transforme a ES5 permitiendo que la mayor parte de navegadores puedan interpretarlo.
Desestructuración de Arrays
Para entender mejor como nos ayuda este nuevo concepto, vamos a mostrar un ejemplo de como hemos resuelto este problema hasta ahora:
|
1 2 3 4 5 6 7 8 9 |
var myArray = [1, 2, 3, 4] var first = myArray[0]; var second = myArray[1]; var third = myArray[2]; var fourth = myArray[3]; console.log(first, second, third, fourth); // 1 2 3 4 |
Este ejemplo nos muestra como para poder crear un conjunto de variables que almacenen los valores de un array, debemos crear las variables y acceder a la correspondiente posición del mismo.
Aplicando la desestructuración de Arrays tendríamos el siguiente código:
|
1 2 3 4 5 |
const myArray = [1, 2, 3, 4]; let [first, second, third, fourth] = myArray; console.log(first, second, third, fourth); // 1 2 3 4 |
En primer lugar indicaremos que hemos utilizado los tipos de variables const y let, si no estás familiarizado con ellas puedes ver su documentación o sustituirlos por var.
Como podéis observar en el ejemplo, en una sola línea hemos logrado hacer la creación y asignación de los valores del array a nuevas variables.
Os preguntaréis que hubiese ocurrido si quisiésemos tan solo almacenar en variables el primer y tercer valor. Para salvar este caso y otros, existe un mecanismo que consiste en introducir comas omitiendo el valor que ocupa dicha posición, por ejemplo:
|
1 2 3 4 5 |
const myArray = [1, 2, 3, 4]; let [first, , third] = myArray; console.log(first, third); // 1 3 |
Valores por defecto
En ocasiones puede ser interesante almacenar un valor por defecto en las variables en caso de no recibir ningún valor en ellas:
|
1 2 3 4 5 |
const myArray = [1, 2, 3]; let [first, second, third, fourth = 4] = myArray; console.log(first, second, third, fourth); // 1 2 3 4 |
Anidamiento
También podemos realizar la desestructuración con elementos anidados, para ello usaremos la sintaxis de corchetes para dichos arrays anidados:
|
1 2 3 4 5 |
const myArray = [1, [10, 20], 3]; let [first, [a, b], third] = myArray; console.log(first, third, a, b); // 1 3 10 20 |
Resto de elemento (Rest items) …
Rest items es un concepto que se utiliza en más partes de ES6, su sintaxis son tres puntos … que precederán al nombre de la variable, al hacer esto, dicha variable almacenará el resto de valores, y en este caso por tanto será un array. Veamos un ejemplo que aclare todo esto:
|
1 2 3 4 5 6 7 8 9 |
const myArray = [1, 2, 3, 4]; let [first, ...rest] = myArray; console.log(first); // 1 console.log(rest[0]) // 2 console.log(rest[2]) // 4 |
Desestructuración de objetos
Como veremos a continuación el concepto es el mismo, y las distintas posibilidades vistas en el caso de los arrays son aplicables también a los objetos.
|
1 2 3 4 5 6 7 8 9 10 |
const person1 = { name: 'Peter', age: 24 }; let { name, age } = person1; console.log(name); // Peter console.log(age) // 24 |
Como podemos ver el concepto es el mismo tan sólo ha variado la sintaxis, utilizando en este caso las llaves en lugar de los corchetes.
Valores por defecto
Para asignar valores por defecto la sintaxis es la misma que para el caso de los arrays:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const person1 = { name: 'Peter', age: 24 }; let { name, age, gender = 'male' } = person1; console.log(name); // Peter console.log(age) // 24 console.log(gender) // male |
Como habréis podido observar hasta ahora, los nombres de las variables que hemos usado han coincidido con el nombre de las claves del objeto, pero podemos utilizar otras si es necesario:
|
1 2 3 4 5 6 7 8 9 10 |
const person1 = { name: 'Peter', age: 24 }; let { name: nombre, age: edad } = person1; console.log(nombre); // Peter console.log(edad) // 24 |
Anidamiento
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const person1 = { name: 'Peter', age: 24, address: { street: 'Henry St', number: 6 } }; let { name, age, address: {street, number} } = person1; console.log(street); // Henry St console.log(number) // 6 |
Al igual que en el ejemplo anterior, podríamos cambiar el nombre de la variable en el anidamiento.
Destructuración mixta
Hasta ahora hemos visto como funciona la desestructuración de forma separada para arrays y objetos, ahora mostraremos un ejemplo sencillo de su uso mixto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const person1 = { name: 'Peter', age: 24, address: { street: 'Henry St', number: 6 }, phones: [657123432, 612347821, 912345678] }; let { name, age, address: {street, number}, phones: [ firstNumber, ...otherNumbers ] } = person1; console.log(firstNumber); // 657123432 console.log(otherNumbers[1]) // 912345678 console.log(number) // 6 |
En definitiva gracias a la desestructuración podemos realizar asignaciones en pocas líneas de una forma intuitiva, este proceso de asignación de objetos y arrays a variables es algo muy común en JavaScript especialmente cuando manejamos objetos recibidos por APIs
Esperamos que os sirva de ayuda y os haga indagar en las nuevas posibilidades de ES6.
