Desestructuración en JavaScript

Desectructurar arrays y objetos en JavaScript

07.02.2021 a las 16:42

Desestructuración en JavaScript

Desestructuración de arrays y objetos en JavaScript

La desestructuración es una función de algunos lenguajes como JavaScript, Phyton..., que nos permite desempaquetar valores de arrays u objetos en grupos de variables, permitiéndonos simplificar nuestro código y hacerlo menos verboso.

Desestructuración de objetos

Supongamos que tenemos el siguiente objeto:

  const bici = {
    id: 123,
    nombre: 'Specialized',
    fabricante: 'USA',
    url: 'https://www.specialized.com/'
  };
  

Antes de EM6, lo que hacíamos por ejemplo para obtener la propiedad nombre era:

  const nombre = usuario.bici;
  console.log(nombre); //[LOG] Specialized
  

Pero con la desestructuración podemos hacer:

  const { nombre } = bici;
  console.log(nombre); //[LOG] Specialized
  

Valores por defecto

Además, si quieres asignar varias propiedades a distintas variables lo puedes hacer independientemente del orden:

  const bici = {
    id: 123,
    nombre: 'Specialized',
    fabricante: 'USA',
    url: 'https://www.specialized.com/'
  };

  const { url, nombre } = bici;
  console.log(url); //[LOG] https://www.specialized.com/
  console.log(nombre); //[LOG] Specialized
  

El resto

En caso que el objeto tenga más propiedades que el número de variables que queremos crear, o querramos crear un nuevo objeto sin alguna propiedad, lo podemos hacer con el spread operator.

  const bici = {
    id: 123,
    nombre: 'Specialized',
    fabricante: 'USA',
    url: 'https://www.specialized.com/'
  };

  const {nombre, ...restoInfo}=bici

  console.log(nombre) //[LOG]: "Specialized"
  console.log(restoInfo) //[LOG]: {
                                    "id": 123,
                                    "fabricante": "USA",
                                    "url": "https://www.specialized.com/"
                                  } 
  

Campos anidados

Para obtener variables de parámetro anidados:

  const bici = {
    id: 123,
    nombre: 'Specialized',
    ubicacion: {
      pais: 'USA',
      estado: 'New York'
    },
    url: 'https://www.specialized.com/'
  };

  const { nombre, ubicacion:{ pais }}=bici;

  console.log(nombre, pais);
  
  //[LOG] "Specialized" "USA"
  

Cambiando el nombre por defecto

Si quieres crear una variable de un campo del objeto pero lo quieres con otro nombre distinto al campo lo hacemos con el nombre del campo seguido de : y después el nombre de la variables deseada.

En el siguiente ejemplo crearemos una variable nombreBici a partir del campo nombre del objeto.

  const bici = {
    id: 123,
    nombre: 'Specialized',
    fabricante: 'USA',
    url: 'https://www.specialized.com/'
  };

  const {nombre:nombreBici, ...restoInfo}=bici

  console.log(nombreBici) //[LOG]: "Specialized"
  

Hasta luego 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2