Clase 6 - Objetos en JavaScript

#object #javaScript #spread-operator #rest-operator #destructuring

Clases y constructores

Clases

• Brindan un modelo o molde para trabajar.
• No nos hablan de un escenario o elemento en particular.
• Se centran en decir qué propiedad tendrá nuestro molde

Constructores

• Un constructor nos permite instanciar cada uno de nuestros objetos.
• Son muy parecidos a las funciones, pero se comportan de manera muy distinta.
• Instanciar un objeto se refiere a la acción de crear un nuevo objeto a partir de una clase.

class Pet {
  constructor(name, specie, color, age) {
    this.name = name;
    this.specie = 'Dog';
    this.color = 'Black';
    this.age = 14;
  }
}

const myDog = new Pet('Puki', 'Dog', 'Black', 14);
const myCat = new Pet('Michi', 'Cat', 'White', 2);
console.log(myCat);
console.log('--------------------');
console.log(myDog.color);

Resumen

• Las CLASES funcionan como moldes de los cuales puedo crear objetos.
• Un OBJETO o instanciación de un objeto se crea a partir de una clase (nuestro molde).

class Pet {
  constructor(name, specie, color, breed) {
    this.name = name;
    this.specie = specie;
    this.color = color;
    this.breed = breed;
  }
}

const cat = new Cat('Pelusa', 'gato', 'Naranja', 'raza naranja');

// Ahora necesito crear un dueño para mi mascota
class Owner {
  constructor(name, address, phone, pet) {
    this.name = name;
    this.address = address;
    this.phone = phone;
    this.pet = pet;
  }
}

const myDog = new Pet('Firulais', 'callejero', 9);
const myCat = new Pet('Haru', 'GatoNegro', 4, 'negro');

const jaimito = new Owner('Jaimito Rodolfo', 'Calle 123', '123456', [
  myDog,
  myCat,
]);

// EJEMPLO CON USO DE MÉTODOS Y ATRIBUTOS PRIVADOS Y ESTÁTICOS
class Pet {
  #name;
  static category = 'animal';

  constructor(name, specie, color, breed, size) {
    this.#name = name;
    this.specie = specie;
    this.color = color;
    this.breed = breed;
  }

  #getSecretName() {
    // Método privado
    return `El nombre secreto es ${this.#name}`;
  }

  revealSecret() {
    return this.#getSecretName(); // Se puede llamar dentro de la misma clase
  }

  set setName(newName) {
    this.#name = newName;
  }

  get name() {
    return this.#name;
  }

  talk() {
    console.log(`${this.#name} hace ruido`);
  }

  static patas() {
    console.log('tiene 4 patas');
  }
}

const myCat = new Pet('Michi', 'Cat', 'White', 'halfblood', 'small');
myCat.name; // Asi funciona el geter, sin paréntesis
myCat.setName = 'Pelusa'; // El seter funciona con el igual sin necesidad de los paréntesis

Pet.category; // Atributo estático
Pet.patas(); // Método estático
myCat.talk(); // Método de instancia que hace uso de un atributo privado como #name
myCat.revealSecret(); //Método de instancia que hace uso de un método privado como #getSecretName

---

Objetos literales

• Es una de las formas más usadas para definir un objeto en JavaScript.

const myCat = {
  name: 'Haru',
  color: 'Negro',
  age: {
    value: 4,
    name: 'years'
  },
  getInfo: () => {
      console.log(this.name) // no funciona porque la funcion flecha no tiene su propio this
  }
  getInfo() {
        console.log(this.name); // Ahora sí accede correctamente a `name`
    },
  get info() {
      console.log(this.name)
  },
    set setName(newName) {
    this.name = newName
    }

}

console.log(myCat)
console.log(myCat.color)

---

Built-in Objects

• En JavaScript hay objetos que existen por defecto y los podemos utilizar. Entre ellos podemos encontrar:
  • Array, Number, Date, Boolean, String, Math, Set, etc…
• Estos objetos poseen propiedades y métodos ESTÁTICOS a los cuales podemos acceder y de esa forma utilizarlos en nuestro código. Por ejemplo:
  • Math.PI => nos devuelve el valor del número Pi (3.14159…)
  • Math.max(n1,n2,n3,...,nx) => nos devuelve el máximo número de todos los argumentos que le pasemos al método

---

Static methods

• Podemos declarar un método o propiedad como STATIC.
• Al hacerlo dicho método o propiedad puede ser utilizada sin la necesidad de tener una instancia de la clase (es decir un objeto creado a partir de nuestra clase)
• Para utilizarlo simplemente agregamos la palabra reservada STATIC antes del nombre del método o propiedad correspondiente.

class Calculadora {
  static algo = 555;
  constructor(valorInicial = 0) {
    this.resultado = valorInicial;
  }

  sumar(valor) {
    return (this.resultado += valor);
  }
  restar(valor) {
    return (this.resultado -= valor);
  }

  static sumar(a, b) {
    return a + b;
  }
  static restar(a, b) {
    return a - b;
  }
}
const miCalc = new Calculadora(10);
miCalc.sumar(3);
miCalc.restar(1);
console.log(Calculadora.restar(2, 1));

---

Rest operator

• Es un operador de JavaScript que nos permite condensar el resto de variables o parámetros de una función en una sola variable.
• Es ampliamente usado para simplificar la declaración de variables cuando sea necesario.
• Para utilizarlo agregamos el operador (...) delante del nombre de la variable donde queremos condensar el resto de valores

function sum(...numbers) {
  let result = 0;
  numbers.forEach((number) => (result += number));
  return result;
}
console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(10, 20)); // 30
console.log(sum()); // 0

---

Destructuring

• El destructuring nos permite extraer propiedades de un objeto de una forma más condensada.
• Nos sirve también para poder pasar argumentos a una función de una forma más cómoda.
• La mejor forma de ver su sintaxis (como utilizarlo) es con ejemplos:

// DESTRUCTURING EN OBJETOS
const person = {
  fullname: 'Juan Perez',
  age: 53
}

// Sin destructuring
const age = person.age
const fullname = person.fullname

// Con destructuring
const { age, fullname: personFullname } = person


// DESTRUCTURING EN FUNCIONES
function sum(num1, num2) {
  reurn num1 + num2
}

const result = sum(3, 17)


function sum({num1, num2}) {
  reurn num1 + num2
}

const result = sum({num1: 3, num2: 17})


// DESTRUCTURING EN ARREGLOS
const scores = [1,2,3,4]
const [first, second, ...restOfNumbers] = scores // hacemos uso del rest operator también
console.log(first)
console.log(restOfNumbers)

// También se puede usar el destructuring junto al rest operator en objetos
const person = {
  fullname: 'Juan Perez',
  age: 53,
  address: 'calle 123'
}
const { age, ...rest } = person
console.log(rest) // { fullname: 'Juan Perez', address: 'calle 123' }

---

Spread operator

• Es un operador de JavaScript que nos permite esparcir (separar o extender) un arreglo u objeto.
• Al utilizarlo rompemos la estructura que tiene por defecto con el fin de obtener sus valores separados.
• Es útil cuando necesitamos pasar los elementos de un arreglo como si fueran argumentos independientes uno del otro.
• Un buen ejemplo es el método estático Math.max()

const scores = [12, 54, 0, 154, 28];

// Sin spread operator
function maxNumberOfFIveElements(numbers) {
  return Math.max(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4]);
}

const result = maxNumberOfFIveElements(scores);

// Con spread operator
function maxNumberOfArray(numbers) {
  return Math.max(...numbers);
}

const result = maxNumberOfFIveElements(scores);

• El spread operator (...) en JavaScript se usa para copiar o expandir elementos de un iterable (como un array u objeto) en un nuevo contexto.
• El rest operator (...) se usa en la desestructuración para obtener el resto de las propiedades o elementos en una variable.

---

Ejercicios

• Resolver el siguiente ejercicio que estará dividido en cuatro partes

Primera parte

• Dado un array de libros, implementar una función filterBooksByAuthor( ) que reciba por parámetros dicho array y un string con el nombre de un autor, y devuelva un nuevo array con libros del autor indicado.

const books = [
  { title: 'El Aleph', author: 'Jorge Luis Borges' },
  { title: 'La ciudad y los perros', author: 'Mario Vargas Llosa' },
  { title: 'Cien años de soledad', author: 'Gabriel García Márquez' },
  { title: 'Rayuela', author: 'Julio Cortázar' },
  { title: 'Ficciones', author: 'Jorge Luis Borges' },
  { title: 'El hacedor', author: 'Jorge Luis Borges' },
  { title: 'Los pasos perdidos', author: 'Alejo Carpentier' },
  { title: 'El reino de este mundo', author: 'Alejo Carpentier' },
  { title: 'La fiesta del chivo', author: 'Mario Vargas Llosa' },
  { title: 'La tía Julia y el escribidor', author: 'Mario Vargas Llosa' },
  { title: 'Crónica de una muerte anunciada', author: 'Gabriel García Márquez' },
  { title: 'El amor en los tiempos del cólera', author: 'Gabriel García Márquez' },
  { title: 'Bestiario', author: 'Julio Cortázar' },
  { title: 'Las armas secretas', author: 'Julio Cortázar' }
];

filter Books By Author(books, ‘Jorge Luis Borges’) return ==> [
  { title: 'El Aleph', author: 'Jorge Luis Borges' },
  { title: 'Ficciones', author: 'Jorge Luis Borges' },
  { title: 'El hacedor', author: 'Jorge Luis Borges' }
]

Segunda parte

• A partir de lo realizado en la primera parte, utilizar la función para obtener todos los libros de un autor a elección, luego mediante métodos de array modificar el nombre del autor de todos los libros filtrados.
• Verificar que si se muestra en consola los libros filtrados se verá el autor modificado. ¿Qué sucede si se muestra en consola el array original?

Tercera parte

• Modificar la función de la primera parte para que ahora funcione si mando el nombre completo del autor, o solo su apellido (mejorar el filtro). Por ejemplo, la función debe devolver lo siguiente, ya sea si le mando ‘Jorge Luis Borges’ o ‘Borges’:

return ==> [
  { title: 'El Aleph', author: 'Jorge Luis Borges' },
  { title: 'Ficciones', author: 'Jorge Luis Borges' },
  { title: 'El hacedor', author: 'Jorge Luis Borges' }
]

Cuarta parte

• Teniendo en cuenta lo observado en la segunda parte, corregir ese comportamiento de la forma que considere apropiada