ES6: asignación de desestructuración

Otro truco para acceder a otros elementos de un arreglo que no sean los primeros es utilizar comas para saltar los lugares:

// arrays destructuring
let fruits = ['Apple', 'Banana', 'Orange'];
let [,,fruit] = fruits;

console.log(fruit); /*arroja "Orange"*/

Hola Chic@s
ES6

• Asignación de desestructuración

// arrays destructuring

let fruits = ["Apple", "Banana"];
let [a, b] = fruits;
// Opcion 1
console.log(a, b);
// Opcion 2
console.log(a, fruits[1]);

// Object destructuring

let user = { username: "Alexa", age: 34 };
let { username, age } = user;
// Opcion 1
console.log(username, age);
// Opcion 2
console.log(username, user.age);

Resumen!
Asignación de Desestructuración
la Desestructuración permite desarmar objetos y asignarle a cada elemento una variable distinta
ejemplo:

Asignación de Desestructuración
la Desestructuración permite desarmar objetos y asignarle a cada elemento una variable distinta
ejemplo:

DESESTRUCTURACIÓN DE ARRAYS

let frutas = ['Manzana', 'Pera'];
let [roja, verde] = frutas;
console.log(roja, verde);

DESESTRUCTURACIÓN DE OBJETOS

let user = { username: 'Julian', age:28 };
let { usuario , edad } = user;
console.log (usuario, edad);

otro ejemplo que encontre en Mozzilla:

let a, b, rest;

[a, b] = [10, 20];

//console.log

console.log(a);

// output esperado: 10

console.log(b);

// output esperado: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);

// expected output: Array [30,40,50]

Otra ejemplo de una manera practica de acceder a los atributos que nos interesan:

// For of iteration and destructuring
const people = [
    {
      name: 'Mike Smith',
      family: {
        mother: 'Jane Smith',
        father: 'Harry Smith',
        sister: 'Samantha Smith',
      },
      age: 35,
    },
];
  
for (const { name: n, family: { father: f } } of people) {
    console.log(`Name: ${n}, Father: ${f}`);
}

De los mejores features que se implementaron, algo muy usado en React

const [value, setValue] = useState()

Hola compañeros
Me gustaría compartirles una extensión de VS code que en lo personal me gusta mucho usar cuando hacemos este tipo de ejercicios en los que no estamos estructurando una página como tal sino entendiendo un concepto.

• La extensión en cuestión se llama Better Comments
  
  

• Por otra parte les dejo el repositorio en el que actualmente estoy trabajando este curso y un pedazo del código por si les interesa

  • Repositorio: https://github.com/PaconcioDev/ecmascript-practice

  • Una parte de lo que llevo de código

    •   //* Array destructuring
        let fruits = ["Apple", "Banana"];
        let [a, b] = fruits;
      
        console.log(a, b);
        console.log(a, fruits[1]);
        //! Both console logs will return "Apple Banana"
      
        //* Object destructuring
        let user = { userName: "Paco", age: 19 };
        console.log(user.userName, user.age);
      
        let { userName, age } = user;
        console.log(userName, age);
      
        //! Both console logs will return "Paco 19" but the second one is using object destructuring so we can use the property names instead "Object.property"
      
      
      

Like si llevas el orden correcto de los archivos.

Ojo con copiar elementos, porque hay varias veces que al hacer esto, realmente estamos llamando a su posicion de memoria.

¿Por qué no puedo usar = para copiar una matriz?

Debido a que las matrices en JS son valores de referencia, cuando intente copiarlas usando el = solo copiará la referencia a la matriz original y no el valor de la matriz. Para crear una copia real de una matriz, debe copiar el valor de la matriz en una nueva variable de valor. De esa forma, esta nueva matriz no hace referencia a la dirección de la matriz anterior en la memoria.

const sheeps = ['🐑', '🐑', '🐑'];

const fakeSheeps = sheeps;
const cloneSheeps = [...sheeps];

console.log(sheeps === fakeSheeps);
// true --> it's pointing to the same memory space

console.log(sheeps === cloneSheeps);
// false --> it's pointing to a new memory space

De verdad nunca mira los numeros de archivos que crea? jajajajaja

📓 Archivos del Proyecto 📓

Pasos 📌

• • Dentro de la carpeta es6, crear el archivo llamado: 04-rest-spread.js
  • • ◦ El código de los ejercicios queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
//Arrays destructuring

let fruits = ['Apple', 'Banana'];
let [a, b] = fruits;
console.log(a, b);

/*output:
Apple Banana
*/

console.log(a, fruits[1]);

/*output:
Apple Banana
*/

//Ejercicio #2
//Object destructuring

let user = { username: 'Oscar', age: 34};
let { username, age} = user;
console.log(username, age);

/*output:
Oscar 34
*/

console.log(username, user.age);

/*output:
Oscar 34
*/

//arrays destructuring
let fruits = ["Apple", "Banana"];
let [a, b] = fruits;
console.log(a, b);


//object destructuting
const person = {
  lasName: "Ccoyllo",
  age: 25,
  country: "PE",
};

console.log(person);
const { lasName, age, country } = person;

console.log(`My name is  ${lasName}, 
I have ${age}. I am from ${country}`);

Aquí en la MDN está un artículo sobre como se realiza la desestructuración.
.
También sobre la desestructuración de objetos

ES6: asignación de desestructuración

La asignación por desestructuración es una característica introducida en ECMAScript 6 (también conocido como ES6) que permite extraer valores de arrays o propiedades de objetos y asignarlos a variables individuales en una sola declaración. Esto facilita la manipulación de datos y la escritura de código más conciso.

Aquí tienes ejemplos de cómo funciona la asignación por desestructuración en ES6:

Desestructuración de Arrays:

// Ejemplo con array
const numbers = [1, 2, 3, 4, 5];

// Asignación de desestructuración
const [first, second, ...rest] = numbers;

console.log(first);   // 1
console.log(second);  // 2
console.log(rest);    // [3, 4, 5]

Desestructuración de Objetos:

// Ejemplo con objeto
const person = { name: 'John', age: 30, city: 'New York' };

// Asignación de desestructuración
const { name, age, city } = person;

console.log(name);  // 'John'
console.log(age);   // 30
console.log(city);  // 'New York'

Desestructuración Anidada:

// Ejemplo con objeto anidado
const student = { 
  name: 'Alice',
  info: {
    grade: 'A',
    school: 'Example High School'
  }
};

// Asignación de desestructuración anidada
const { name, info: { grade, school } } = student;

console.log(name);   // 'Alice'
console.log(grade);  // 'A'
console.log(school); // 'Example High School'

La asignación por desestructuración también se puede combinar con valores por defecto y renombramiento de variables, lo que hace que sea aún más versátil y poderosa.

// Uso de valores por defecto y renombramiento
const { title = 'No Title', author: writer = 'Unknown' } = book;

console.log(title);  // 'No Title' (si 'title' no está en 'book')
console.log(writer); // Valor de 'author' en 'book' o 'Unknown' si no está presente

La asignación por desestructuración es una técnica útil para escribir código más limpio y legible, especialmente cuando se trabaja con datos complejos como arrays y objetos.

Espero les sirva como ejemplo. 👨‍💻

¿Se pueden asignar valores por defecto en la asignación por desestructuración en ECMAScript 6?

Sí, se pueden asignar valores por defecto utilizando la sintaxis = después del nombre de la variable

let fruit = ['apple', 'banana'];
let [a, b, c='peras'] = fruit

console.log(a, b, c); 
//salida: 'apple' 'banana' 'peras' 

¿Es posible renombrar variables durante la asignación por desestructuración en ECMAScript 6?

Sí, se puede utilizar la sintaxis nombreOriginal: nuevoNombre para renombrar una variable.

let user = {
  nombre: 'Franco',
  pais: 'Arg'
}

let {nombre: name, pais} = user;

console.log(name, pais);
//salida: 'Franco' 'Arg'

Repositorio github del profe → Archivo manejado en la clase:

• 04-rest-spread.js

Comparto como complemento de unas notas mías respecto a destructuring en objetos:

const cliente03 = {
  a: 'Ezequiel',
  b: 'Das',
  c: 'Av Rivadavia 1540',
  d: 'Centro',
  e: 1586902510
}

const {c: address, a: names, b: lastname} = cliente03;
// Podemos asignar con qué key del objeto queremos que se guarde el valor de la variable sin importar el orden

console.log (names);
console.log (lastname);
console.log (address);

USO INTERESANTE
.
Podemos intercambiar valores entre variables sin usar variables auxiliares gracias a la destructuración, ejemplo:

let a = 1;
let b = 2;

[a,b] = [b,a];

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

Les comparto un caso de uso interesante para “Arrays destructuring” que al principio de la clase no me acababa de convencer 😅, pero ahora sí tiene sentido.

function getFullName() {
  // Simulamos la obtención de los datos de una persona
  return ["John", "Doe"];
}

// Utilizando destructuración de arrays
let [firstName, lastName] = getFullName();
console.log(firstName, lastName);

.
En este ejemplo la primera función “getFullName()” retorna un array con los datos de una persona (nombre y apellido).
.
Luego usando “arrays destructuring” asignamos esos elementos a las variables “firstName” y “lastName” desde el array que retorna la función “getFullName()” .
.
Ahora puedes utilizar esas variables directamente sin necesidad de acceder a los elementos del array mediante índices.

Me lancé a crear un proyecto frontend en el trabajo en Next Js sin saber de Next js xD y muchas cosas que no entiendo aunque me está funcionando el proyecto jajaja este curso me está ayudando a entender qué estoy haciendo.

Muy bacano aprender todas estas cositas, menos mal las implementaron.

En el Object destructuring es necesario que en las llaves de la segunda línea lleven en sus variables los mismos valores que el objeto.

let user = {username: "o", age: 23};
let {username,age} = user; //en llaves el mismo valor del objeto xd
console.log(username,age)

aqui ejemplos de JavaScript Nested Destructuring(Destructuracion anidada)

https://www.arquitecturajava.com/javascript-nested-destructuring/

7 / 35 ES6: asignación de desestructuración

La desestructuración es una técnica de programación que nos permite extraer los valores de arrays o propiedades de objetos en distintas variables, lo que hace que el código sea más legible y mantenible. hay dos tipos de desestructuración:

1. Desestructuración de objetos
2. Desestructuración de arrays

En la desestructuración de objetos, podemos extraer las propiedades de un objeto en variables medainte el mismo nombre de la propiedad del objeto. Además podemos cambiar el nombre de las variables usando la sintaxis “propiedad:nuevoNombre”. También podemos utilizar la desestructuración en los parámetros de una función para obtener los valor directamente.

En la desestructuración de arrays, podemos extraer los valores de un array en variables utilziando la misma posición del array con una sintaxis similiar a la desestructuración de objetos. También podemos utilizar la desestructuración para valores retornados de una función.

Hay ciertas cosas que se pueden hacer con la desestructuración, pero no son recomendables, como identificar unavariable por su posición.en un array o utilizar la desestructuración de objetos mediante el indice.

Algunos ejemplos:

1. desestructuración de objetos:

const persona = {
	nombre: "Juan",
	edad: 30,
	ciudad: "Madrid"
}

const {nombre, edad, ciudad } = persona

console.log(nombre) // Juan
console.log(edad) // 30
console.log(ciudad) // Madrid

En este ejemplo estamos trayendo las propiedades “nombre”, “edad” y “ciudad” del objeto “persona” en variables del mismo nombre mediante la desestructuración.

1. Ejemplo: Cambiar el nombre de las variables con desestructuración

const persona = {
	nombre: "juan",
	edad: 30,
	ciudad: "Madrid"
}

const {nombre: nombrePersona, edad: edadPersona, ciudad: ciudadPersona }
= persona

console.log(nombrePersona) // Juan
console.log(edadPersona) // 30
console.log(ciudadPersona) // Madrid

En este ejemplo cambiamos el nombre de las variables mediante la sintaxis “propiedad:nuevoNombre”.|

1. Ejemplo: Desestructuración en parámetros de una función

const persona = {
	nombre: "Juan",
	edad: 30,
	ciudad: "Madrid"
}

function mostrarPersona({nombre, edad, ciudad}) {
	console.log(`Nombre: ${nombre}, Edad: ${edad}, Ciudad: ${ciudad}`)
}

mostrarPersona(persona) // Nombre: Juan, Edad: 30, Ciudad: Madrid

En este ejemplo, estamos utilizando la desestructuración en los parámetros de la función “mostrarPersona” para obtener los valores directamente del objeto “persona”.

1. Ejemplo: Desestructuración de arrays

const numeros = [1, 2, 3, 4, 5]

const [primerNumero, segundoNumero, tercerNumero] = numeros

console.log(primerNumero) // 1
console.log(segundoNumero) // 2
console.log(tercerNumero) // 3

En este ejemplo, estamos extrayendo los valores del array “numeros” en variables mediante la desestructuración

1. Ejemplo: Desestructuración para valores retornados de una función

function getInfo() {
	return { name: "juan", age: 30 };
}

const {name, age } = getInfo();

console.log(name); // "Juan"
console.log(age); // 30

En este caso, la función getInfo() retorna un objeto con las propiedades name y age. Luego utilizamos la desestructuración para guardar estos valores en las variables name y age. Finalmente, podemos utilizar estas variables de manera separada para imprimir en la consola el nombre y la edad de la persona.

Al desestructurar objetos podemos cambiar el nombre de la variable, por ejemplo:

let user ={username:“Oscar”, age:34};
let {username:usuario, age:edad}=user;
//usuario ===“Oscar”;
//edad === 34
username y age no se van a crear… 😃

Creo que para los que ya saben Python entenderán la lógica de todo lo que nos esta explicando.

Uno de los usos más interesantes que he encontrado es al trabajar con arreglos, entendiendo que estos son objetos también:

let fruits = ['apple', 'kiwi', 'banana'];
const { 0: first, length, [length - 1]: last } =  fruits;

console.log(first);   // apple
console.log(length);  // 3
console.log(last);    // banana

Buenos tips de Wes Bos

Como dice Oscar, los errores son nuestros amigos. Gracias a buscar generar errores pude llegar a las siguientes conclusiones:

• Solo se puede desestructurar un array con otro array, y un objeto con otro objeto; el siguiente código genera error:

const user = {
    username: 'Oscar',
    age: 34
}
const [age, username] = user;
console.log(username, age);

• Al desestructurar un objeto el nombre de la variable debe ser el mismo nombre del atributo; el siguiente código genera error:

const user = {
    username: 'Oscar',
    age: 34
}
const [name, age] = user;
console.log(username, age);

• Al desestructurar un objeto, el orden de las variables extraidas no importa; el siguiente código está bien:

const user = {
    username: 'Oscar',
    age: 34
}
const [name, age] = user;
console.log(username, age);```

También se puede desestructurar métodos, interesante 😃

let user={userName:'Jhoan David', age:21, holaMundo(){
        console.log("hola mundo")
}};
let {userName, age, holaMundo}=user;
console.log(userName, user.age);

holaMundo();

Desestruturando Campos de objetos pasados como funcion
const player = {
id:0001,
displayName:‘CR7’,
fullName:{
firstName:“Cristiano Ronaldo”,
lastname:“Aveiro”
}
}

function playerId({id}){
return id;
}

function whois({displayName,fullName:{firstName:name}}){
return ${displayName} es ${name}
}

console.log(playerId(player))
console.log(whois(player))