ECMAScript 6.- Desestructuración de Arrays

 

Creación de Array

const persona = ['Erik', 27 , 'Mexico'];

   Para llamar un elemento del array debemos hacerlo por índices , luego podemos guardarlo en una variable .

En este caso vamos a imprimirlos en consola, pero los usos pueden ser múltiples.

const persona = ['Erik', 27 , 'Mexico'];

const nombre = persona[0]

 const edad = persona[1]

 const pais = persona[2]

 

 console.log(edad)  // 27

Resultado de consola

 En caso de que nuestro array tenga muchos mas elementos o queramos llamarlos múltiples veces en nuestra aplicación , esto se empieza a complicar y dificultar su lectura.

ECMAScript 6 nos permite por medio de la siguiente sintaxis darle un nombre a cada elemento del Array de una forma mas legible.

const persona = ['Erik', 27 , 'Mexico'];

 const [nombre,edad,pais] = persona

 console.log(edad)

 

Resultado de consola

¿Que pasa si no queremos nombrar todos los elementos?

-Vamos a dejar sin nombrar el 2do elemento , simplemente dejando su espacio vacío.

const persona = ['Erik', 27 , 'Mexico'];

 const [nombre,,pais] = persona

 console.log(pais)

Resultado de consola

-Vamos a dejar sin nombrar el 1er elemento.

const persona = ['Erik', 27 , 'Mexico'];

const [ , edad,pais] = persona 

 console.log(pais)

Resultado de consola

Podemos combinar la Desestructuración con el parámetro rest  y con Parámetros por defecto.

La desestructuración también puedes usarse con objetos

Pero eso será cuestión de otros artículos , practica y domina este articulo antes de avanzar.

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso

ECMAScript 6.- Desestructuración de Objetos

                                 

Creación de Objeto

const persona = {

    nombre: 'Carlos',

    edad:'27',

    pais:'Mexico'

 }

 

La diferencia vendrá a la hora que necesitamos llamar a las propiedades del objeto

const persona = {

    nombre: 'Carlos',

    edad:'27',

    pais:'Mexico'

 }

 //Antes de Ecma 

console.log(`${persona.nombre} de ${persona.pais}`)

Resultado que devuelve la consola

Si durante nuestra aplicación ,tuviéramos que llamar a las propiedades de este objeto constantemente , necesitamos una opción limpia y rápida.

La desestructuración no es otra cosa que un método rápido de asignar valores en bloque.

//objeto 

const persona = {

    nombre: 'Carlos',

    edad:'27',

    pais:'Mexico'

 }

 

 const {nombre,edad,pais} = persona //desestructuracion

  //Despues de Ecma 

 console.log(`${nombre} de ${pais}`)

Resultado que devuelve la consola

Esta funcionalidad puede aplicarse tanto a arrays y a objetos.

otro uso más común de la desestructuración en JavaScript es cuando estamos programando en Node con paquetes y funciones externas. 

Conclusión

La desestructuración es muy utilizada cuando acedemos mucho a las propiedades de una objeto o un array para tener un código mas limpio y legible.

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso