w3.unpo<code>todo

Destructuring en ES6

La desestructuración ( destructuring ) es una téchica utilizada para extraer y declarar varias variables a la vez. Podemos aplicar esta técnica a arrays, objetos, y a otras dos tipos de estructuras nuevas en ES6: maps y sets.

Desestructurar arrays

1. Lo básico:

En este ejemplo tenemos un array de colores hex.

const colores = ["#ff0000","#00ff00","0000ff"];

Para claridad queremos utilizar nombres de colores en español. En lugar de escribir:

  const rojo = "#ff0000;
  const verde = "#00ff00;
  const azul = "#0000ff;

podemos declarar todas las variables a la vez de esta manera:

const [rojo, verde, azul] = colores;

Esto devuelve tres variables: const rojo, verde y azul.

2. Sin declarar

No es imprescindible crear primero el array de los colores. Podemos hacerlo simultáneamente.

const [rojo, verde, azul] = ["#ff0000","#00ff00","0000ff"];

3. Utilizar funciones

En este ejemplo creamos una función que toma como argumento un color rgb y lo transforma en un array.

function rgbArray(rgb) {
    rgb = rgb.slice(4);
    rgb = rgb.split(")");
    return rgb[0].split(",");
}

Por ejemplo rgbArray("rgb(255,0,0)") devuelve este array: ["255", "0", "0"], y lo podemos desestructurar de esta manera:

const [r,g,b] = rgbArray("rgb(255,0,0)");

Esto devuelve: const r = 255, g= 0 y b = 0;

4. Ignorar un valor

Y si queremos ignorar un valor, por ejemplo el verde, podemos escribir:

const [R, ,B] = rgbArray("rgb(255,0,255)")

5. Intercambiar variables

Hay situaciones en las cuales necesitamos intercambiar el valor de dos variables. Para esto primero tenemos que crear una variable temporal de esta manera:

function intercambio(a,b){
    var temp = a
    a = b
    b = a;
  }

Una vez más ES6 nos lo pone fácil. Ahora para intercambiar variables podemos utilizar desestructuración:

[a,b] = [b,a];

6. El resto de los parámetros (...)

Supongamos que tenemos una paleta de colores

const paleta = ['#000000', '#AC1848', '#BFB9A4', '#888B90', '#AAB2B7', '#131315'];

Y queremos utilizar el primer color como color de fondo, mientras que los demás formarán la gama de colores utilizada para dibujar varias pelotas. En este caso podemos utilizar el resto de los parámetros ( ... ) de esta manera:

const [fondo, ...gama] = paleta;

Esto devuelve una primera variable const fondo = '#000000' y un array const gama que contiene las demás colores.

Vea estos ejemplos en Codepen

See the Pen ES6 desestructurar arrays by Gabi (@enxaneta) on CodePen.

Desestructurar objetos

1. Lo básico:

Tenemos un objeto pelota que tiene como propiedades una posición, un radio y un color de relleno.

const pelota = {
    posicion:{
      x: 150,
      y: 150
    },
      colorDeRelleno:"tomato",
      radio: 25,
    }

  const posicion = pelota.posicion;
  const radio = pelota.radio;
  const colorDeRelleno = pelota.colorDeRelleno;

O podemos desestructurar el objeto pelota de esta manera:

const { posicion, radio, colorDeRelleno } = pelota;

Observación: si para desestructurar un array utilizamos corchetes ( [. . .] ), para desestructurar un objeto utilizamos llaves ( {. . .} )

El orden en el cual extraemos las variables no tiene importancia:

const { radio,  posicion, colorDeRelleno } = pelota;

También podemos extraer solo algunas propiedades:

const { posicion, radio } = pelota;

2. Objetos anidados

Para extraer las propiedades ( x e y ) de posicion podemos escribir:

const {x,y} = pelota.posicion;

Alternativamente, para extraer las variables x, y, radio y colorDeRelleno podemos escribir:

const { posicion: {x,y}, radio, colorDeRelleno } = pelota;

3. Sin declarar

Exactamente como en el caso de los arrays no es necesario tener un objeto previamente declarado:

const { velocidad, aceleracion } = {velocidad:1,aceleracion:.01}

4. Valores por defecto

Supongamos que algunas pelotas tienen también una propiedad colorBorde mientras que otras no la tienen. En este caso necesitamos un valor por defecto para colorBorde, de lo contrario la variable colorBorde será undefined.

const { posicion, radio, colorDeRelleno, colorBorde = "red"} = pelota;

o incluso podemos darle el mismo color que el colorDeRelleno:

const { posicion, radio, colorDeRelleno, colorBorde = colorDeRelleno} = pelota;

5. Cambiar el nombre de las variables

En principio los nombres de las nuevas variables tienen que coincidir con el nombre de las propiedades del objeto desestructurado. Podemos cambiar el nombre de las variables utilizando esta sintaxis: ( Abajo, los nuevos nombres de variables aparecen destacados en rojo )

const { posicion:pos, radio:r, colorDeRelleno:color } = pelota;

6. El resto de los parámetros (...)

Supongamos que tenemos un objeto particula:

const particula = {
    _r:25, 
    _color:"tomato", 
    _x:100, 
    _y:100
  };

Queremos desestructurar este objeto para extraer 3 variables: _r (radio), _color (color) y _pos (posición).

const {_r, _color, ..._pos} = particula;

Esto devuelve tres variables:_r, _color y _pos.  La variable _pos es un nuevo objeto que contiene las demás variables del objeto particula ( _x e _y )

Vea estos ejemplos en Codepen

See the Pen ES6 desestructurar objetos* by Gabi (@enxaneta) on CodePen.