lauramagali/notes-es6-destructuring-notes

Notas sobre Array y Object Destructuring en ES6

El siguiente contenido fue elaborado por @_nhsz como guía para las clases de undefined school

Son bienvenidos los issues y PRs para mejorar el contenido, corregir errores, etc

Si el contenido te resultó útil y querés colaborar, podés hacerlo acá (se acepta BTC :P). Gracias!

✨ ES6: Array & Object destructuring

• Es una forma concisa de extraer valores ("desestructurar") de arrays y otros objetos y guardarlos en variables

Object destructuring

⚠️ el orden de los elementos no importa, sólo que matcheen los nombres de las propiedades

// before destructuring 😢
const name = user.fullName;
console.log(name); // 'Sam Fisher';

// after destructuring 😍
const { fullName } = user;
console.log(fullName) // 'Sam Fisher';

// The old way 😱
const fullName = user.fullName;
const age = user.age;
const job = user.job;
console.log(fullName, age, job); // 'Sam Fisher' 62 'spy'

// The destructuring way 😎
const { fullName, age, job } = user;
console.log(fullName, age, job); // 'Sam Fisher' 62 'spy';

Extraer valores de objetos pasados como parámetros de una función

Los nombres que usemos para los parámetros deben coincidir con nombres de propiedades del objeto que se recibe, sino van a tener undefined como valor

// ES5
function myFunc(opts) {
  var name = opts.name;
  var age = opts.age;
}

myFunc({ name: 'John', age: 25 });

// ES6
function myFunc({ name, age }) {
  // your code ✨
}

Renombrar valores extraídos (aka alias/custom names)

En parámetros recibidos en funciones

function myFunc({ someLongPropertyName: prop }) {
  console.log(prop);
}

myFunc({ someLongPropertyName: 'Hello' })
// logs 'Hello'

Extrayendo valores a constantes/variables

const user = {
  fullName: 'Sam Fisher',
  age: 62,
  job: 'spy'
}

const { fullName } = user;
fullName;     // =>'Sam Fisher'

// assign `completeName` alias to `fullName` bind
const { fullName: completeName } = user;
completeName; // => 'Sam Fisher'

Default values

const { name = 'Sam' } = user;
console.log(name); // Sam

Arrays

⚠️ el orden de los elementos importa

const array = [1, 2, 3, 4, 5];
const [one, two] = array;

console.log(one, two);

// skip some numbers
const array = [1, 2, 3, 4, 5];
const [,, three] = array;

console.log(three);

Retornar y extraer múltiples valores

const sumAndMultiply = (a, b) => [a + b, a * b];

const [sum, product] = sumAndMultiply(2, 3);

Swapping

// element swapping without aux ✨
let a = 1;
let b = 2;

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

console.log(a);
console.log(b);

Destructuring + Rest parameters magic ✨

También podemos quedarnos con el primer valor de un array usando destructuring y guardar el resto en otro array

⚠️ para que esto funcione, el operador de los 3 ... (similar a cuando usamos spread, pero en este caso lo llamamos rest parameters) sólo puede asignarse al último elemento al que aplicamos destructuring (porque es el resto, lo restante, rest... se entiende? Acá podés leer más sobre rest parameters)

const numbers = [ 10, 20, 30, 40, 50 ];
const [ head, ...tail ] = numbers;

Y con objetos

const eBook = { 
  title: 'The Lord of the Rings - The Fellowship of the Ring', 
  genre: 'Fantasy', 
  author: 'J. R. R. Tolkien', 
  cover: 'https://i.imgur.com/OwMUnQu.jpg'
}

const {title, ...info} = eBook;