Tipos de datos (III)

• Colecciones básicas: Array, Object
• Colecciones mejoradas: Map, Set (ahora no es importante)
• Otros: Date → Temporal, RegExp... (más adelante) → Estructuras avanzadas → Post

// Array
const numbers = [1, 5, 10, 15, 20];

// Objeto
const object = {
  name: "ManzDev",
  life: 95,
  numbers: [1, 5, 10, 15, 20]
}

// Conjunto (no repetidos)
const set = new Set([ 1, 5, 10, 15 ]);

// Mapa
const map = new Map([
  ["name", "Manz"],
  ["life", 95]
]);
// ~ map = new Map(Object.entries(object));

Ámbitos

• Ámbito global (en todo el código)
• Ámbito local (en una zona concreta)

const name = "ManzDev";

// existe aquí
// ...
// y aquí
// ...
// ...
// y aquí

// aquí no existe aún
{
  const name = "ManzDev";
  // aquí existe
  // ...
  // y aquí
}
// pero aquí no

Condicionales (I)

• if ... else ...
• ? ... : ... (operador ternario) → Operadores básicos y de comparación

const number = 3;

if (number < 5) {
  console.log("Malo");
} else {
  console.log("Bueno");
}

const value = number < 5 ? "Malo" : "Bueno";

// Ternarios encadenados 
const value =
  number < 5 ? "Malo" :
  number == 5 ? "Decente" :
  "Bueno";

• ¡Puedes hacerlo simple o encadenarlos!

Condicionales (II)

• switch ... case: ... default: ... (valores concretos)
• Usar diccionarios (avanzado, para los que ya saben)

const number = 1;
switch (number) {
  case 1:
    console.log("Muy malo");
    break;
  ...
  default:
    console.log("Valor no identificado");
    break;
}

const number = 1;

const dictionary = {
  1: "Muy malo",
  2: "Malo",
  3: "Normal",
}

const value = dictionary[number];

Bucles (I)

• Inicialización, condición e incremento
• Concepto de iteraciones (bucle)

let number = 5;           // Inicialización

while (number > 0) {      // Condición
  console.log(number);
  number--;               // Incremento
}

let number = 0;

do {
  console.log(number);
  number--;
} while (number > 0);

• ¿El bucle muestra el 0?

Bucles (II)

• Inicialización, condición e incremento en misma línea
• Concepto de iteraciones (bucle)

// for(ini, cond, incr)
for (let number = 0; number <= 5; number++) {
  console.log("Number vale: ", number);
}

// Posición        0   1   2   3  4  5
const elements = [25, 20, 15, 10, 5, 1];

for (index in elements) {
  console.log(index);   // index (0, 1, 2...)
}

for (number of elements) {
  console.log(number);  // valor (25, 20...)
}

Funciones (I)

• Simplificar
• Modularizar código (reutilizar)

console.log("Titular ------------");
console.log("Descripción de texto");
console.log("Titular ------------");
console.log("Descripción de texto");
// ...

function mostrar() {
  console.log("Titular ------------");
  console.log("Descripción de texto");
}

mostrar();     // for (let i=0; i < 5; i++)
mostrar();     //   mostrar();

Funciones (II)

• Parámetros / Argumentos
• Devolución de datos con return

// Parámetros
function mostrar(title, description = "--") {
  console.log(title + " ------------");
  console.log(description);
  return 42;
}

const name = "ManzDev";
const description = "Es un streamer";
const output = mostrar(name, description);

// Argumentos
mostrar("ManzDev", "Streamer");
mostrar("Felixicaza", "Moderador");
mostrar("Krepssi", "Moderadora");
mostrar("DHardySD");

Funciones (III)

• Función tradicional function name() { ... }
• Función anónima function() { ... }
• Función flecha ( Fat arrow ) () => { ... } (diferencia clave: this, lo veremos más adelante)

function name(a, b) {
  /* ... */
}

function (a, b) { /* ... */ }

const name = function (a, b) {
  /* ... */
}

const name = (a, b) => {
  /* ... */
  return 42;
}

const name = (a, b) => { /* ... */ }

// return directo
const name = (a, b) => 42;

Clases (I)

• Organización de variables y funciones en una entidad
• Propiedades (variables) y Métodos (funciones)

class Human {
  name = "NPC";
  height = 185;
  x = 0;

  walk() {
    this.x = this.x + 25;
  }
}

const npc = new Human();     // Crear humano
const manz = new Human();    // Crear humano

npc.name     // "NPC"
manz.x       // 0
manz.walk()  // (Ejecutamos función)
manz.x       // 25
npc.x        // 0
manz.name    // "NPC" 

Clases (II)

• Método especial constructor() (al hacer un new)
• El valor this (referencia a la instancia)

class Human {
  name = "NPC";
  height;
  x = 0;

  constructor(name, height = 120) {
    this.name = name;
  }
}

const npc = new Human(); // NPC, 1'20

// ManzDev, 1'85
const manz = new Human("ManzDev", 185);

// CyberManzDev, 1'20
const bot = new Human("CyberManzDev");

manz.name     // "ManzDev" 

Clases (III)

• Propiedades y métodos privados (sólo accedes desde dentro)
• Getters y Setters

class Human {
  #name = "NPC";

  info() { return this.#name }
}

const npc = new Human();
npc.name    // undefined
npc.#name   //  no desde fuera de clase
npc.info()  //  si desde dentro de clase

class Human {
  /* ... */

  get name() {
    return "Mi nombre es: " + this.#name;
  }

  set name(name) { this.#name = name }
}

Clases (IV)

• Propiedades/Métodos estáticos (no hace falta instancia)

class God {
  static name = "Jordi Hurtado";
  static height;
  static x = Infinity;

  static talk() {
    console.log("Hi!");
  }
}

Human.name    // "Jordi Hurtado"
Human.x       // Infinity
Human.talk()  // Muestra "Hi!"

Human.name = "Manz";
Human.name    // "Manz"

Clases (V)

• Herencia

class Cat {
  constructor() { /* ... */ }

  meow() {
    console.log("Meow!");
  }
}

const cat = new Cat();
cat.meow(); 
cat.fly();  

class SuperCat extends Cat {
  constructor() {
    super();
  }

  fly() { /* ... */ }
}

const supercat = new SuperCat();
supercat.meow(); 
supercat.fly();