Original article: Array vs Object Destructuring in JavaScript – What’s the Difference?
La asignación mediante desestructuración en JavaScript provee una forma ordenada y limpia de extraer valores de nuestros arreglos y objetos.
Este artículo pretende mostrar, exactamente, cómo funciona en JavaScript la asignación mediante desestructuración de arreglos y objetos.
Así que sin más preámbulos, comencemos con la desestructuración de arreglos.
¿Qué es la desestructuración de arreglos?
La desestructuración de arreglos es una técnica única que permite extraer limpiamente valores de un arreglo y asignarlos a nuevas variables.
Por ejemplo, sin usar la técnica de asignación mediante desestructuración, se podría copiar un valor de un arreglo en una nueva variable de la siguiente manera:
const perfil = ["Oluwatobi", "Sofela", "codesweetly.com"];
const nombre = perfil[0];
const apellido = perfil[1];
const sitioWeb = perfil[2];
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"Se debe notar que el fragmento de abajo tiene bastante código repetido que no cumple con el principio de programación DRY (Don’t Repeat Yourself - No Te Repitas).
Veamos ahora cómo la desestructuración de arreglos hace todo más limpio y adherido al principio DRY.
const perfil = ["Oluwatobi", "Sofela", "codesweetly.com"];
const [nombre, apellido, sitioWeb] = perfil;
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"Se puede ver, como por arte de magia, se ha limpiado el código colocando las tres nuevas variables (es decir, nombre, apellidoy sitioWeb) en un arreglo ([...]). Y a continuación, se asignaron los valores del arreglo perfil.
En otras palabras, se instruyó a la computadora para que extraiga los valores del arreglo perfil y los asigne en las variables al lado izquierdo del operador de asignación.
Por lo tanto, JavaScript analizará el arreglo perfil y copiará su primer valor ("Oluwatobi") el la primera variable (nombre) del arreglo de desestructuración.
Así mismo, la computadora extraerá el segundo valor del arreglo perfil y lo asignará a la segunda variable (apellido) del arreglo de desestructuración.
Por último, JavaScript copiará el tercer valor del arreglo perfil y lo asignará a la tercera variable (sitioWeb) del arreglo de desestructuración.
Observa que el fragmento de código de arriba ha desestructurado el arreglo perfil referenciándolo. Sin embargo, también es posible hacerlo directamente desestructurándolo de un arreglo. Veamos cómo.
Cómo hacer desestructuración directa de un arreglo
JavaScript permite desestructurar un arreglo directamente de la siguiente forma:
const [nombre, apellido, sitioWeb] = [
"Oluwatobi",
"Sofela",
"codesweetly.com"
];
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"Supon que prefieres separar las declaraciones de variables de sus asignaciones. En ese caso, JavaScript lo tiene cubierto. Veamos cómo.
Cómo usar desestructuración de arreglos mientras separa la declaración de las variables de su asignación
Siempre que uses desestructuración de arreglos, JavaScript permite separa la declaración de las variables de su asignación.
Aquí un ejemplo:
let nombre, apellido, sitioWeb;
[nombre, apellido, sitioWeb] = ["Oluwatobi", "Sofela", "codesweetly.com"];
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"¿Qué tal si quisieras que "Oluwatobi" sea asignado a la variable nombre y el resto de los elementos del arreglo a otra variable? ¿Cómo lo haría? Averigüémoslo a continuación.
Cómo usar desestructuración de arreglos para asignar el resto de un arreglo a una variable
JavaScript permite usar el operador rest dentro de un arreglo de desestructuración para asignar el resto de un arreglo normal a una variable.
Aquí un ejemplo:
const [nombre, ...otraInformacion] = ["Oluwatobi", "Sofela", "codesweetly.com"];
console.log(nombre); // "Oluwatobi"
console.log(otraInformacion); // ["Sofela", "codesweetly.com"]Nota: Siempre usa el operador rest como el último elemento del arreglo de desestructuración para evitar un error de sintaxis (SyntaxError).
Ahora, ¿Si sólo quisiera extraer "codesweetly.com" ? Discutamos la técnica a usar a continuación.
Cómo usar desestructuración de arreglos para extraer valores a cualquier índice
Aquí se muestra cómo puede usar desestructuración de arreglos para extraer valores en cualquier índice de un arreglo normal:
const [, , sitioWeb] = ["Oluwatobi", "Sofela", "codesweetly.com"];
console.log(sitioWeb); // "codesweetly.com"En el fragmento de código de arriba, se usaron comas para omiti las variables en la primera y segunda posición del arreglo de desestructuración.
Al hacer esto, es posible enlazar la variable sitioWeb a el tercer índice del arreglo normal al lado derecho del operador de asignación (es decir, "codesweetly.com").
Sin embargo, a veces el valor que se desea extraer de un arreglo es undefined. En ese caso, JavaScript provee una forma de establecer valores por defecto en el arreglo de desestructuración. Veamos más acerca de ello a continuación.
Cómo funcionan los valores por defecto en una asignación mediante desestructuración de arreglos
Establecer un valor por defecto puede ser útil cuando el valor que se desea extraer de un arreglo no existe (o está como undefined).
Aquí se muestra cómo se puede establecer un valor por defecto en un arreglo de desestructuración:
const [nombre = "Tobi", sitioWeb = "CodeSweetly"] = ["Oluwatobi"];
console.log(nombre); // "Oluwatobi"
console.log(sitioWeb); // "CodeSweetly"En el ejemplo de arriba, se estableció "Tobi" y "CodeSweetly" como los valores por defecto de las variables nombre y sitioWeb.
Por lo tanto, en el intento de extracción del primer valor del indice del arreglo del lado derecho, la computadora tomó el valor por defecto "CodeSweetly" debido a que en el arreglo ["Oluwatobi"] sólo existe un valor de índice cero.
Entonces, ¿si quisieras intercambiar el valor de nombre por el de sitioWeb? De nuevo, es posible usar desestructuración de arreglos para hacer el trabajo. Veamos cómo.
Cómo usar desestructuración de arreglos para intercambiar valores entre variables
Puedes usar la asignación mediante desestructuración de arreglos para intercambiar valores de dos o más variables diferentes.
Un ejemplo a continuación:
let nombre = "Oluwatobi";
let sitioWeb = "CodeSweetly";
[nombrenombre, sitioWeb] = [sitioWeb, nombre];
console.log(nombre); // "CodeSweetly"
console.log(sitioWeb); // "Oluwatobi"En el ejemplo de arriba,, se usó desestructuración de arreglos directa para reasignar las variables nombre y sitioWeb por los valores del arreglo del lado derecho del operador de asignación.
Debido a ello, el valor de nombre cambiará de "Oluwatobi" a "CodeSweetly". Mientras que el contenido de sitioWeb cambiará de "CodeSweetly" a "Oluwatobi".
Ten en cuenta que también puede usar ésta técnica para extraer valores de un arreglo normal a parámetros de funciones. Hablemos de ello más abajo.
Cómo usar desestructuración de arreglos para extraer valores de un arreglo como parámetros de una función
Aquí se muestra como se puede usar la desestructuración para extraer un valor de un arreglo como parámetro de una función.
// Definir un arreglo con dos elementos:
const perfil = ["Oluwatobi", "Sofela"];
// Definir una función con un arreglo desestructurado conteniendo dos parámetros:
function obtenerInfoUsuario([nombre, apellido]) {
return `Mi nombre es ${nombre} ${apellido}.`;
}
// Invocar el método obtenerInfoUsuario mientras se le pasa el arreglo perfil como argumento:
obtenerInfoUsuario(perfil);
// La invocación anterior retornará lo siguiente:
"Mi nombre es Oluwatobi Sofela."En el fragmento de código anterior, se usa un arreglo de desestructuración como parámetro para extraer los valores del arreglo perfil y pasar los parámetros nombre y apellido a la función obtenerInfoUsuario.
Nota: Un arreglo de desestructuración como parámetro normalmente se conoce como parámetro de desestructuración.
A continuación otro ejemplo:
// Definir un arreglo con dos valores string y un arreglo anidado:
const perfil = ["codesweetly.com", "Male", ["Oluwatobi", "Sofela"]];
// Definir una función con dos arreglos de desestructuración conteniendo un parámetro cada uno:
function obtenerInfoUsuario([sitioWeb, , [nombreUsuario]]) {
return `${nombreUsuario} maneja ${sitioWeb}`;
}
// Invoke getUserBio while passing the profile array as an argument:
obtenerInfoUsuario(perfil);
// The invocation above will return:
"Oluwatobi maneja codesweetly.com"En el fragmento de código anterior, se usan dos arreglos de desestructuración como parámetros para extraer el valor del arreglo perfil y pasar los parámetros sitioWeb y nombreUsuario a la función obtenerInfoUsuario.
Puede haber ocasiones en que se podría necesitar invocar una función que contiene un parámetro de desestructuración sin pasarle ningún argumento. En ese caso, se necesita usar una técnica que prevenga que el navegador lance un TypeError.
Veamos acerca de ésta técnica a continuación:
Cómo invocar funciones que contienen parámetros de desestructuración sin pasarles algún argumento
Considera la siguiente función:
function obtenerInfoUsuario([nombre]) {
console.log(
"Hacer algo que no requiere un parámetro de desestructuración."
);
return `Mi nombre es ${nombre}.`;
}Ahora, se invoca la función obtenerInfoUsuario sin pasar ningún argumento a su parámetro de desestructuración:
obtenerInfoUsuario();Después de invocar la función arriba, el navegador lanzará un error similar a TypeError: undefined is not iterable.
Este mensaje se lanza porque las funciones que contienen un parámetro de desestructuración esperan que les sea pasado al menos un argumento.
Por lo tanto, se puede evitar estos mensajes de error mediante la asignación de un parámetro por defecto al parámetro de desestructuración.
Aquí un ejemplo:
function obtenerInfoUsuario([nombre] = []) {
console.log(
"Hacer algo que no requiere un parámetro de desestructuración."
);
return `Mi nombres es ${nombre}.`;
}Se debe notar en el fragmento de código anterior que se asignó un arreglo vacío como parámetro de desestructuración por defecto.
Ahora, si se invoca la función sin pasarle argumentos:
obtenerInfoUsuario();La función mostrará como salida:
"Hacer algo que no requiere un parámetro de desestructuración."
"Mi nombre es undefined."Ten en cuenta que no se tiene que usar un arreglo vacío como parámetro de desestructuración por defecto, Puedes usar cualquier otro valor que no sea null o undefined.
Entonces, ahora que sabemos cómo funcionan los arreglos de desestructuración, veamos la desestructuración de objetos para poder ver cuáles son las diferencias.
¿Qué es la desestructuración de objetos en JavaScript?
La desestructuración de objetos es una técnica que permite extraer limpiamente valores de un objeto hacia nuevas variables.
Por ejemplo, sin usar esta técnica, se puede extraer un valor de un objeto en una nueva variable como se muestra aquí:
const perfil = {
nombre: "Oluwatobi",
apellido: "Sofela",
sitioWeb: "codesweetly.com"
};
const nombre = profile.firstName;
const apellido = profile.lastName;
const sitioWeb = profile.website;
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"Se debe notar que el fragmento de código anterior tiene mucho código repetido que no cumple con el principio de codificación DRY (Don’t Repeat Yourself - No Te Repitas).
Veamos cómo la desestructuración hace todo más limpio y DRY.
const perfil = {
nombre: "Oluwatobi",
apellido: "Sofela",
sitioWeb: "codesweetly.com"
};
const { nombre: nombre, apellido: apellido, sitioWeb: sitioWeb } = perfil;
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"Como se puede ver, como por arte de magia, se ha limpiado el código trasladando las tres nuevas variables a propiedades de objeto ({...}) y asignándolas a los valores del objeto perfil.
En otras palabras, se ha instruido a la computadora para que extraiga los valores del objeto perfil a las variables en el lado izquierdo del operador de asignación.
Por lo tanto, JavaScript analizará el objeto perfil y copiará el primer valor ("Oluwatobi") en la primera variable del objeto de desestructuración (firstName).
De la misma forma, la computadora extraerá el segundo valor ("Sofela") del objeto perfil en la segunda variable del objeto de desestructuración (lastName).
Por último, JavaScript copiará el tercer valor ("codesweetly.com") del objeto perfil en la tercera variable del objeto de desestructuración (website).
Se debe tener en cuenta que en { nombre: nombre, apellido: apellido, sitioWeb: sitioWeb}, las claves son referencias a las propiedades del objeto perfil, mientras que los valores de las claves representan las nuevas variables.
Alternativamente, se puede usar una sintaxis abreviada para hacer el código más legible.
He aquí un ejemplo:
const perfil = {
nombre: "Oluwatobi",
apellido: "Sofela",
sitioWeb: "codesweetly.com"
};
const { nombre, apellido, sitioWeb } = perfil;
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"En el fragmento de código anterior, se ha acortado { nombre: nombre, apellido: apellido, sitioWeb: sitioWeb} a { nombre, apellido, sitioWeb}.
Observa que el ejemplo anterior ilustra como asignar un valor de un objeto a una variable cuando la propiedad del objeto y la variable tienen el mismo nombre.
Sin embargo, siempre se puede asignar un valor de una propiedad a una variable con nombre diferente, veamos cómo.
Cómo usar desestructuración de objetos cuando el nombre de la propiedad es diferente del nombre de la variable
JavaScript permite usar desestructuración de objetos para extraer el valor de una propiedad a una variable, incluso cuando los valores de cada uno (propiedad y variable) son diferentes.
Aquí un ejemplo:
const perfil = {
nombre: "Oluwatobi",
apellido: "Sofela",
sitioWeb: "codesweetly.com"
};
const { nombre: primerNombre, apellido: nombreFamiliar, sitioWeb: paginaWeb } = perfil;
console.log(primerNombre); // "Oluwatobi"
console.log(nombreFamiliar); // "Sofela"
console.log(paginaWeb); // "codesweetly.com"
console.log(sitioWeb); // "ReferenceError: website is not defined"En el ejemplo anterior, la computadora extrajo con éxito los valores del objeto perfil y los asignó a las variables nombradas primerNombre, nombreFamiliar y paginaWeb aunque los nombres de las propiedades y variables son diferentes.
Nota: const { nombre: primerNombre } = perfil es equivalente a const primerNombre = perfil.nombre.
Otro ejemplo a continuación:
const perfil = {
apellido: { nombreFamiliar: "Sofela" }
};
const { apellido: { nombreFamiliar: nombreDeFamilia } } = perfil;
console.log(nombreDeFamilia); // "Sofela"En el ejemplo anterior, la computadora extrajo con éxito los valores del objeto perfil y los asignó a las variables nombradas, nombreDeFamilia aunque los nombres de las propiedades y variables son diferentes.
Nota: const { apellido: { nombreFamiliar: nombreDeFamilia } } = perfil is equivalent to const snombreDeFamilia = profile.apellido.nombreFamiliar.
Es de notar que hasta ahora se ha desestructurado el objeto profile mediante su referenciación. Sin embargo también se puede hacer la desestructuración de forma directa. Veamos cómo.
Cómo hacer desestructuración directa de objetos
JavaScript permite hacer desestructuración directa de las propiedades de unos objetos de la siguiente forma:
const { nombre, apellido, sitioWeb } = {
nombre: "Oluwatobi",
apellido: "Sofela",
sitioWeb: "codesweetly.com"
};
console.log(nombre); // "Oluwatobi"
console.log(apellido); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"Supon que prefieres separar la declaración de la variable de sus asignaciones, en tal caso; JavaScript también lo permite. Veamos cómo.
Cómo usar desestructuración de objetos mientras se para la declaración de variables de sus asignaciones
Siempre que se use desestructuración de objetos, JavaScript permite separar las declaraciones de variables de sus asignaciones.
Un ejemplo a continuación:
// Declare three variables:
let nombre, apellido, sitioWeb;
// Extract values to the three variables above:
({ nombre, apellido, sitioWeb } = {
nombre: "Oluwatobi",
apellido: "Sofela",
sitioWeb: "codesweetly.com"
});
// Invoke the three variables:
console.log(nombre); // "Oluwatobi"
console.log(lastName); // "Sofela"
console.log(sitioWeb); // "codesweetly.com"Nota:
- Hay que asegurarse de encajar la asignación de la desestructuración del objeto en paréntesis. Mediante esto, la máquina sabrá que el objeto desestructurado es un objeto literal en vez de un bloque.
- Pon punto y coma (
;) después del paréntesis de una asignación por desestructuración de objeto. Así, se previene que la computadora interprete el paréntesis como un invocador de una función que puede estar en la línea anterior.
¿Y si se quisiera asignar "Oluwatobi" a la variable nombre y el resto de objetos a otra variable? ¿Cómo se puede hacer esto? Averigüemos cómo.
Como usar desestructuración de objetos para asignar el resto de un objeto a una variable.
JavaScript permite usar el operador rest dentro de un objeto de desestructuración para asignar el resto de un objeto literal a una variable.
Aquí un ejemplo:
const { firstName, ...otherInfo } = {
firstName: "Oluwatobi",
lastName: "Sofela",
website: "codesweetly.com"
};
console.log(firstName); // "Oluwatobi"
console.log(otherInfo); // {lastName: "Sofela", website: "codesweetly.com"}Nota: Siempre use el operador rest como el último elemento de su objeto de desestructuración para evitar un error de sintaxis SyntaxError.
A veces, el valor que se desea extraer de una propiedad de un objeto es undefined. En este caso, JavaScript provee una vía para establecer un valor por defecto en el objeto de desestructuración. Aprendamos más acerca de esto más abajo.
Como funcionan los valores por defecto en una asignación por desestructuración de objetos.
Estableciendo un valor por defecto puede ser útil cuando el valor que se desea extraer de un objeto que no existe (o está establecido como undefined).
Aquí se muestra como establecer uno dentro de las propiedades de un objeto de desestructuración:
const { nombre = "Tobi", sitioWeb = "CodeSweetly" } = {
nombre: "Oluwatobi"
};
console.log(nombre); // "Oluwatobi"
console.log(sitioWeb); // "CodeSweetly"En el ejemplo de arriba. se establece "Tobi" y"CodeSweetly" como los valores por defecto de las variables nombre y sitioWeb.
Por lo tanto, en un intento de extraer el segundo valor de la propiedad del lado derecho del objeto, la computadora retornó el valor por defecto "CodeSweetly" porque sólo existe una única propiedad en {nombre: "Oluwatobi"}.
Entonces, si se requiere intercambiar el valor de nombre con sitioWeb? Nuevamente, es posible usar la desestructuración para lograrlo, Observemos cómo.
Como usar la desestructuración para intercambiar valores
Se puede usar la asignación por desestructuración de objetos para intercambiar los valores de dos o más diferentes variables.
Por ejemplo:
let nombre = "Oluwatobi";
let sitioWeb = "CodeSweetly";
({ nombre, sitioWeb } = {nombre: sitioWeb, sitioWeb: nombre});
console.log(nombre); // "CodeSweetly"
console.log(sitioWeb); // "Oluwatobi"El ejemplo anterior usó la desestructuración para reasignar las variables nombre y sitioWeb con los valores del objeto literal a la derecha del operador de asignación.
Como tal, el valor de nombre cambiará de "Oluwatobi" a "CodeSweetly". Mientras el contenido de sitioWeb cambiará de "CodeSweetly" a "Oluwatobi".
Ten en cuenta que puedes usar la desestructuración de objetos para extraer valores de los parámetros de función. Vamos a ver cómo hacerlo.
Como usar desestructuración de objetos para extraer valores de las propiedades de los parámetros de una función
A continuación se muestra como usar desestructuración para copiar los valores de una propiedad a un parámetro de función:
// Define an object with two properties:
const perfil = {
nombre: "Oluwatobi",
apellido: "Sofela",
};
// Define a function with one destructuring object containing two parameters:
function obtenerInfoUsuario({ nombre, apellido }) {
return `Mi nombre es ${nombre} ${apellido}.`;
}
// Invoke getUserBio while passing the profile object as an argument:
obtenerInfoUsuario(profile);
// The invocation above will return:
"Mi nombre es Oluwatobi Sofela."En el ejemplo anterior, se usa un parámetro como objeto de desestructuración para copiar los valores de obtenerInfoUsuario, nombre y apellido.
Nota: Un parámetro de desestructuración de objeto es típicamente llamado un parámetro de desestructuración.
Ahora otro ejemplo:
// Define an object with three-parent properties:
const perfil = {
sitioWeb: "codesweetly.com",
genero: "Male",
nombreCompleto: {
nombre: "Oluwatobi",
apellido: "Sofela"
}
};
// Define a function with two destructuring objects containing a parameter each:
function obtenerInfoUsuario({ sitioWeb, nombreCompleto: { nombre: nombreUsuario } }) {
return `${nombreUsuario} runs ${sitioWeb}`;
}
// Invoke getUserBio while passing the profile object as an argument:
obtenerInfoUsuario(perfil);
// The invocation above will return:
"Oluwatobi runs codesweetly.com"En el fragmento de código anterior, se usó dos parámetros de desestructuración para copiar los valores del objeto perfil en los parámetros sitioWeb and nombreUsuario de la función obtenerInfoUsuario.
Hay ocasiones en las que se podría requerir invocar una función conteniendo un parámetro de desestructuración sin pasarle ningún argumento. En ese caso, es posible que se necesite una técnica que prevenga que el navegador lance un error TypeError.
Veamos cómo se hace a continuación.
Cómo invocar una función que contiene parámetros de desestructuración sin proveerle ningún argumento
Considera la siguiente función:
function obtenerInfoUsuario({ nombre }) {
console.log(
"Haga algo que no necesite el parámetro de desestructuración."
);
return `Mi nombre es ${firstName}.`;
}Ahora, invoquemos la función sin pasarle ningún argumento a su parámetro:
obtenerInfoUsuario();Después de invocar la función obtenerInfoUsuario de arriba, el navegador lanzará un error similar a TypeError: (destructured parameter) is undefined.
El mensaje de error sucede por que las funciones que contienen un parámetro de desestructuración esperan que les sean proveídos al menos un argumento.
Por esto, se puede evitar éste tipo de errores asignando un parámetro por defecto al parámetro de desestructuración.
function obtenerInfoUsuario({ nombre } = {}) {
console.log(
"Haga algo que no necesite el parámetro de desestructuración."
);
return `Mi nombre es ${nombre}.`;
}Nota que en el ejemplo anterior, se asignó un objeto vacío como argumento por defecto del parámetro.
Ahora, se invoca la función sin pasar ningún argumento al parámetro de desestructuración:
obtenerInfoUsuario();La función retornará:
"Hacer algo más que no requiera el parámetro de desestructuración."
"Mi nombres es undefined."Hay que tener en cuenta que no se tiene que usar objeto vacío como el argumento de un parámetro de desestructuración por defecto. Puede usarse cualquier otro valor que no sea null o undefined.
Conclusión
La desestructuración de arreglos y objetos funcionan de similar manera. La principal diferencia entre las dos asignaciones de desestructuración es esta:
- La desestructuración de arreglos extrae valores de un arreglo. Pero la desestructuración de objetos extrae valores de un objeto de JavaScript.
En resumen
Este artículo discute como funciona la desestructuración de arreglos y objetos en JavaScript. También se abordó la principal diferencia entre las dos asignaciones de desestructuración.
Muchas gracias por leer!