js❤️ - Destructuring

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
}

Siguiente - js❤️ - Destructuring + Spread → Los restantes →