Cómo usar la destrucción de objetos en JavaScript

En este tutorial, aprenderemos a usar Desestructuración de objetos en JavaScript ES6 con ejemplos.

Misión de desestructuración es una sintaxis especial introducida en JavaScript ES6 que nos permite extraer múltiples elementos de una matriz u objeto y asignarlos a variables, en una sola declaración.

Lea también: destrucción de mesas

Índice
  1. Desestructuración básica de objetos
  2. Cesión sin declaración
  3. Nombre de la variable
  4. Valores predeterminados
  5. Nombre de propiedad dinámica
  6. Destrucción de objetos anidados
  7. Propiedades de objetos restantes
  8. Operadores de descanso y propagación
  9. Destrucción de la declaración de retorno
  10. Destrucción de argumentos de función
  11. Casos de uso comunes
    1. Al interior for-of lazo
    2. Al interior map Una función
    3. Exportación con nombre
    4. API de consola
    5. Intercambio de variables
    6. elementos HTML
    7. Eventos HTML
    8. Creación de objetos condicionales

Desestructuración básica de objetos

Podemos extraer múltiples propiedades de un Objeto y asignarlos a variables usando Desestructuración de objetos en una sola declaración.

Desestructuración de objetos la sintaxis abreviada es bastante conveniente en comparación con nuestra forma tradicional de asignar propiedades a las variables una por una.

const person = { name: "John", company: "Google", job: "Developer" };

// let name = person.name;            //Traditional Way
// let company = person.company;
// let job = person.job;

const { name, company, job } = person;   //Object Destructuring

También podemos declarar las variables en línea:

const { name, company, job } = { name: "John", company: "Google", job: "Developer" };

Cesión sin declaración

Las variables se pueden declarar sin asignación. Los valores se pueden asignar más tarde usando Desestructuración de objetos así:

const person = { name: "John", company: "Google", job: "Developer" };
let name, company, job;

({ name, company, job } = person);

Tenga en cuenta que los paréntesis ( ... ); alrededor de la declaración de asignación son necesarios cuando se usa una asignación de desestructuración literal de objeto sin declaración.

Nombre de la variable

De forma predeterminada, el nombre de la variable es el mismo que el nombre de la propiedad del objeto que está extrayendo. Siempre podemos cambiar el nombre de la variable a algo más como esto:

const person = { name: "John", company: "Google", job: "Developer" };

const { name: foo, job: bar} = person;

console.log(foo);  //"John"
console.log(bar);  //"Developer"

Tenga en cuenta que ahora podemos acceder a los valores usando foo y bar variable solamente. Si intentamos acceder a los valores usando name y age variables, obtendríamos indefinido Error.

Valores predeterminados

También podemos proporcionar un valor predeterminado a la variable, en caso de que la propiedad del objeto extraído sea indefinido o no existe.

const person = { name: "John", company: "Google", job: "Developer", department: undefined };

const { name = "Bob", department = "NA", age = 21 } = person;

console.log(name);        //"John"
console.log(department);  //"NA"  <- default value since 'undefined'
console.log(age);         //21    <- default value since doesn't exist

También podemos establecer valores por defecto con un nuevo nombre de variable:

const person = { name: "John", company: "Google", job: "Developer", department: undefined };

const { name:foo = "Bob", department:bar = "NA", age:baz = 21 } = person;

console.log(foo);   //"John"
console.log(bar);   //"NA"
console.log(baz);   //21

Nombre de propiedad dinámica

También podemos extraer las propiedades con un nombre dinámico (el nombre de la propiedad se conoce en tiempo de ejecución) así:

const prop = "name";
const person = { name: "John", company: "Google", job: "Developer", department: undefined };

const { [prop]:foo } = person;

console.log(foo);   //"John"

Destrucción de objetos anidados

También podemos realizar anidados Desestructuración de objetos para extraer propiedades de un objeto anidado en niveles más profundos:

const person = {
    name: "John",
    friends : ["Adam", "Bob", "Charlie"],
    hobbies: ["Biking", "Cooking"],    
    location: {
        country: "USA", 
        city: "NY" 
    }, 
};
const { name, friends, hobbies : [firstHobby, secondHobby], location: { country, city } } = person;

console.log(name);         //"John"
console.log(friends);      //["Adam", "Bob", "Charlie"]
console.log(firstHobby);   //"Biking"
console.log(secondHobby);  //"Cooking"
console.log(country);      //"USA"
console.log(city);         //"NY"

Propiedades de objetos restantes

los operador de descanso ... se puede utilizar para extraer las propiedades restantes a una nueva variable que aún no han sido extraídas por el Desestructuración de objetos.

const person = {name: "John", company: "Google", job: "Developer", friends : ["Adam", "Bob", "Charlie"]};

const {name, friends, ...others} = person;

console.log(name);     //"John"
console.log(friends);  //["Adam", "Bob", "Charlie"]
console.log(others);   //{company: "Google", job: "Developer"}

Operadores de descanso y propagación

A menudo nos confundimos con el operador Descanso y Extensión porque ambos usan el mismo ... sintaxis. Los operadores Rest y Spread se pueden usar juntos en Desestructuración de objetos declaración:

  • Operador de descanso: Usado en el la izquierda lado de la declaración a obtener las propiedades restantes de un objeto
  • Operador de transmisión: Usado en el correcto lado de la declaración a copiar propiedades a un objeto
const primaryDetails = {name: "John", company: "Google", job: "Developer"}
const otherDetails = {friends: ["Adam", "Bob", "Charlie"], hobbies: ["Biking", "Cooking"]};

      // Rest operator                      // Spread Operator
const {name, company, hobbies, ...others} = {...primaryDetails, ...otherDetails};

console.log(name);      //"John"
console.log(company);   //"Google"
console.log(hobbies);   //["Biking", "Cooking"]
console.log(others);    //{job: "Developer", friends: ["Adam", "Bob", "Charlie"]}

Destrucción de la declaración de retorno

Podemos extraer datos de un objeto devuelto por una función usando Desestructuración de objetos de esta manera:

function getPersonDetails() {
    return {name: "John", company: "Google", job: "Developer"};
} 

const {name, ...others} = getPersonDetails();

console.log(name);    //"John"
console.log(others);  //{company: "Google", job: "Developer"}

Destrucción de argumentos de función

Incluso podemos pasar un objeto a una función y luego extraer solo las propiedades que queremos usando Desestructuración de objetos de esta manera:

const person = { name: "John", company: "Google", job: "Developer" };

function getPersonDetails({name, ...others }) {
  console.log(name);    //"John"
  console.log(others);  //{company: "Google", job: "Developer"}
}

getPersonDetails(person);

También podemos establecer valores predeterminados para argumentos de función como este:

const person = { name: "John", company: "Google", job: "Developer" };

function getPersonDetails({name, department = "NA" }) {
  console.log(name);        //"John"
  console.log(department);  //"NA"
}

getPersonDetails(person);

Casos de uso comunes

Al escribir código, intente usar Desestructuración de objetos donde sea posible. Algunos de los casos de uso comunes que he encontrado son:

Al interior for-of lazo

Nosotros podemos usar Desestructuración de objetos al interior for-of bucle como este:

const users = [{ name: "John", company: "Google", job: "Developer" }, 
    { name: "Adam", company: "Microsoft", job: "Analyst" },
    { name: "Bob", company: "Yahoo", job: "Data Scientist" }];

for (let {name, company} of users) {
  console.log(name, company);
}
// John Google
// Adam Microsoft
// Bob Yahoo

Al interior map Una función

Nosotros podemos usar Desestructuración de objetos al interior map trabajar de esta manera:

const users = [{ name: "John", company: "Google", job: "Developer" }, 
    { name: "Adam", company: "Microsoft", job: "Analyst" },
    { name: "Bob", company: "Yahoo", job: "Data Scientist" }];

const userNames = users.map(({ name }) => name);

console.log(userNames);
//["John", "Adam", "Bob"]

Exportación con nombre

Podemos elegir qué exportar del módulo usando Desestructuración de objetosy importar palabra clave. Si has trabajado con Angular, React o cualquier otro framework JavaScript. Es posible que hayas conocido Exportación con nombre así:

import React, { Component } from 'React';
// Old way
import React from 'React';
class MyComponent extends React.Component{}

// New way
import React, { Component } from 'React';
class MyComponent extends Component{}

Lo mismo se aplica a cualquier otro paquete que importemos, solo podemos elegir las funciones que queremos y usarlas de forma independiente.

import { isEmail, isCreditCard } from 'validator';

console.log(isEmail('my@email.com')); // true

API de consola

Podemos deconstruir las funciones del objeto API de la consola:

const { log, warn, error } = console;

log('Hello World!');            // equivalent to console.log('...');
warn('Watch out!');             // console.warn('...');
error('Something went wrong!'); // console.error('...');

Intercambio de variables

Curiosamente, podemos intercambiar variables usando Desestructuración de objetos

let a = "a";
let b = "b";
[b, a] = [a, b];

console.log(a);  // b
console.log(b);  // a

elementos HTML

Podemos deconstruir las propiedades de elementos HTML así:

const { value } = document.querySelector('input');

De esta manera es mucho más fácil conseguir una evaluar propiedad de un elemento de entrada, al igual que obtener una propiedad deshabilitada de un elemento de botón.

const { disabled } = document.querySelector('button');

Eventos HTML

manipular Eventos HTML usando argumentos de función de desestructuración como este:

<input type="text" onchange="handleChange(event)"/>

Ahora extraeremos un objetivo objeto de un un evento objeto y luego extraer un evaluar propiedad de destino:

// #1
function handleChange(event) {
  const { value } = event.target;
  console.log(value);
}

// # 2
function handleChange({ target }) {
  const { value } = target;
  console.log(value);
}

// # 3
function handleChange({ target: { value } }) {
  console.log(value);
}

Creación de objetos condicionales

También podemos crear un objeto en tiempo de ejecución basado en las condiciones usando Desestructuración de objetos

const isEmployed = true;
const friends = ["Adam", "Bob", "Charlie"];
const hobbies = null;
const user = { 
  name: "John", 
  ...(isEmployed && {
    company: "Google", 
    job: "Developer"
  }),
  ...(friends && {friends}),
  ...(hobbies && {hobbies})
};

console.log(user);
// prints {name: "John", company: "Google", job: "Developer", friends: ["Adam", "Bob", "Charlie"]}

Si quieres conocer otros artículos parecidos a Cómo usar la destrucción de objetos en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas