¿Qué es Destructuring assignment en JavaScript?
Esta nueva funcionalidad de ES6 llamada destructuring assignment es una expresión JavaScript que posibilita la extracción de datos tanto de Arrays como de Object . Para ello usamos la misma sintaxis que para la creación de Arrays y de Object, es decir, para los Arrays usamos los corchetes [] como constructor y para los Object usamos las llaves {}
Comentar que en otros lenguajes de programación también se usa esta funcionalidad ya que esto no es nada nuevo en lenguajes como Perl, Python, etc.
¿Cómo se usa la expresión Destructuring assignment en JavaScript?
Bien, vamos a poner algunos ejemplos para poder comparar y ver la gran versatilidad y potencia que le podemos sacar a esta funcionalidad nueva de ES6. Tal como comenté podemos usar esta funcionalidad con Arrays y Object de JavaScript.
Bien, pues como diría Jack el destripador vamos por partes.
Imaginemos que tenemos el siguiente código o situación en nuestro fichero JavaScript
const developer = {
name: "María",
age: 26,
country: "España",
languages: {
python: "yes",
java: "yes",
php: "yes",
perl: "not",
javascript: "yes"
}
}
function getDeveloperData(dev){
console.log('Hola, ' + dev.name);
console.log('Usted sabe python ? ' + (dev.languages.python || ";-)"));
console.log('Usted sabe java ? ' + (dev.languages.java || ";-)"));
console.log('Usted sabe php ? ' + (dev.languages.php || ";-)"));
console.log('Usted sabe perl ? ' + (dev.languages.perl || ";-)"));
console.log('Usted sabe javascript ? ' + (dev.languages.javascript || ";-)"));
}
getDeveloperData(developer);
//Hola, María
//Usted sabe python ? yes
//Usted sabe java ? yes
//Usted sabe php ? yes
//Usted sabe perl ? not
//Usted sabe javascript ? yesEs hora de poner en marcha nuestro código y cómo lo qué queremos es obtener los datos de un objeto JavaScript pues empezamos por aquí mismo.
function getDeveloperDataDestructuring( { name, languages: { python, java, php, perl, javascript } } ){
console.log('Hola, ' + name);
console.log('Usted sabe python ? ' + (python || ";-)"));
console.log('Usted sabe java ? ' + (java || ";-)"));
console.log('Usted sabe php ? ' + (php || ";-)"));
console.log('Usted sabe perl ? ' + (perl || ";-)"));
console.log('Usted sabe javascript ? ' + (javascript || ";-)"));
}
getDeveloperDataDestructuring(developer);
//Hola, María
//Usted sabe python ? yes
//Usted sabe java ? yes
//Usted sabe php ? yes
//Usted sabe perl ? not
//Usted sabe javascript ? yesComo se puede ver el código es más legible y tiene menos código. Lo único que hemos hecho aquí es pasar a la función una expresión llamada destructuring assignment para la cual solo queremos obtener los datos del objeto developer tales como name y los languages tales como python, java, php, perl y javascript de esta forma:
// Pasados a la función para hacer destructuring.
{ name, languages: { python, java, php, perl, javascript } }Destructuring de Object en JavaScript ES6
Bien, ya hemos visto mucha funcionalidad de esta nueva característica de ES6. Ahora vemos cómo se destructura un objeto en javascript.
// Destructurando el objeto developer
const { name, languages: { python, java } } = developer;
console.log( `${name} ¿sabe python? ${python}` );
// "María ¿sabe python? yes"Aquí hay que tener un especial cuidado si declaramos las variables en el ámbito global, que en nuestro caso puede ser windows si usamos un navegador para ejecutar nuestro javascript. Así que podemos tener algo como esto:
// Ámbito global
const developer = {
name: "María",
age: 26,
country: "España",
languages: {
python: "yes",
java: "yes",
php: "yes",
perl: "not",
javascript: "yes"
}
}
// Ámbito global
let name = 'Diana'; // Redefinimos variable OJO
let age = 55; // Redefinimos OJO
let country = "Inglaterra"; // Redefinimos OJO
let languages = { // Redefinimos OJO
python: "not",
java: "yes"
}
console.log(`${name} de ${age} edad, vive en ${country} y ¿sabe python? ${languages.python}`);
// "Diana de 55 edad, vive en Inglaterra y ¿sabe python? not"Y si intentas hacer esto, destructurar el objeto ‘developer‘ recibes un bonito error de tipo Uncaught SyntaxError: Identifier ‘name’ has already been declared
// Ámbito global
let name = 'Diana';
let age = 55;
let country = "Inglaterra";
let languages = {
python: "not",
java: "yes"
}
// OJO aqui. Error 'Uncaught SyntaxError: Identifier 'name' has already been declared'
const {name, age, country } = developer; // Object before 'developer'
console.log(`${name} de ${age} edad, vive en ${country} y ¿sabe python? ${languages.python}`);¿Qué? Esto no es lo qué yo quiero que suceda ¡Pues vamos a solucionarlo!
Para poder solucionar esto lo mejor es crear una función que nos retorne el objeto destructurado o haga esta función de desectructurar el objeto que le pasemos.
// Solución a los objetos con muchos niveles de profundidad
function getDataWithScope( {name, age, country, languages: { python, java } } ) {
console.log(`${name} de ${age} edad, vive en ${country} y ¿sabe python? ${python}`);
}
getDataWithScope(developer);
// "María de 26 edad, vive en España y ¿sabe python? yes"
//Alias en destructuring assignment
Si, también se puede poner alias a los nombres de las variables, aunque esta forma o práctica no se usa mucho y ¿cómo puedo hacerlo? pues vamos a verlo.
// Alias con destructuring assignment
function getDataAlias( {name: nombre, age: edad, country: pais, languages: {python, java}}){
console.log(`${nombre} de ${edad} edad, vive en ${pais} y ¿sabe python? ${python}`);
}
getDataAlias(developer);
// "María de 26 edad, vive en España y ¿sabe python? yes"
//Valores por defecto en destructuring assignment
// Valores por defecto en destructuring assignment
function getDataDefault( {
name, age, country, addClass = 'MiClase', languages: {
python = 'Not :-(', java
}
}) {
console.log(name, age, `vive en ${country} y ¿sabe python?`, python, `,ha añadido una clase ${addClass}`);
}
getDataDefault(developer);
// María 26 vive en España y ¿sabe python? yes ,ha añadido una clase MiClase
//Destructuring de Arrays en JavaScript ES6
Bien, tal como se ha comentado los Arrays también se pueden extraer sus datos con esta funcionalidad de ES6.
Veamos unos ejemplos:
// Arrays Destructuring
const personName = ["Maria", 46, "Pedro", 50, "Diana", 29];
const [ friend1, age1, friend2, age2, friend3, age3 ] = personName;
console.log(`${friend1}, tiene ${age1} \n ${friend2}, tiene ${age2} \n ${friend3}, tiene ${age3} \n`);
// Maria, tiene 46
// Pedro, tiene 50
// Diana, tiene 29
//
Destructuring de Arrays internos
// Array nested const boxData = ["first", [33, 44, 55, 66], 34, "between", 45, 56, 77, 21 ]; const [ first, [num1, num2, num3, num4] ] = boxData; // Use nested destructuring console.log(first, num1, num2, num3, num4); // first 33 44 55 66 //
También podemos hacer uso de Rest operator (…) para obtener algunos elementos o parte de un array:
// Use of Rest operatos const colors = ['white', 'orange', 'yellow', 'green', 'blue', 'purple', 'teal', 'turquoise']; const [white, orange, ...otherColors] = colors; console.log(otherColors); // ["yellow", "green", "blue", "purple", "teal", "turquoise"] //
También podemos hacer uso de Spread operator (…) para por ejemplo clonar un array o los valores de este en otro array:
// Spread for copy element of array const colors = ['white', 'orange', 'yellow', 'green', 'blue', 'purple', 'teal', 'turquoise']; const colorsCopy = [ ...colors ]; console.log(colors === colorsCopy); // false console.log(colorsCopy); // ["white", "orange", "yellow", "green", "blue", "purple", "teal", "turquoise"] //
Como nota final tenemos que tener en cuenta que cuando hacemos destructuring de arrays
- Los datos devueltos tienen un orden de salida, primero el valor del dato
[0] - No se pueden usar alias.
- Se pueden usar Rest operator y Spread operatos para facilitar su manejo.
Conclusión:
En este tutorial hemos visto algunos ejemplos de la nueva funcionalidad de ES6 Destructuring Assignment y su sintaxis para el uso con objetos y arrays. Puede que ya sepas manejar todas estas características, espero que aun así hayas aprendido algo. Esta funcionalidad que nos da la nueva versión de JavaScript ES6 nos hace la vida más fácil en el desarrollo JavaScript el cual está dando un salto de gigante dentro del ecosistema de lenguajes que se usan en FrontEnd como en BackEnd.
- Aprende de forma fácil qué es ASYNC y AWAIT en JavaScript ES6 - abril 14, 2019
- Manejar o atrapar las excepciones en java de forma sencilla - abril 4, 2019
- Todo sobre Destructuring Assignment en JavaScript ES6 - marzo 29, 2019