La destructuración en Javascript consiste en extraer los valores de un array o las propiedades de un objeto en distintas variables. Y es útil si deseas usar aquellos valores que solo necesites.
Esta forma de trabajar vino con la llegada de ES6+ de javascript.
Destructuración de objetos en Javascript
Para destructurar un objeto declaras los valores que deseas utilizar entre el corchete ({}), por ejemplo const { atributo1, atributo2,... } = objeto;.
// Sin Destructuración de objetos
const person = {
name: "Luis",
age: 22,
country: "Vzl",
};
console.log(person.name, person.age, person.country);
const nombre = person.name;
const edad = person.age;
const pais = person.country;
console.log(nombre, edad, pais);
// Destructuración de objetos
const { name, age, country } = person;
console.log(name, age, country);
Cambiar el nombre de las variables con destructuración de objetos
Puedes cambiar la propiedad del objeto utilizando la siguiente sintaxis: const { atributo: nuevoAtributo } = objeto;.
const pokemon = {
name: "Zoroak",
lvl: 22,
region: "Unova",
};
//Cambio de nombre en las variables
const { name: pokemonName, lvl: pokemonLvl, region: pokemonRegion } = pokemon;
console.log(pokemonName, pokemonLvl, pokemonRegion);Destructuración en parámetros de una función
Puedes utilizar la desestructuración en los parámetros para obtener los valores directamente si envías un objeto como argumento en la invocación a la declaración de una función,
Debes tener en cuenta que el nombre debe ser igual a la propiedad del objeto. Recuerda que es una ayuda al momento de utilizar los atributos que solo necesites del objeto.
const pokemon = {
name: "Zoroak",
lvl: 22,
region: "Unova",
};
function callPokemon({ name, lvl, region }) {
console.log(name, lvl, region);
};
callPokemon(pokemon);
Destructuración de arrays en Javascript
La destructuración de arrays extrae los valores de un array en variables utilizando la misma posición del array. La sintaxis es similar a la destructuración de objetos: const [var1, var2,...] = array;.
const gatos = [ "Michi", "Michigun", "Michil", "Michael"];
const [michi, michigun, michil, michael] = gatos;
console.log(michi, michigun, michil, michael);
Desestructuración para valores retornados de una función
Al destructurar una función que retorna un array, puedes guardarlo en una variable. Es útil para separar esos valores de manera legible.
Este código sería una simulación de cómo se aplica la destructuración en useState de React
function useState(value){
return [value, updateValue()];
}
//Sin desestructuración
const estado = useState(3)
const valor = estado[0]
const actualizador = estado[1]
//Con desestructuración
const [valor, actualizador] = useState(3)
Recomendaciones
Hay trucos que puedes utilizar en la destructuración de arrays, sin embargo no es la vía más recomendable a usar.
Por ejemplo, si necesitas un elemento en cierta posición, puedes utilizar la separación por comas para identificar la variable que necesitas.
const array = [ 1, 2, 3, 4, 5 ]
const [ ,,,, cinco ] = array
console.log(cinco) // 5
Como los arrays son un tipo de objeto, puedes utilizar la desestructuración de objetos mediante el índice y utilizando un nombre para la variable.
const array = [ 1, 2, 3, 4, 5 ]
const {4: cinco} = array
console.log(cinco) // 5
¿Qué te ha parecido? ¿Has utilizado alguna vez la destructuración en Javascript? Cuéntame los detalles en los comentarios.
No olvides compartir y seguirme en redes sociales para más contenido.
Sigueme en mis redes sociales para más contenido