La asignación de desestructuración es la técnica importante introducida en la versión ECMAScript 2015 (ES6) de JavaScript que proporciona una sintaxis abreviada para extraer o desempaquetar elementos de array o propiedades de un objeto en distintas variables usando una sola línea de código. En otras palabras, esta asignación nos ayuda a segregar datos de cualquier objeto iterable y no iterable y luego nos ayuda a usar esos datos segregados individualmente según sea necesario o solicitado. Hace que el código sea más corto y más legible.
Echemos un vistazo a la sintaxis mencionada a continuación de la asignación de desestructuración que nos ayudará a reducir nuestro código y hacerlo más legible y escalable también.
Sintaxis: El lado izquierdo de la expresión de la asignación de Destructuring contiene las distintas variables que realmente definen qué propiedades/valores se desempaquetarán o segregarán de la variable de origen (o una array o un objeto) y el lado derecho especifica el objeto o array correspondiente a la que estamos a punto de extraer nuestros datos (la variable de origen que podría ser cualquier objeto iterable o no iterable).
// array destructuring
[variable1, variable2, .... , variableN] = array_variable;
// object destructuring
{property1, property2, .... , propertyN} = object_variable;
Ejemplo 1: el siguiente ejemplo muestra el uso de la extracción de elementos de array requeridos en variables distintas mediante la desestructuración de arrays y también lo ayudará a comprender cómo se puede usar la desestructuración para escribir código limpio y conciso.
Javascript
<script> //array destructuring let rainbow = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange","Red"]; let [V,I,B] = rainbow; console.log(V,I,B); </script>
Producción:
Violet Indigo Blue
Ejemplo 2: El operador de distribución también se usa para desempaquetar elementos de array, pero la principal diferencia entre la desestructuración de array y el operador de distribución es que la distribución desempaqueta todos los elementos de la array y este operador de distribución no nos permite omitir o elegir elementos según nuestros requisitos. Usando Array Destructuring, podemos omitir los elementos que no son necesarios usando un ‘separador de coma’.
Javascript
<script> let rainbow = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange","Red"]; // Skipping alternate colors from the rainbow array let [V,,B,,Y,,R] = rainbow; // Violet Blue Yellow Red console.log(V,B,Y,R);
Producción:
Violet Blue Yellow Red
Ejemplo 3: En el siguiente ejemplo, un objeto de dirección se desestructura para obtener solo las propiedades de la ciudad y el sector y mostrar el resultado en la consola.
La desestructuración de objetos es una característica importante de JavaScript y es muy útil cuando solo se van a usar ciertas propiedades de un objeto y no se requiere el objeto completo o no se tiene en cuenta. Esta característica de ES6 se usa comúnmente en los marcos de JavaScript y su aplicación principal es la desestructuración de parámetros, es decir, los objetos pasados a los parámetros de la función se pueden desestructurar antes de su uso, de acuerdo con los requisitos de la función.
Javascript
<script>
// Object destructuring
let address = { state: 'Punjab', city: 'Mohali', sector: 61 };
// Assign the address object directly as well
let {city, sector} = address;
console.log("City: " + city + ", Sector: " + sector);
// city = address.city
// sector = address.sector
</script>
Producción:
City: Mohali, Sector: 61
Nota: el orden de los nombres no importa en caso de que implementemos la desestructuración de objetos en JavaScript.
Por ejemplo, en el ejemplo ilustrado arriba, si cambiamos el orden de los nombres en los que las propiedades del objeto en particular han sido desestructuradas del objeto fuente, entonces también nuestra tarea será la misma y el resultado también será el mismo. Veamos la implementación de este hecho ilustrado a continuación (con la ayuda del siguiente fragmento de código):
Javascript
let address = { state: "Punjab", city: "Mohali", sector: 61 };
let { city, state, sector } = address;
console.log(
`An employee lives in the state of ${state} and his city name is ${city}`
);
// This code is contributed by Aman Singla...
Producción:
An employee lives in the state of Punjab and his city name is Mohali
Ejemplo 4: las propiedades del objeto también se pueden extraer utilizando un nombre de variable diferente (un alias) que no sea el nombre de propiedad definido en el objeto de origen. El siguiente ejemplo usa alias para extraer los valores de las propiedades de estado y ciudad del objeto de dirección .
Javascript
<script>
// Using an alias for extracting object properties
let address = { state: 'Punjab', city: 'Mohali', sector: 61 };
let {state: stateName, city: cityName, sector} = address;
console.log("State: " + stateName + ", City: "
+ cityName + ", Sector: " + sector);
// stateName -> alias for address.state
// cityName -> alias for address.city
</script>
Producción:
State: Punjab, City: Mohali, Sector: 61
Ejemplo 5: Un objeto anidado, es decir, un objeto dentro del objeto de origen, también se puede desestructurar usando la misma sintaxis de Destrucción de objetos para acceder solo a las propiedades requeridas. El siguiente ejemplo contiene un objeto de dirección que tiene un pin de objeto anidado que se desestructura para extraer solo el código pin de la dirección.
Javascript
<script>
// Nested object destructuring
let address = {
state: 'Punjab',
city: 'Mohali',
pin: {sector: 61, pincode: '160062'}
};
// Accessing only the 'pincode' property
// from address.pin (nested object)
//pincode = address.pin.pincode
let { state, city, pin: {pincode} } = address;
console.log("State: " + state + ", City: "
+ city + ", Pincode: " + pincode);
</script>
Producción:
State: Punjab, City: Mohali, Pincode: 160062
Ejemplo-6: En este ejemplo, intentaremos comprender cómo funciona realmente la tarea de configuración del valor predeterminado del parámetro de función. En otras palabras, utilizando el fragmento de código mencionado a continuación, intentaremos comprender cómo podemos establecer el valor predeterminado de un parámetro de función.
Javascript
let drawing_begins = ({
size = "BIG",
coordinates = { x: 0, y: 0 },
radius = 25,
}) => {
console.log(
`Th drawing made so far is of the ${size} size, having the coordinates of (${coordinates.x} , ${coordinates.y}) and with the radius value of ${radius}`
);
};
drawing_begins({
coordinates: { x: 18, y: 30 },
radius: 30,
});
// This code is contributed by Aman Singla...
Producción:
Th drawing made so far is of the BIG size, having the coordinates of (18 , 30) and with the radius value of 30