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, }
Para extraer sus propiedades como variables podemos escribir:
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.