Esta nueva funcionalidad de ES6 llamada destructuring assignment<\/strong> es una expresi\u00f3n JavaScript que posibilita la extracci\u00f3n de datos tanto de Arrays\u00a0 como de Object . Para ello usamos la misma sintaxis que para la creaci\u00f3n de Arrays<\/strong> y de Object<\/strong>, es decir, para los Arrays usamos los corchetes Comentar que en otros lenguajes de programaci\u00f3n tambi\u00e9n se usa esta funcionalidad ya que esto no es nada nuevo en lenguajes como Perl, Python, etc.<\/p>\n 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\u00e9 podemos usar esta funcionalidad con Arrays y Object de JavaScript. Imaginemos que tenemos el siguiente c\u00f3digo o situaci\u00f3n en nuestro fichero JavaScript<\/p>\n Es hora de poner en marcha nuestro c\u00f3digo y c\u00f3mo lo qu\u00e9 queremos es obtener los datos de un objeto JavaScript pues empezamos por aqu\u00ed mismo.<\/p>\n Como se puede ver el c\u00f3digo es m\u00e1s legible<\/strong> y tiene menos c\u00f3digo<\/strong>. Lo \u00fanico que hemos hecho aqu\u00ed es pasar a la funci\u00f3n una expresi\u00f3n 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:<\/p>\n Bien, ya hemos visto mucha funcionalidad de esta nueva caracter\u00edstica de ES6. Ahora vemos c\u00f3mo se destructura un objeto en javascript.<\/p>\n Aqu\u00ed hay que tener un especial cuidado si declaramos las variables en el \u00e1mbito global<\/strong>, que en nuestro caso puede ser windows<\/strong> si usamos un navegador para ejecutar nuestro javascript. As\u00ed que podemos tener algo como esto:<\/p>\n Y si intentas hacer esto, destructurar el objeto ‘developer<\/strong>‘ recibes un bonito error de tipo Uncaught SyntaxError: Identifier ‘name’ has already been declared<\/span><\/p>\n \u00bfQu\u00e9? Esto no es lo qu\u00e9 yo quiero que suceda \u00a1Pues vamos a solucionarlo!<\/p>\n Para poder solucionar esto lo mejor es crear una funci\u00f3n que nos retorne el objeto destructurado o haga esta funci\u00f3n de desectructurar el objeto que le pasemos.<\/p>\n Si, tambi\u00e9n se puede poner alias a los nombres de las variables, aunque esta forma o pr\u00e1ctica no se usa mucho y \u00bfc\u00f3mo puedo hacerlo? pues vamos a verlo.<\/p>\n Bien, tal como se ha comentado los Arrays tambi\u00e9n se pueden extraer sus datos con esta funcionalidad de ES6.<\/p>\n Veamos unos ejemplos:<\/p>\n Tambi\u00e9n podemos hacer uso de Rest operator (…)<\/span><\/strong> para obtener algunos elementos o parte de un array:<\/p>\n Tambi\u00e9n podemos hacer uso de Spread operator (…)<\/strong><\/span> para por ejemplo clonar un array o los valores de este en otro array:<\/p>\n Como nota final tenemos que tener en cuenta que cuando hacemos destructuring de arrays<\/p>\n En este tutorial hemos visto algunos ejemplos de la nueva funcionalidad de ES6 Destructuring Assignment<\/span><\/strong> y su sintaxis para el uso con objetos y arrays. Puede que ya sepas manejar todas estas caracter\u00edsticas, espero que aun as\u00ed hayas aprendido algo. Esta funcionalidad que nos da la nueva versi\u00f3n de JavaScript ES6 nos hace la vida m\u00e1s f\u00e1cil en el desarrollo JavaScript el cual est\u00e1 dando un salto de gigante dentro del ecosistema de lenguajes que se usan en FrontEnd como en BackEnd.<\/p>\n \u00bfQu\u00e9 es Destructuring assignment en JavaScript? Esta nueva funcionalidad de ES6 llamada destructuring assignment es una expresi\u00f3n JavaScript que posibilita la extracci\u00f3n de datos tanto de Arrays\u00a0 como de Object . Para ello usamos la misma sintaxis que para la creaci\u00f3n de Arrays y de Object, es decir, para los Arrays usamos los corchetes [] […]<\/p>\n","protected":false},"author":2,"featured_media":78,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"full-width-content","footnotes":""},"categories":[4],"tags":[],"class_list":{"0":"post-77","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"entry"},"yoast_head":"\n[]<\/code> como constructor y para los Object usamos las llaves {}<\/code><\/p>\n\u00bfC\u00f3mo se usa la expresi\u00f3n Destructuring assignment en JavaScript?<\/h3>\n
\nBien, pues como dir\u00eda Jack el destripador vamos por partes.<\/p>\n const developer = {\r\n name: \"Mar\u00eda\",\r\n age: 26,\r\n country: \"Espa\u00f1a\",\r\n languages: {\r\n python: \"yes\",\r\n java: \"yes\",\r\n php: \"yes\",\r\n perl: \"not\",\r\n javascript: \"yes\"\r\n }\r\n}\r\n\r\nfunction getDeveloperData(dev){\r\n console.log('Hola, ' + dev.name);\r\n console.log('Usted sabe python ? ' + (dev.languages.python || \";-)\"));\r\n console.log('Usted sabe java ? ' + (dev.languages.java || \";-)\"));\r\n console.log('Usted sabe php ? ' + (dev.languages.php || \";-)\"));\r\n console.log('Usted sabe perl ? ' + (dev.languages.perl || \";-)\"));\r\n console.log('Usted sabe javascript ? ' + (dev.languages.javascript || \";-)\"));\r\n}\r\n\r\ngetDeveloperData(developer);\r\n\r\n\/\/Hola, Mar\u00eda\r\n\/\/Usted sabe python ? yes\r\n\/\/Usted sabe java ? yes\r\n\/\/Usted sabe php ? yes\r\n\/\/Usted sabe perl ? not\r\n\/\/Usted sabe javascript ? yes<\/pre>\nfunction getDeveloperDataDestructuring( { name, languages: { python, java, php, perl, javascript } } ){\r\n console.log('Hola, ' + name);\r\n console.log('Usted sabe python ? ' + (python || \";-)\"));\r\n console.log('Usted sabe java ? ' + (java || \";-)\"));\r\n console.log('Usted sabe php ? ' + (php || \";-)\"));\r\n console.log('Usted sabe perl ? ' + (perl || \";-)\"));\r\n console.log('Usted sabe javascript ? ' + (javascript || \";-)\"));\r\n}\r\n\r\ngetDeveloperDataDestructuring(developer);\r\n\r\n\/\/Hola, Mar\u00eda\r\n\/\/Usted sabe python ? yes\r\n\/\/Usted sabe java ? yes\r\n\/\/Usted sabe php ? yes\r\n\/\/Usted sabe perl ? not\r\n\/\/Usted sabe javascript ? yes<\/pre>\n\/\/ Pasados a la funci\u00f3n para hacer destructuring.\r\n{ name, languages: { python, java, php, perl, javascript } }<\/pre>\nDestructuring de Object en JavaScript ES6<\/h3>\n
\/\/ Destructurando el objeto developer\r\n\r\nconst { name, languages: { python, java } } = developer;\r\n\r\nconsole.log( `${name} \u00bfsabe python? ${python}` );\r\n\r\n\/\/ \"Mar\u00eda \u00bfsabe python? yes\"<\/pre>\n\/\/ \u00c1mbito global\r\nconst developer = {\r\n name: \"Mar\u00eda\",\r\n age: 26,\r\n country: \"Espa\u00f1a\",\r\n languages: {\r\n python: \"yes\",\r\n java: \"yes\",\r\n php: \"yes\",\r\n perl: \"not\",\r\n javascript: \"yes\"\r\n }\r\n}\r\n\r\n\/\/ \u00c1mbito global\r\nlet name = 'Diana'; \/\/ Redefinimos variable OJO\r\nlet age = 55; \/\/ Redefinimos OJO\r\nlet country = \"Inglaterra\"; \/\/ Redefinimos OJO\r\nlet languages = { \/\/ Redefinimos OJO\r\n python: \"not\",\r\n java: \"yes\"\r\n}\r\n\r\nconsole.log(`${name} de ${age} edad, vive en ${country} y \u00bfsabe python? ${languages.python}`);\r\n\r\n\/\/ \"Diana de 55 edad, vive en Inglaterra y \u00bfsabe python? not\"<\/pre>\n\/\/ \u00c1mbito global\r\nlet name = 'Diana';\r\nlet age = 55;\r\nlet country = \"Inglaterra\";\r\nlet languages = {\r\n python: \"not\",\r\n java: \"yes\"\r\n}\r\n\r\n\/\/ OJO aqui. Error 'Uncaught SyntaxError: Identifier 'name' has already been declared'\r\nconst {name, age, country } = developer; \/\/ Object before 'developer'\r\n\r\nconsole.log(`${name}\u00a0de\u00a0${age}\u00a0edad,\u00a0vive\u00a0en\u00a0${country}\u00a0y\u00a0\u00bfsabe\u00a0python?\u00a0${languages.python}`);<\/pre>\n\/\/ Soluci\u00f3n a los objetos con muchos niveles de profundidad\r\n\r\nfunction getDataWithScope( {name, age, country, languages: { python, java } } ) {\r\n console.log(`${name} de ${age} edad, vive en ${country} y \u00bfsabe python? ${python}`);\r\n}\r\n\r\ngetDataWithScope(developer);\r\n\r\n\/\/ \"Mar\u00eda de 26 edad, vive en Espa\u00f1a y \u00bfsabe python? yes\"\r\n\/\/<\/pre>\nAlias en destructuring assignment<\/h3>\n
\/\/ Alias con destructuring assignment \r\n\r\nfunction getDataAlias( {name: nombre, age: edad, country: pais, languages: {python, java}}){\r\n console.log(`${nombre} de ${edad} edad, vive en ${pais} y \u00bfsabe python? ${python}`);\r\n}\r\ngetDataAlias(developer);\r\n\r\n\/\/ \"Mar\u00eda de 26 edad, vive en Espa\u00f1a y \u00bfsabe python? yes\"\r\n\/\/<\/pre>\nValores por defecto en destructuring assignment<\/h3>\n
\/\/ Valores por defecto en destructuring assignment\r\n\r\nfunction getDataDefault( {\r\n name, age, country, addClass = 'MiClase', languages: {\r\n python = 'Not :-(', java\r\n }\r\n}) {\r\n console.log(name, age, `vive en ${country} y \u00bfsabe python?`, python, `,ha a\u00f1adido una clase ${addClass}`);\r\n}\r\n\r\ngetDataDefault(developer);\r\n\r\n\/\/ Mar\u00eda 26 vive en Espa\u00f1a y \u00bfsabe python? yes ,ha a\u00f1adido una clase MiClase\r\n\/\/<\/pre>\nDestructuring de Arrays en JavaScript ES6<\/h3>\n
\/\/ Arrays Destructuring\r\n\r\nconst personName = [\"Maria\", 46, \"Pedro\", 50, \"Diana\", 29];\r\n\r\nconst [ friend1, age1, friend2, age2, friend3, age3 ] = personName;\r\n\r\nconsole.log(`${friend1}, tiene ${age1} \\n ${friend2}, tiene ${age2} \\n ${friend3}, tiene ${age3} \\n`);\r\n\r\n\/\/ Maria, tiene 46 \r\n\/\/ Pedro, tiene 50 \r\n\/\/ Diana, tiene 29 \r\n\/\/\r\n<\/pre>\nDestructuring de Arrays internos<\/h3>\n
\/\/ Array nested \r\n\r\nconst boxData = [\"first\", [33, 44, 55, 66], 34, \"between\", 45, 56, 77, 21 ];\r\n\r\nconst [ first, [num1, num2, num3, num4] ] = boxData;\r\n\r\n\/\/ Use nested destructuring\r\nconsole.log(first, num1, num2, num3, num4);\r\n\r\n\/\/ first 33 44 55 66\r\n\/\/<\/pre>\n
\/\/ Use of Rest operatos\r\n\r\nconst colors = ['white', 'orange', 'yellow', 'green', 'blue', 'purple', 'teal', 'turquoise'];\r\n\r\nconst [white, orange, ...otherColors] = colors;\r\n\r\nconsole.log(otherColors);\r\n\r\n\/\/ [\"yellow\", \"green\", \"blue\", \"purple\", \"teal\", \"turquoise\"]\r\n\/\/<\/pre>\n
\/\/ Spread for copy element of array\r\n\r\nconst colors = ['white', 'orange', 'yellow', 'green', 'blue', 'purple', 'teal', 'turquoise'];\r\n\r\nconst colorsCopy = [\r\n ...colors\r\n];\r\n\r\nconsole.log(colors === colorsCopy); \/\/ false\r\n\r\nconsole.log(colorsCopy);\r\n\r\n\/\/ [\"white\", \"orange\", \"yellow\", \"green\", \"blue\", \"purple\", \"teal\", \"turquoise\"]\r\n\/\/<\/pre>\n
\n
[0]<\/code><\/li>\nConclusi\u00f3n:<\/span><\/h3>\n