Destructor de JavaScript

1. Usar la desestructuración con objetos
2. Utilice la desestructuración con matrices
3. Use la desestructuración con arreglos y objetos simultáneamente
4. Conclusión

Este artículo se centra principalmente en la desestructuración de JavaScript, una de las mejores y más útiles características de ES6. La desestructuración es una declaración de JavaScript que permite desempaquetar elementos de matriz o propiedades de objetos en variables separadas, matrices, objetos, objetos anidados y asignaciones a variables que permiten toda la extracción de datos.

Al mismo tiempo, veremos algunos ejemplos y veremos cómo usar la desestructuración para arreglos, objetos y ambos.

Usar la desestructuración con objetos

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

El objeto empleado en el código JS mencionado anteriormente es visible. En el lado derecho, este empleado tiene propiedades básicas como id, nombre, edad y departamento. Se muestra una consola con algunos datos.

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

const name = employee.name;
const age = employee.age;

console.log(name);
console.log(age);

Entonces, primero veremos cómo podemos usar la desestructuración con objetos.

Si queremos acceder a la propiedad de este empleado, ¿qué debemos hacer? Podemos escribir un nombre; cambia el empleado.nombre.

Cambia a empleado.edad si queremos acceder a la edad.

Supongamos que imprimimos el nombre y la edad en la consola con console.log(name); y console.log(edad);. Si ejecutamos el código, puede ver que obtenemos el nombre y la edad combinados en la salida.

Aquí puede ver que hemos hecho lo mismo repetidamente. Hemos repetido dos veces el nombre, dos veces la edad y los empleados.

Pero ES6 le brinda algunas de las mejores funciones para desestructurar tareas cuando no necesita repetirse porque se puede hacer con una sintaxis pequeña y de manera concisa.

Veamos cómo podemos cumplir esta tarea con la desestructuración. En primer lugar, escribimos una variable.

Aquí, esta constante es igual al empleado.

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

//const name = employee.name;
//const age = employee.age;

const { name, age } = employee;

console.log(name);
console.log(age);

Pero en el lado izquierdo, creamos una sintaxis de objetos y luego podemos escribir los nombres de las propiedades a las que queremos acceder desde el objeto empleado. Entonces, también queremos acceder al nombre y la edad.

Cuando ejecutamos el código anterior, aún recibimos la misma salida o resultado.

Aquí, no estamos repitiendo empleado.nombre o empleado.edad. Solo estamos usando esos nombres de propiedad directamente.

También podemos hacer una cosa más si no desea utilizar el nombre como propiedad y desea dar cualquier otro nombre.

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

//const name = employee.name;
//const age = employee.age;

const { name: fullName, age } = employee;

console.log(fullName);
console.log(age);

Luego, podemos escribir dos puntos y usar fullName, y seguiremos obteniendo el mismo resultado. Y una cosa genial de esta desestructuración es que puede usar el parámetro predeterminado aquí.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

// const name = employee.name;
// const age = employee.age;

const {name: fullName = 'Lora Noah ', age} = employee;

console.log(fullName);
console.log(age);

Supongamos que queremos usar un parámetro predeterminado de Lora Noah. Puede ver que ahora hemos utilizado el parámetro predeterminado.

Veamos este objeto empleado que no contiene el nombre de la propiedad. En ese caso, utilizará el valor predeterminado, Lora Noah.

Supongamos que queremos desestructurar un objeto anidado como el empleado. Tenemos que saber la ciudad donde reside el empleado en particular y agregar a la dirección que conocemos actualmente.

Entonces, también podemos hacer eso. Necesitamos tener una dirección primero.

Si consolamos esta dirección, nos da un objeto. Intentemos ejecutar el código.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

// const name = employee.name;
// const age = employee.age;

const {address} = employee;

console.log(address);

La salida se recibirá como la que se muestra a continuación. Pero solo queremos la ciudad de eso.

No queremos el objeto completo aquí porque podemos cambiarlo. ¿Qué podemos desestructurar? Podemos escribir sobre la ciudad.

Elimine la dirección y luego use la ciudad para la consola.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

// const name = employee.name;
// const age = employee.age;

const {address: {city}} = employee;

console.log(city);

Aquí está la salida que obtenemos.

Luego, obtenemos Colombo como salida cuando puede usar la desestructuración en funciones. La función que creamos debería llamarse displayEmployee.

Esa función toma un empleado y luego necesita console.log(). Usamos un literal de cadena para la consola.

Escribimos el nombre del empleado como ${nombre}, y la edad es ${edad}; para la consola

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(employee) {
  console.log(`The employee name is ${name} and age is ${age}`);
}

displayEmployee(employee);

Si queremos imprimir esos nombres y, por lo general, ¿qué hacer? El employee.name y employee.age de la consola.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(employee) {
  console.log(
      `The employee name is ${employee.name} and age is ${employee.age}`);
}

displayEmployee(employee);

En esta ejecución de código, puede ver que obtenemos el employee.name como indefinido.

Es por eso que eliminamos la propiedad nombre del objeto de un empleado. Ahora, podemos obtener el nombre John y la edad 24.

El código y el resultado esperado después de ejecutar el código se muestran a continuación.

// object
const employee = {
  id: 001,
  name: 'John',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(employee) {
  console.log(
      `The employee name is ${employee.name} and age is ${employee.age}`);
}

displayEmployee(employee);

Producción:

Pero también podemos hacer la desestructuración de la función; por lo tanto, requerimos de la edad para desestructurar esta función. Necesitamos tener el nombre.

No necesita mantener ninguna secuencia aquí. Si se explica con otras palabras, se puede escribir el nombre y la edad.

Como no hay un orden establecido, podemos modificarlo según sea necesario.

// object
const employee = {
  id: 001,
  name: 'John',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(age, name) {
  console.log(
      `The employee name is ${employee.name} and age is ${employee.age}`);
}

displayEmployee(employee);

Si ejecutamos este código, aún obtendremos el mismo resultado.

Utilice la desestructuración con matrices

Tenemos que crear una matriz. Queremos tener acceso a cualquiera de los valores de la matriz.

Las palabras manzana, mango, plátano y piña se escriben en matriz. Usamos la variable frutas para representar esa matriz.

El primer elemento, manzana, se escribe en el índice 0, y el segundo elemento, mango, se usa en el índice 1.

Y mostramos console.log(apple) y console.log(mango).

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

const apple = fruits[0];
const mango = fruits[1];

console.log(apple);
console.log(mango);

La salida se muestra a continuación.

Obtenemos manzana y mango como resultado. Pero si queremos desestructurar la matriz, lo ponemos por escrito.

Para desestructurar matrices, esta constante se configurará para que sea similar a la matriz de frutas.

Aquí, se requiere una matriz y los valores se utilizan para la matriz. Si ingresamos fruta1 y fruta2, la manzana del primer índice será la salida.

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

// const apple = fruits[0];
// const mango = fruits[1];

const [fruit1, fruit2] = fruits;

console.log(fruit1);
console.log(fruit2);

Por tanto, a la manzana se le asignará el valor de fruta1, y al mango se le puede asignar el valor de fruta2. El término fruta1 anterior se relaciona con el primer valor de la matriz.

El segundo valor de la matriz se llama fruta2. que es el segundo valor de la matriz, mango.

Si desea omitir el mango, necesita el tercer valor, plátano. Ejecutaremos así un vacío.

No tendremos ninguna referencia, entonces salta el segundo valor de la matriz. Nos da el tercer valor.

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

// const apple = fruits[0];
// const mango = fruits[1];

const [fruit1, , fruit2] = fruits;

console.log(fruit1);
console.log(fruit2);

Luego, podemos obtener “manzana” y “plátano” como salida.

Use el operador Rest para desestructurar con arreglos

También puede usar el operador de descanso para desestructurar. El operador resto se puede usar si desea los primeros tres elementos de la matriz y los valores restantes.

Podemos ingresar el operador resto y ejecutar un console.log() para obtener la matriz restante que contiene piña.

En el código, podemos ver el comportamiento del operador.

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

// const apple = fruits[0];
// const mango = fruits[1];

const [fruit1, , fruit2, ...rest] = fruits;

console.log(fruit1);
console.log(fruit2);
console.log(rest);

Esta es la salida.

Así es como harás la parte de desestructuración en las matrices.

Use la desestructuración con arreglos y objetos simultáneamente

En primer lugar, podemos escribir una matriz y un objeto. Esta variedad de comestibles se puede ver en el siguiente código.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];


console.log(groceryList[0].item);

Si quieres acceder a Apples, normalmente harás un console.log(groceryList[0].item);. Entonces puedes ver las manzanas como salida.

Usando la desestructuración, podemos escribir esto. Escribimos constante y escribimos manzanas en él.

Estas manzanas serán iguales a la lista de comestibles. Primero, tenemos una matriz si queremos pasar por el primer elemento de la matriz.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [apple] = groceryList;
console.log(apple);

Aquí está la salida.

La matriz está completa aquí, pero el objeto no es necesario. Solo queremos el elemento en el objeto para desestructurarlo.

Si desestructuramos el objeto, siempre se toma con la propiedad. Y no hay propiedad como la manzana.

Por lo tanto, necesitamos asignar la propiedad de esta manera. Mira el código de abajo.

Puedes probar diferentes componentes para la variable como la manzana. Pero si lo usa directamente como elemento, puede escribirlo.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [{item}] = groceryList;
console.log(item);

La salida dice Apples.

Si desea que la salida sea Tomates, omita los primeros dos pasos y luego no hay nada de qué preocuparse. Puede ver los Tomates en la matriz como el tercero.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [, , {item}] = groceryList;
console.log(item);

Esta es la salida del fragmento de código implementado anteriormente.

Supongamos que también queremos los otros artículos después de recibir los Tomates. Para hacer eso, debemos aplicar el mismo operador de descanso y agregar un console.log() a la consola.

Una vez que tengamos eso, podemos recuperar la matriz restante de objetos.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [, , {item}, ...rest] = groceryList;
console.log(item);
console.log(rest);

La salida se puede ver a continuación.

Así de poderosa es la desestructuración. Examinemos una ilustración de un enfoque diferente donde un objeto contiene una matriz.

Queremos elegir la ubicación Singapur. Entonces, para obtener la ubicación de Singapur, podemos hacer console.log(company.(ubicaciones[0])).

// Array and Object
const company = {
  name: 'Google',
  locations: ['Singapore', 'India', 'Germany'],
};

console.log(company.locations[0]);

Podemos obtener el valor/salida como Singapur. Véalo a continuación.

Queremos lograr esto usando la desestructuración. Podemos escribir una constante que sea igual al objeto que es una empresa.

Para desestructurar un objeto, usamos llaves. Entre llaves, usamos el nombre de la propiedad como ubicación.

Desde las ubicaciones, debemos acceder al primer valor del índice 0. Por lo tanto, podemos escribir una matriz aquí y usar loc para la ubicación.

// Array and Object
const company = {
  name: 'Google',
  locations: ['Singapore', 'India', 'Germany'],
};

const {
  locations: [loc],
} = company;
console.log(loc);

Y queremos imprimir este loc; por lo tanto, usamos console.log(loc). Entonces, podemos obtener Singapur como salida.

Supongamos que queremos el resultado como India; por lo tanto, nos saltamos el primer valor. Luego, podemos obtener la salida de ese valor (India).

// Array and Object
const company = {
  name: 'Google',
  locations: ['Singapore', 'India', 'Germany'],
};

const {
  locations: [, loc],
} = company;
console.log(loc);

Aquí puedes ver la salida.

Existe el último caso de uso en el que discutimos la desestructuración. Aquí, usamos una constante como nuevos Usuarios.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];

Estos Usuarios tienen matrices anidadas. Si queremos que el resultado sea el siguiente, podemos ver cuál contiene los objetos y dentro del objeto.

Queremos un par clave-valor: firstName como John y lastName como Oliver. Usando la desestructuración, podemos hacerlo muy fácilmente.

Aquí usamos una función de matriz de orden superior, que es el mapa. Entonces, creamos una constante con el objeto Usuarios, que toma los Usuarios.

Te dará el primer usuario. Con el primer usuario, puede devolver el objeto que desee; aquí, haremos firstName.

Este nombre será igual al índice de usuario de cero, y luego para el apellido, hará un índice de usuario de 1.

Después de esa consola, el objeto Usuarios utilizando console.log(UsersObj);.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];
const UserObj = Users.map((User) => {
    return { firstName: User[0], lastName: User[1] };
});

console.log(UserObj);

Aquí, obtenemos el nombre y el apellido de los tres objetos.

En cuanto a la desestructuración, ¿qué podemos hacer aquí? Desde la matriz, podemos asignar el primer valor como firstName y el segundo valor como lastName.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];
const UserObj = Users.map(([firstName, lastName]) => {
    return { firstName: firstName, lastName: lastName };
});

console.log(UserObj);

Aquí también, el mismo resultado viene como la salida anterior.

Pero podemos hacer una cosa más ya que ES6 tiene literales de objetos mejorados. Podemos hacer eso para la clave, y el valor es el mismo.

Podemos quitarlo. Sin embargo, con lo que quedó, aún podemos obtener los mismos resultados.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];
const UserObj = Users.map(([firstName, lastName]) => {
    return { firstName, lastName };
});

console.log(UserObj);

Así es como podemos usar la desestructuración.

Conclusión

En este artículo, hemos discutido qué es la desestructuración y cómo realizarla en JavaScript. Es útil cuando trabajas con lenguajes como React.

Incluso si no trabaja con React, aún puede escribir código limpio.