- Day 11
- Desestructuración y Spread
- Desestructuración de Arrays
- Desestructuración durante la iteración
- Desestructuración de objetos
- Renombrar durante la estructuración
- Parámetro de objeto sin desestructuración
- Parámetro de objeto con desestructuración
- Desestructuración del objeto durante la iteración
- Operador Spread o Rest
- Operador Spread para obtener el resto de elementos del array
- Spread operator to copy array
- Spread operator to copy object
- Operador Spread con función flecha
- Ejercicios
Día 11
Desestructuración y Spread
La desestructuración es una forma de desempaquetar arrays y objetos y asignarlos a una variable distinta.
Desestructuración de Arrays
const numbers = [1, 2, 3];
let [numOne, numTwo, numThree] = numbers;
console.log(numOne, numTwo, numThree);
const names = ["Asabeneh", "Brook", "David", "John"];
let [firstPerson, secondPerson, thirdPerson, fourthPerson] = names;
console.log(firstPerson, secondPerson, thirdPerson, fourthPerson);
const scientificConstants = [2.72, 3.14, 9.81, 37, 100];
let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants;
console.log(e, pi, gravity, bodyTemp, boilingTemp);
const fullStack = [
["HTML", "CSS", "JS", "React"],
["Node", "Express", "MongoDB"],
];
const [frontEnd, backEnd] = fullStack;
console.log(frontEnd);
console.log(backEnd);
Si queremos omitir uno de los valores del array utilizamos una coma adicional. La coma ayuda a omitir el valor en ese índice específico.
const numbers = [1, 2, 3];
let [numOne, , numThree] = numbers; //2 es omitido
console.log(numOne, numThree);
const names = ["Asabeneh", "Brook", "David", "John"];
let [, secondPerson, , fourthPerson] = names; // primera y tercera persona es omitido
console.log(secondPerson, fourthPerson);
Podemos utilizar el valor por defecto en caso de que el valor del array para ese índice sea undefined:
const names = [undefined, "Brook", "David"];
let [
firstPerson = "Asabeneh",
secondPerson,
thirdPerson,
fourthPerson = "John",
] = names;
console.log(firstPerson, secondPerson, thirdPerson, fourthPerson);
No podemos asignar una variable a todos los elementos del array. Podemos desestructurar algunos de los primeros y podemos obtener los restantes como array utilizando el operador spread(...).
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let [num1, num2, num3, ...rest] = nums;
console.log(num1, num2, num3);
console.log(rest);
Desestructuración durante la iteración
const countries = [
["Finland", "Helsinki"],
["Sweden", "Stockholm"],
["Norway", "Oslo"],
];
for (const [country, city] of countries) {
console.log(country, city);
}
const fullStack = [
["HTML", "CSS", "JS", "React"],
["Node", "Express", "MongoDB"],
];
for (const [first, second, third] of fullStack) {
console.log(first, second, third);
}
Desestructuración de objetos
Cuando desestructuremos el nombre de la variable que usamos para desestructurar debe ser exactamente el mismo que la clave o propiedad del objeto. Vea el ejemplo siguiente.
const rectangle = {
width: 20,
height: 10,
area: 200,
};
let { width, height, area, perimeter } = rectangle;
console.log(width, height, area, perimeter);
Renombrar durante la estructuración
const rectangle = {
width: 20,
height: 10,
area: 200,
};
let { width: w, height: h, area: a, perimeter: p } = rectangle;
console.log(w, h, a, p);
Si la clave no se encuentra en el objeto, la variable se asignará a undefined. A veces la clave puede no estar en el objeto, en ese caso podemos dar un valor por defecto durante la declaración. Vea el ejemplo.
const rectangle = {
width: 20,
height: 10,
area: 200,
};
let { width, height, area, perimeter = 60 } = rectangle;
console.log(width, height, area, perimeter); //20 10 200 60
//Modifiquemos el objeto: anchura a 30 y perímetro a 80
const rectangle = {
width: 30,
height: 10,
area: 200,
perimeter: 80,
};
let { width, height, area, perimeter = 60 } = rectangle;
console.log(width, height, area, perimeter); //30 10 200 80
Desestructuración de keys como parámetros de una función. Creemos una función que toma un objeto rectángulo y devuelve el perímetro de un rectángulo.
Parámetro de objeto sin desestructuración
// Sin desestructuración
const rect = {
width: 20,
height: 10,
};
const calculatePerimeter = (rectangle) => {
return 2 * (rectangle.width + rectangle.height);
};
console.log(calculatePerimeter(rect)); // 60
//with destructuring
//Otro ejemplo
const person = {
firstName: "Asabeneh",
lastName: "Yetayeh",
age: 250,
country: "Finland",
job: "Instructor and Developer",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
"Python",
"D3.js",
],
languages: ["Amharic", "English", "Suomi(Finnish)"],
};
// Creemos una función que proporcione información sobre el objeto persona sin desestructurar
const getPersonInfo = (obj) => {
const skills = obj.skills;
const formattedSkills = skills.slice(0, -1).join(", ");
const languages = obj.languages;
const formattedLanguages = languages.slice(0, -1).join(", ");
personInfo = `${obj.firstName} ${obj.lastName} lives in ${
obj.country
}. He is ${obj.age} years old. He is an ${
obj.job
}. He teaches ${formattedSkills} and ${
skills[skills.length - 1]
}. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`;
return personInfo;
};
console.log(getPersonInfo(person));
Parámetro de objeto con desestructuración
const calculatePerimeter = ({ width, height }) => {
return 2 * (width + height);
};
console.log(calculatePerimeter(rect)); // 60
// Creemos una función que proporcione información sobre el objeto persona con desestructuración
const getPersonInfo = ({
firstName,
lastName,
age,
country,
job,
skills,
languages,
}) => {
const formattedSkills = skills.slice(0, -1).join(", ");
const formattedLanguages = languages.slice(0, -1).join(", ");
personInfo = `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${
skills[skills.length - 1]
}. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`;
return personInfo;
};
console.log(getPersonInfo(person));
/*
Asabeneh Yetayeh lives in Finland. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
*/
Desestructuración del objeto durante la iteración
const todoList = [
{
task: "Prepare JS Test",
time: "4/1/2020 8:30",
completed: true,
},
{
task: "Give JS Test",
time: "4/1/2020 10:00",
completed: false,
},
{
task: "Assess Test Result",
time: "4/1/2020 1:00",
completed: false,
},
];
for (const { task, time, completed } of todoList) {
console.log(task, time, completed);
}
Prepare JS Test 4/1/2020 8:30 true
Give JS Test 4/1/2020 10:00 false
Assess Test Result 4/1/2020 1:00 false
Operador Spread o Rest
Cuando desestructuramos un array utilizamos el operador spread(...) para obtener el rest de elementos como array. Además utilizamos el operador spread para repartir los elementos del array en otro array.
Operador Spread para obtener el resto de elementos del array
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [num1, num2, num3, ...rest] = nums
console.log(num1, num2, num3)
console.log(rest)
const countries = [
"Germany",
"France",
"Belgium",
"Finland",
"Sweden",
"Norway",
"Denmark",
"Iceland",
];
let [gem, fra, , ...nordicCountries] = countries;
console.log(gem);
console.log(fra);
console.log(nordicCountries);
Spread operator to copy array
const evens = [0, 2, 4, 6, 8, 10];
const evenNumbers = [...evens];
const odds = [1, 3, 5, 7, 9];
const oddNumbers = [...odds];
const wholeNumbers = [...evens, ...odds];
console.log(evenNumbers);
console.log(oddNumbers);
console.log(wholeNumbers);
const frontEnd = ["HTML", "CSS", "JS", "React"];
const backEnd = ["Node", "Express", "MongoDB"];
const fullStack = [...frontEnd, ...backEnd];
console.log(fullStack);
Spread operator to copy object
Podemos copiar un objeto utilizando un operador spread
const user = {
name: "Asabeneh",
title: "Programmer",
country: "Finland",
city: "Helsinki",
};
const copiedUser = { ...user };
console.log(copiedUser);
Modificar o cambiar el objeto mientras se copia
const user = {
name: "Asabeneh",
title: "Programmer",
country: "Finland",
city: "Helsinki",
};
const copiedUser = { ...user, title: "instructor" };
console.log(copiedUser);
Operador Spread con función flecha
Siempre que queramos escribir una función flecha que tome un número ilimitado de argumentos, utilizaremos un operador spread. Si utilizamos un operador spread como parámetro, el argumento pasado cuando invocamos una función cambiará a un array.
const sumAllNums = (...args) => {
let sum = 0;
for (const num of args) {
sum += num;
}
return sum;
};
console.log(sumAllNums(1, 2, 3, 4, 5));
🌕 Has logrado bastante hasta ahora. Ahora, tu nivel de JavaScript es intermedio alto. ¡Sigue adelante! Acabas de completar los desafíos del día 11 y llevas 11 pasos de tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
Ejercicios
Ejercicios: Nivel 1
const constants = [2.72, 3.14, 9.81, 37, 100];
const countries = ["Finland", "Estonia", "Sweden", "Denmark", "Norway"];
const rectangle = {
width: 20,
height: 10,
area: 200,
perimeter: 60,
};
const users = [
{
name: "Brook",
scores: 75,
skills: ["HTM", "CSS", "JS"],
age: 16,
},
{
name: "Alex",
scores: 80,
skills: ["HTM", "CSS", "JS"],
age: 18,
},
{
name: "David",
scores: 75,
skills: ["HTM", "CSS"],
age: 22,
},
{
name: "John",
scores: 85,
skills: ["HTML"],
age: 25,
},
{
name: "Sara",
scores: 95,
skills: ["HTM", "CSS", "JS"],
age: 26,
},
{
name: "Martha",
scores: 80,
skills: ["HTM", "CSS", "JS"],
age: 18,
},
{
name: "Thomas",
scores: 90,
skills: ["HTM", "CSS", "JS"],
age: 20,
},
];
- Desestructurar y asignar los elementos del array de constantes para e, pi, gravedad, humanBodyTemp, waterBoilingTemp.
- Desestructurar y asignar los elementos del array de países a fin, est, sw, den, nor
- Desestructurar el objeto rectángulo por sus propiedades o keys.
Ejercicios: Nivel 2
- Iterar a través del array de usuarios y obtener todas las keys del objeto utilizando la desestructuración
- Encuentra las personas que tienen menos de dos habilidades
Ejercicios: Nivel 3
- Desestructurar el objeto países imprimir nombre, capital, población e idiomas de todos los países
- Un desarrollador junior estructura el nombre del estudiante, las habilidades y la puntuación en un array de arrays que puede no ser fácil de leer. Desestructure la siguiente matriz nombre a nombre, array de habilidades a habilidades, array de puntuaciones a puntuaciones, puntuación de JavaScript a jsScore y puntuación de React a reactScore variable en una línea.
const student = ["David", ["HTM", "CSS", "JS", "React"], [98, 85, 90, 95]];
console.log(name, skills, jsScore, reactScore);
- Escribe una función llamada convertArrayToObject que pueda convertir el array en un objeto estructurado.
const students = [
["David", ["HTM", "CSS", "JS", "React"], [98, 85, 90, 95]],
["John", ["HTM", "CSS", "JS", "React"], [85, 80, 85, 80]],
];
console.log(convertArrayToObject(students))[
({
name: "David",
skills: ["HTM", "CSS", "JS", "React"],
scores: [98, 85, 90, 95],
},
{
name: "John",
skills: ["HTM", "CSS", "JS", "React"],
scores: [85, 80, 85, 80],
})
];
-
Copie el objeto estudiante a newStudent sin mutar el objeto original. En el nuevo objeto añade lo siguiente ?
-
Añadir Bootstrap con el nivel 8 a los conjuntos de habilidades de front end
- Añadir Express con nivel 9 a los conjuntos de habilidades del back end
- Añadir SQL con nivel 8 a los conjuntos de habilidades de la base de datos
- Añadir SQL sin nivel a los conjuntos de habilidades de ciencia de datos
const student = {
name: "David",
age: 25,
skills: {
frontEnd: [
{ skill: "HTML", level: 10 },
{ skill: "CSS", level: 8 },
{ skill: "JS", level: 8 },
{ skill: "React", level: 9 },
],
backEnd: [
{ skill: "Node", level: 7 },
{ skill: "GraphQL", level: 8 },
],
dataBase: [{ skill: "MongoDB", level: 7.5 }],
dataScience: ["Python", "R", "D3.js"],
},
};
La salida del objeto copiado debería tener este aspecto:
{
name: 'David',
age: 25,
skills: {
frontEnd: [
{skill: 'HTML',level: 10},
{skill: 'CSS',level: 8},
{skill: 'JS',level: 8},
{skill: 'React',level: 9},
{skill: 'BootStrap',level: 8}
],
backEnd: [
{skill: 'Node',level: 7},
{skill: 'GraphQL',level: 8},
{skill: 'Express',level: 9}
],
dataBase: [
{ skill: 'MongoDB',level: 7.5},
{ skill: 'SQL',level: 8}
],
dataScience: ['Python','R','D3.js','SQL']
}
}
🎉 ¡FELICITACIONES! 🎉