Destructuring assignment - toviddfrei/javascript GitHub Wiki

Vale, hace unos párrafos antes hemos hablado de las variables, creo que incluso fui algo cansino, por lo tanto, lo damos como repasado, ahora nos llega un nuevo término, un nuevo concepto, deconstrucción, a primera oída y por supuesto a primera vista, me suena a lo opuesto de construir, por lo tanto, a desmontar, incluso derruir. Yo diría que no voy desencaminado, veremos que nos trae esta nueva herramienta, solo por encima lo que he visto es para enamorarse, no se si tendré bastantes estantes en mi mesa de herramientas. Bueno, nos ponemos con esto.

Entonces, si sabemos que una variable, guarda datos en un espacio de memoria, que hace el término deconstrucción junto a la variable. Las variables construyen la aplicación, creo que va por ahí, deconstruir es un concepto muy poderoso, consideremos que nos ofrecen una matriz con todos los datos que tienen que contener las variables que vamos a utilizar para crear una aplicación, si tenemos que extraer una por una, sería tediosa, si nos ofrecen una forma una sintaxis para realizar este proceso, y reitero en JavaScript debemos estar muy atentos, más cuando debemos recordar qué, JavaScript no permite la asignación masiva, o sea declarar y asignar variables masivamente, hay que realizarlo a mano o... con nuestro nuevo amigo, decons... nos muestras como eres.

const objetoconvalores = [
    'valor1',
    'valor2',
    'valor3'
]

const [variable1,variable2,variable3] = objetoconvalores;
console.log(variable1);
console.log(variable2);
console.log(variable3);

Podemos apreciar que la sintaxis de corchetes para declarar y asignar los valores que contiene la matriz, nos permite la asignación masiva de valores a esas variables.

Otra de las operaciones que realiza perfectamente la deconstrucción es el intercambio de valores, en otros lenguajes cuando nos topemos con algo como por ejemplo, ordéname esta lista de elementos y tengas que utilizar variables temporales para ir trasladando los valores, recordarás con cariño este concepto seguro. Vemos lo bonito que resulta el intercambio, situémonos variable uno, quiero que intercambie el valor con la variable dos.

let numeroprimero = 1;
let numerosegundo = 'dos';

console.log(numeroprimero);
console.log(numerosegundo);

[numeroprimero, numerosegundo] = [numerosegundo, numeroprimero]; // Con esta linea decosnstruyendo las variables realizamos la operación.

console.log(numeroprimero);
console.log(numerosegundo);

Se aprecia el intercambio, no solo de valor, sino de tipo también, es fabuloso, sin necesidad de guardar valores temporalmente, simple, rápido. Espectacular, la sintaxis de corchetes que nos permite JavaScript aplicando el concepto deconstrucción es impresionante, y nos quedan algunas cosillas más... Seguimos y nos divertimos un poco, creamos un interruptor de usuarios.

let userplayerone = 'active';
let userplayertwo = 'pasive';

function changeuserplay(){
    [ userplayerone, userplayertwo ] = [ userplayertwo, userplayerone ];
    console.log('El usuario userplayertwo : ', userplayertwo);
}

function pushchangeuser(option){
    if(option === 1){
        changeuserplay();
    }else{
        console.log('El usuario userplayerone : ', userplayerone);
    }
}

pushchangeuser(1);
console.log('userplayerone : ' + userplayerone);
console.log('userplayertwo : ' + userplayertwo);

Vemos que el concepto deconstrucción es amplísimo y lo podemos llevar a muchos rincones de nuestro código, posiblemente nos acompañe por los retos, es bueno que este pegado a nuestros dedos lo antes posible. Y quiero terminar esta pregunta presentada la forma de aplicar este concepto de deconstrucción directamente a nuestros objetos, ya sean que tengamos creados, que recibamos como contestación a una base de datos o una API, interactuar directamente con nuestros objetos a través de una sintaxis como la deconstrucción nos permite profundizar en el objeto directamente, tomar sus atributos y traerlos a otros ámbitos, pasar completamente un objeto a una función e inter operar con él. Es parte importante de nuestro trabajo y es bueno que profundice el concepto, veamos en la realidad como trabajaríamos.

const objetorecibido = {
    
    id: '1231516164564516564646413131d1af6dfafagafgagfa',
    nameobject: 'API con modulo lunar',
    mensageapi: 'Conexión correcta',
    errorapi: 'Fallo de conexión'
}

console.log(objetorecibido.id);
console.log(objetorecibido);

const analizarobjeto = ({nameobject, mensageapi, errorapi}) => {
    console.log(objetorecibido);
    objetorecibido.id = "Aqui no"; // Desde aqui no modificamos objeto anterior
    objetorecibido.claro = 100;
    if(nameobject){
        objetorecibido.id = "Aqui tampoco"; // Desde aqui no modificamos objeto anterior
        console.log(nameobject);
    }

}

objetorecibido.id = "Aqui si"; // Esta forma si es viable
objetorecibido.nuevo = "Aqui es si"; // Esta forma si es viable

console.log(objetorecibido.id);
console.log(objetorecibido);

/*output
1231516164564516564646413131d1af6dfafagafgagfa
{
  id: '1231516164564516564646413131d1af6dfafagafgagfa',
  nameobject: 'API con modulo lunar',
  mensageapi: 'Conexión correcta',
  errorapi: 'Fallo de conexión'
}
Aqui si
{
  id: 'Aqui si',
  nameobject: 'API con modulo lunar',
  mensageapi: 'Conexión correcta',
  errorapi: 'Fallo de conexión',
  nuevo: 'Aqui es si'
}
*/

Creo que tras las anotaciones y los retornos, lo que pretendía que viéramos lo tenemos, trabajar con objetos, es bajo mi criterio, muy divertido, me imagino que como todos, necesitamos un periodo de adaptación, adquirir experiencia, sufrir fallos y dolores de cabeza, buscando soluciones a problemas que nos planteemos, me hago pesado en esto, es momento de probar, romper, testear, aprender. Ánimo.