Destructuring
Destructuring nos permite extraer elementos concretos de un array o de un objeto.
Por ejemplo con arrays:
Guardar los elementos de un array en variables
const [year, month, day] = [2022, 1, 3]; // year = 2022, month = 1, day = 3 Incluso ignorando algunos valores
const [year, , day] = [2022, 1, 3]; // year = 2022, day = 3 Guardar el primer elemento de un array
const [first] = [4, 7, 2]; // first = 4 Guardar la respuesta de una función
const [name, setName] = useContext("Javi"); // name = "Javi", setName = function Extraer variables de un parámetro array
const a = { name: "Javi", num: 1 }; // Object.entries(a) = [ // ["name", "Javi"], // ["num", 1], // ]; Object.entries(a).forEach(([key, value]) => { // key = "name", value = "Javi" // key = "num", value = 1 }); Intercambiar el valor de dos variables
[screen, backgroundBuffer] = [backgroundBuffer, screen]; Y también con objetos:
const { a, c } = { a: 1, b: 2, c: 3, d: 4 }; // a = 1, c = 3 Incluso a varios niveles
const response = { error: { message: "failed" } }; const { error: { message }, } = response; // message = "failed" Cambiándole el nombre a la variable (alias)
const response = { error: { message: "failed" } }; const { error: { message: errMsg }, } = response; // errMsg = "failed" Y combinando objetos y arrays
const errors = [{ message: "field required" }, { message: "invalid date" }]; const [{ message }] = errors; // message = "field required" Extraer parámetros:
function logUser({ name, role }) { console.log(name, role); } const user = { name: "Katie", surname: "Mitchell", age: 18, role: "World saver", // ... }; logUser(user); // Katie World saver Extraer props de un componente de React:
function ReactComponent({ label, value }) { // ... } <ReactComponent label="name" value="Javi" />; Nombres de propiedad computados
Veamos el siguiente código
const createRandomUser = (attributeName, value) => { const user = { name: randomName(), age: randomAge(), } user[attributeName] = value; return user; } Para establecer attributeName a value hemos tenido que añadir una nueva asignación después de la inicialización del objeto.
Ahora sin embargo podemos usar nombres de propiedad computados utilizando corchetes [], veamos:
const createRandomUser = (attributeName, value) => ({ name: randomName(), age: randomAge(), [attributeName]: value }) Además ahora cuando queremos establecer un atributo en un objeto que ya tenemos almacenado en una variable con el mismo valor podemos ahorrarnos los dos puntos y la parte derecha.
Por ejemplo:
const name = "Katie"; const age = 18; const user = { name: name, // ⛔️ age: age // ⛔️ } Puede escribirse como:
const name = "Katie"; const age = 18; const user = { name, age } 
Top comments (0)