La asignación de desestructuración es una característica interesante que vino junto con ES6. La desestructuración es una expresión de JavaScript que permite descomprimir valores de matrices o propiedades de objetos en variables distintas. Es decir, podemos extraer datos de matrices y objetos y asignarlos a variables.
¿Por qué es esto necesario?
Imagina que queremos extraer datos de una matriz. Anteriormente, ¿cómo se haría esto?
let introduction = ["Hello", "I" , "am", "Sarah"]; let greeting = introduction[0]; let name = introduction[3]; console.log(greeting);//"Hello" console.log(name);//"Sarah" Podemos ver que cuando queremos extraer datos de una matriz, tenemos que hacer lo mismo una y otra vez.
La asignación de desestructuración de ES6 facilita la extracción de estos datos. ¿Cómo es esto así? Primero, discutiremos la asignación de desestructuración con matrices. Luego pasaremos a la desestructuración de objetos.
Empecemos.
Desestructuración básica de matrices
Si queremos extraer datos de matrices, es bastante sencillo usar la asignación de desestructuración.
Consultemos nuestro primer ejemplo de matrices. En lugar de pasar por ese proceso repetitivo, haríamos esto:
let introduction = ["Hello", "I" , "am", "Sarah"]; let [greeting, pronoun] = introduction; console.log(greeting);//"Hello" console.log(pronoun);//"I" También podemos hacer esto con el mismo resultado.
let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I"Declaración de variables antes de la asignación
Las variables se pueden declarar antes de ser asignadas así:
let greeting, pronoun; [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I" Observe que las variables se establecen de izquierda a derecha. Entonces, la primera variable obtiene el primer elemento de la matriz, la segunda variable obtiene la segunda variable de la matriz, y así sucesivamente.
Omitir elementos en una matriz
¿Qué pasa si queremos obtener el primer y último elemento de nuestra matriz en lugar del primer y segundo elemento, y queremos asignar solo dos variables? Esto también se puede hacer. Mira el ejemplo de abajo:
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" ¿Lo que acaba de suceder?
Mire la matriz en el lado izquierdo de la asignación de variable. Observe que en lugar de tener solo una coma, tenemos tres. El separador de coma se utiliza para omitir valores en una matriz. Entonces, si desea omitir un elemento en una matriz, simplemente use una coma.
Hagamos otro. Saltemos el primer y tercer elemento de la lista. ¿Cómo haríamos esto?
let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(pronoun);//"I" console.log(name);//"Sarah" Entonces, el separador de comas hace la magia. Entonces, si queremos omitir todos los elementos, simplemente hacemos esto:
let [,,,,] = ["Hello", "I" , "am", "Sarah"]; Asignar el resto de una matriz
¿Qué pasa si queremos asignar parte de la matriz a variables y el resto de los elementos de una matriz a una variable en particular? En ese caso, haríamos esto:
let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(intro);//["I", "am", "Sarah"] Con este patrón, puede descomprimir y asignar la parte restante de una matriz a una variable.
Desestructuración de la asignación con funciones
También podemos extraer datos de una matriz devuelta por una función. Digamos que tenemos una función que devuelve una matriz como el ejemplo siguiente:
function getArray() { return ["Hello", "I" , "am", "Sarah"]; } let [greeting,pronoun] = getArray(); console.log(greeting);//"Hello" console.log(pronoun);//"I" Obtenemos los mismos resultados.
Usar valores predeterminados
Los valores predeterminados se pueden asignar a las variables en caso de que el valor extraído de la matriz sea undefined:
let [greeting = "hi",name = "Sarah"] = ["hello"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" Entonces namevuelve a "Sarah" porque no está definido en la matriz.
Intercambio de valores mediante la asignación de desestructuración
Una cosa más. Podemos usar la asignación de desestructuración para intercambiar los valores de las variables:
let a = 3; let b = 6; [a,b] = [b,a]; console.log(a);//6 console.log(b);//3 A continuación, pasemos a la Desestructuración de objetos.
Desestructuración de objetos
Primero, veamos por qué es necesaria la desestructuración de objetos.
Digamos que queremos extraer datos de un objeto y asignarlos a nuevas variables. Antes de ES6, ¿cómo se haría esto?
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name = person.name; let country = person.country; let job = person.job; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" Vea lo tedioso que es extraer todos los datos. Tenemos que hacer lo mismo repetidamente. La desestructuración de ES6 realmente salva el día. Saltemos directamente a eso.
Desestructuración básica de objetos
Repitamos el ejemplo anterior con ES6. En lugar de asignar valores uno por uno, podemos usar el objeto de la izquierda para extraer los datos:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, country, job} = person; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" Obtendrá los mismos resultados. También es válido asignar variables a un objeto que no ha sido declarado:
let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" Variables declaradas antes de ser asignadas
Las variables en los objetos se pueden declarar antes de asignarles la desestructuración. Probemos eso:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job; {name, country, job} = person; console.log(name);// Error : "Unexpected tokenSarah", country: "Nigeria", job: "Developer"}; let name, country, job; ({name, country, job} = person); console.log(name);//"Sarah" console.log(job);//"Developer" También es importante tener en cuenta que al utilizar esta sintaxis, ()debe ir precedido de un punto y coma. De lo contrario, podría usarse para ejecutar una función de la línea anterior.
Tenga en cuenta que las variables en el objeto del lado izquierdo deben tener el mismo nombre que una clave de propiedad en el objeto person. Si los nombres son diferentes, obtendremos undefined:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, friends, job} = person; console.log(name);//"Sarah" console.log(friends);//undefined Pero si queremos usar un nuevo nombre de variable, bueno, podemos.
Usando un nuevo nombre de variable
Si queremos asignar valores de un objeto a una nueva variable en lugar de usar el nombre de la propiedad, podemos hacer esto:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name: foo, job: bar} = person; console.log(foo);//"Sarah" console.log(bar);//"Developer" Entonces, los valores extraídos se pasan a las nuevas variables fooy bar.
Usar valores predeterminados
Los valores predeterminados también se pueden usar en la desestructuración de objetos, en caso de que una variable esté undefineden un objeto del que quiera extraer datos:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name = "myName", friend = "Annie"} = person; console.log(name);//"Sarah" console.log(friend);//"Annie" Entonces, si el valor no está indefinido, la variable almacena el valor extraído del objeto como en el caso de name. De lo contrario, utilizó el valor predeterminado como lo hizo para friend.
También podemos establecer valores predeterminados cuando asignamos valores a una nueva variable:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name:foo = "myName", friend: bar = "Annie"} = person; console.log(foo);//"Sarah" console.log(bar);//"Annie" Entonces namese extrajo persony se asignó a una variable diferente. friend, por otro lado, estaba undefineden person, por lo que a la nueva variable bar se le asignó el valor predeterminado.
Nombre de propiedad calculado
El nombre de propiedad calculado es otra característica literal de objeto que también funciona para la desestructuración. Puede especificar el nombre de una propiedad a través de una expresión si lo pone entre corchetes:
let prop = "name"; let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(foo);//"Sarah" Combinando matrices con objetos
Las matrices también se pueden usar con objetos en la desestructuración de objetos:
let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]}; let {name:foo, friends: bar} = person; console.log(foo);//"Sarah" console.log(bar);//["Annie", "Becky"] Anidamiento en la desestructuración de objetos
Los objetos también se pueden anidar al desestructurar:
let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"] }; let {name:foo, place: { country : bar, city : x} } = person; console.log(foo);//"Sarah" console.log(bar);//"Nigeria" Descansar en la Desestructuración de Objetos
The rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied into a new object:
let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]}; let {name, friends, ...others} = person; console.log(name);//"Sarah" console.log(friends);//["Annie", "Becky"] console.log(others);// {country: "Nigeria", job: "Developer"} Here, the remaining properties whose keys where not part of the variable names listed were assigned to the variable others. The rest syntax here is ...others. others can be renamed to whatever variable you want.
One last thing – let's see how Object Destructing can be used in functions.
Object Destructuring and Functions
Object Destructuring can be used to assign parameters to functions:
function person({name: x, job: y} = {}) { console.log(x); } person({name: "Michelle"});//"Michelle" person();//undefined person(friend);//Error : friend is not defined Notice the {} on the right hand side of the parameters object. It makes it possible for us to call the function without passing any arguments. That is why we got undefined. If we remove it, we'll get an error message.
We can also assign default values to the parameters:
function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x); } person({name});//"Sarah" We can do a whole lot of things with Array and Object Destructuring as we have seen in the examples above.
Thank you for reading. :)