js❤️ - Destructuring
Tags: javascript, es6, react, spanish
Published: 2022-02-05 10:34:39

## 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

```js
const [year, month, day] = [2022, 1, 3];
// year = 2022, month = 1, day = 3
```

Incluso ignorando algunos valores

```js
const [year, , day] = [2022, 1, 3];
// year = 2022, day = 3
```

Guardar el primer elemento de un _array_

```js
const [first] = [4, 7, 2];
// first = 4
```

Guardar la respuesta de una función

```js
const [name, setName] = useContext("Javi");
// name = "Javi", setName = function
```

Extraer variables de un parámetro _array_

```js
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

```js
[screen, backgroundBuffer] = [backgroundBuffer, screen];
```

Y también con objetos:

```js
const { a, c } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, c = 3
```

Incluso a varios niveles

```js
const response = { error: { message: "failed" } };
const {
  error: { message },
} = response;
// message = "failed"
```

Cambiándole el nombre a la variable (alias)

```js
const response = { error: { message: "failed" } };
const {
  error: { message: errMsg },
} = response;
// errMsg = "failed"
```

Y combinando objetos y _arrays_

```js
const errors = [{ message: "field required" }, { message: "invalid date" }];
const [{ message }] = errors;
// message = "field required"
```

Extraer parámetros:

```js
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:

```js
function ReactComponent({ label, value }) {
  // ...
}
<ReactComponent label="name" value="Javi" />;
```

## Nombres de propiedad computados

Veamos el siguiente código
```js
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:

```js
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:

```js
const name = "Katie";
const age = 18;
const user = {
  name: name, // ⛔️
  age: age // ⛔️
}
```

Puede escribirse como:

```js
const name = "Katie";
const age = 18;
const user = {
  name,
  age
}
```

[Siguiente - js❤️ - Destructuring + Spread → Los restantes →](https://dev.to/jacarma/js-destructuring-spread-los-restantes-3hjo)