Laboratorio: Sintaxis y control de flujo

Casi todos los módulos acaban con unos pequeños ejercicios que refuerzan y profundizan los conceptos vistos.

Todos los ejercicios contienen una llamada a la función assertEqual, que recibe dos valores. Completas el ejercicio de manera exitosa cuando el código compila los valores recibidos por assertEqual son iguales.

Código

assertEqual(1, 1);

const vs let

Corrige el siguiente código:

Código

const price = 100;
const isDiscounted = true;
if (isDiscounted) {
  price = 50;
}
assertEqual(price, 50);

Pista 1

Usa let para variables cuyo valor cambie.

Solución

let price = 100;
const isDiscounted = true;
if (isDiscounted) {
  price = 50;
}
assertEqual(price, 50);

Objetos

Define un objeto que represente un descuento con dos atributos: un código de descuento #BLACKFRIDAY y un valor de descuento de un 15%.

Código

const discount = ;

assertEqual(discount.code, "#BLACKFRIDAY");
assertEqual(discount.percentage, 15);

Solución

const discount = {
  code: "#BLACKFRIDAY",
  percentage: 15,
};

assertEqual(discount.code, "#BLACKFRIDAY");
assertEqual(discount.percentage, 15);

Bonus: Funciones para recorrer objetos

TypeScript ofrece varios métodos estáticos en la clase Object para recorrer propiedades y/o atributos de objetos, que son Object.keys, Object.values y Object.entries, que seguro puedes deducir para qué son.

Código

const product = {
  name: "Libro",
  price: 15,
  promoCode: "50OFF"
};

const value1 = ;
const value2 = ;
const value3 = ;

assertEqual(value1, ["name", "price", "promoCode"]);
assertEqual(value2, ["Libro", 15, "50OFF"]);
assertEqual(value3, [["name", "Libro"], ["price", 15], ["promoCode", "50OFF"]]);

Pista 1

const value1 = Object.keys(product);

Solución

const product = {
  name: "Libro",
  price: 15,
  promoCode: "50OFF",
};

const value1 = Object.keys(product);
const value2 = Object.values(product);
const value3 = Object.entries(product);

assertEqual(value1, ["name", "price", "promoCode"]);
assertEqual(value2, ["Libro", 15, "50OFF"]);
assertEqual(value3, [
  ["name", "Libro"],
  ["price", 15],
  ["promoCode", "50OFF"],
]);

Bonus: Desestructuración y construcción

TypeScript te deja convertir propiedades de objetos en variables a través de desestructuración (destructuring):

const product = {
  name: "Libro",
  price: 15,
  promoCode: "50OFF",
};
const { name, price } = product;

console.log(name);
// "Libro"
console.log(price);
// 15

Con esto también puedes "partir" objetos:

const product = {
  name: "Libro",
  price: 15,
  promoCode: "50OFF",
};
const { name, ...rest } = product;

console.log(name);
// "Libro"
console.log(rest);
// { price: 15, promoCode: "50OFF" }

Sabiendo esto, completa el ejercicio.

Código

const priceBreakdown = {
  basePrice: 15,
  discount: -4,
  taxes: 3
};

const {} = priceBreakdown;

assertEqual(basePrice, 15);
assertEqual(rest, { discount: -4, taxes: 3 });

Solución

const priceBreakdown = {
  basePrice: 15,
  discount: -4,
  taxes: 3,
};

const { basePrice, ...rest } = priceBreakdown;

assertEqual(basePrice, 15);
assertEqual(rest, { discount: -4, taxes: 3 });

Listas (Arrays)

Completa el ejercicio.

Código

const colors = ;

assertEqual(colors[0], "red");
assertEqual(colors[1], "blue");

Solución

const colors = ["red", "blue"];

assertEqual(colors[0], "red");
assertEqual(colors[1], "blue");

Bonus: manipulando listas

push te permite añadir elementos al final de la lista y pop eliminarlos. Utiliza estas operaciones para resolver este ejercicio sin modificar la inicialización de colors:

Código

const colors = ["red", "blue"];

assertEqual(colors, ["red", "yellow"]);

Solución

const colors = ["red", "blue"];

colors.pop();
colors.push("yellow");

assertEqual(colors, ["red", "yellow"]);

Bucles

Usa un bucle para completar el código.

Código

const values = [];

assertEqual(values, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

Solución

const values = [];
for (let i = 0; i <= 15; i++) {
  values.push(i);
}
assertEqual(
  values,
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
);