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!
- Es una forma concisa de extraer valores ("desestructurar") de arrays y otros objetos y guardarlos en variables
// 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';
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 ✨
}
function myFunc({ someLongPropertyName: prop }) {
console.log(prop);
}
myFunc({ someLongPropertyName: 'Hello' })
// logs 'Hello'
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'
const { name = 'Sam' } = user;
console.log(name); // Sam
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);
const sumAndMultiply = (a, b) => [a + b, a * b];
const [sum, product] = sumAndMultiply(2, 3);
// element swapping without aux ✨
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a);
console.log(b);
También podemos quedarnos con el primer valor de un array usando destructuring y guardar el resto en otro array
...
(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;
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;