Organización

Curso de Clean Code y Buenas Prácticas con JavaScript

Contenido del curso

Introducción al Clean Code

Nombre y uso de las variables

Ámbito de las variables

Funciones

Clases

Optimizaciones

Cierre

24
Sigue aprendiendo JavaScript
00:55 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:23

Organización

Curso de Clean Code y Buenas Prácticas con JavaScript

Clase 19 de 24

Clase 19 / 24

Comentarios (7)7 comentarios

LEONARD CUENCA

Hace 4 años

Clase 19: Organización

Variables → Son conocidas como propiedades en el mundo POO → son todos esos elementos donde vamos a guardar información.
Constantes → Son todos esos elementos que no van a cambiar su valor, también son conocidas como propiedades
Variables estáticas → Son elementos que pueden o no estar en la clase.
Métodos → Tus métodos son tus funciones, solo que en POO se le reconoce así, no olvides que dentro de una clase los métodos deben ser ordenados de mayor importancia a menor importancia. Lo ordenas de la siguiente manera, creas una clase y esta clase tiene un método funcional y los otros métodos que se crean es para apoyar el primer método.
Funciones estáticas → se le dicen estáticas, ya que estas no deben ser heredadas a otra clase, solo se usan en la clase principal.
Getters y setters → Estas permiten alterar y obtener alguna propiedad de tu clase. Recuerda esto se usa para no poder acceder directamente a la propiedad JS si lo permite, pero NO es buena práctica.

Markin Piero Pulache Guarniz

Hace 3 años

buen aporte

Elcira Ibarra

Hace 4 años

Organización de clases

Variables
Constantes
Variables estáticas
Métodos
Funciones estáticas
Getters y setters

Irving Juárez

Hace 3 años

Porque tener setter y getters

Los setters y getters son funciones para asignar y devolver un valor. Por ejemplo ten en cuenta los siguientes ejemplos

// SIN gettes y setters ❌
class Person {
  constructor(name) {
    this.name = name
  }
}
const irving = new Person("irving")
irving.name = "Irvong" // asignando propiedad
console.log(irving.name) // accediendo

// CON getters y setters ✔️
class Person {
  constructor(name) {
    this._name = name
  }

  get name(){
    return this._name
  }

  set name(newValue){
    this._name = newValue
  }
}
const irving = new Person("irving")
irving.name = "Irvong" // asignando propiedad
console.log(irving.name) // accediendo

Estas dos classes hacen los mismo, asignan y retornan propiedad. Suena un poco como a lo mismo, no? Porque usar setters y getters entonces? . Ahí esta el asunto, con los getters y setters nosotros podemos crear ciertas validaciones. Por ejemplo, para asignar el valor a irving.name = 4, nosotros podemos validar que el nuevo valor sea de tipo string. Con los setters se puede lograr, mientras que sin ellos, no es posible. . Lo mismo aplica para los getters. Lo que se esta haciendo es un proxy, o una capa de validación para ver si el dato que se quiere entregar o asignar puede ejecutar esa acción de acuerdo a diversas validaciones o contextos

Arturo Malgor

Hace 3 años

Las variables estáticas son variables en programación que mantienen su valor durante toda la vida útil del programa y se pueden compartir entre diferentes partes del código, como por ejemplo entre diferentes funciones o instancias de una clase.

Arturo Malgor

Hace 3 años

Los getters y setters son métodos que te permiten acceder y modificar las propiedades de un objeto de manera controlada. Los getters te permiten obtener el valor de una propiedad, mientras que los setters te permiten modificar su valor.

Para definir un getter o un setter, se utiliza la sintaxis de métodos de acceso, que es muy similar a la de los métodos normales, pero con la palabra clave "get" o "set" antes del nombre del método.

Los getters y setters son útiles para agregar validaciones y restricciones antes de obtener o modificar una propiedad, lo que te permite mantener un mayor control sobre los datos que manejas.

Carlos Rivas

Hace 2 años

Constantes → Las constantes (estáticas y finales) deben colocarse al inicio de la clase, antes de cualquier otra variable o método. Esto hace que sean fácilmente localizables, ya que suelen representar configuraciones o valores inmutables importantes para la clase.
Variables de instancia → Las variables de instancia (no estáticas) deberían venir después de las constantes. Ayuda a saber cuáles son los datos que la instancia de esta clase manejará.
Variables estáticas → Las variables estáticas (no constantes) pueden ir después de las variables de instancia. Colocarlas aquí aclara que pertenecen a la clase en lugar de a las instancias individuales.
Constructor → El constructor debe ir después de las variables, ya que permite inicializar el estado de la clase y es uno de los elementos más relevantes para entender cómo se configura una instancia.
Métodos estáticos → Los métodos estáticos deben ir después del constructor. Esto da claridad sobre las utilidades relacionadas con la clase que no requieren una instancia específica.
Métodos públicos → Los métodos públicos de la clase son las funcionalidades principales que expone la clase. Al colocarlos después del constructor y métodos estáticos, el lector puede ver directamente las operaciones que puede realizar una instancia de la clase.
Getters y setters → Aunque los getters y setters son métodos públicos, suelen colocarse juntos después de los demás métodos públicos para no interrumpir la lectura de las operaciones principales de la clase.
Métodos privados → Finalmente, los métodos privados deben ir al final de la clase, ya que son detalles de implementación interna y no están destinados a ser utilizados fuera de la clase.

public class MiClase {

    // Constantes
    private static final int CONSTANTE = 100;

    // Variables de instancia
    private int variableInstancia;

    // Variables estáticas
    private static int contador;

    // Constructor
    public MiClase(int valor) {
        this.variableInstancia = valor;
    }

    // Métodos estáticos
    public static void metodoEstatico() {
        // lógica
    }

    // Métodos públicos
    public void metodoPublico() {
        // lógica
    }

    // Getters y setters
    public int getVariableInstancia() {
        return variableInstancia;
    }

    public void setVariableInstancia(int variableInstancia) {
        this.variableInstancia = variableInstancia;
    }

    // Métodos privados
    private void metodoPrivado() {
        // lógica interna
    }
}
```public class MiClase {



&#x20;   // Constantes

&#x20;   private static final int CONSTANTE = 100;



&#x20;   // Variables de instancia

&#x20;   private int variableInstancia;



&#x20;   // Variables estáticas

&#x20;   private static int contador;



&#x20;   // Constructor

&#x20;   public MiClase(int valor) {

&#x20;       this.variableInstancia = valor;

&#x20;   }



&#x20;   // Métodos estáticos

&#x20;   public static void metodoEstatico() {

&#x20;       // lógica

&#x20;   }



&#x20;   // Métodos públicos

&#x20;   public void metodoPublico() {

&#x20;       // lógica

&#x20;   }



&#x20;   // Getters y setters

&#x20;   public int getVariableInstancia() {

&#x20;       return variableInstancia;

&#x20;   }



&#x20;   public void setVariableInstancia(int variableInstancia) {

&#x20;       this.variableInstancia = variableInstancia;

&#x20;   }



&#x20;   // Métodos privados

&#x20;   private void metodoPrivado() {

&#x20;       // lógica interna

&#x20;   }

}

Sandra Rosa Arroyo Paredes

Hace 2 años

Un ejemplo

class Producto {
  // Constantes
  static const IVA = 0.21;
  static const DESCUENTO_MAXIMO = 0.5;

  // Variables estáticas
  static contadorProductos = 0;

  // Variables de instancia
  #id;
  #nombre;
  #precio;
  #descuento;

  constructor(nombre, precio) {
    this.#id = ++Producto.contadorProductos;
    this.#nombre = nombre;
    this.#precio = precio;
    this.#descuento = 0;
  }

  // Getters
  get id() { return this.#id; }
  get nombre() { return this.#nombre; }
  get precio() { return this.#precio; }
  get descuento() { return this.#descuento; }

  // Setters
  set nombre(nuevoNombre) {
    if (typeof nuevoNombre === 'string' && nuevoNombre.trim() !== '') {
      this.#nombre = nuevoNombre.trim();
    }
  }

  set descuento(nuevoDescuento) {
    if (nuevoDescuento >= 0 && nuevoDescuento <= Producto.DESCUENTO_MAXIMO) {
      this.#descuento = nuevoDescuento;
    }
  }

  // Métodos
  calcularPrecioFinal() {
    const precioConDescuento = this.#precio * (1 - this.#descuento);
    return precioConDescuento * (1 + Producto.IVA);
  }

  // Funciones estáticas
  static compararPrecios(producto1, producto2) {
    return producto1.calcularPrecioFinal() - producto2.calcularPrecioFinal();
  }
}

// Uso de la clase
const producto1 = new Producto("Laptop", 1000);
producto1.descuento = 0.1;
console.log(producto1.calcularPrecioFinal());

const producto2 = new Producto("Smartphone", 500);
console.log(Producto.compararPrecios(producto1, producto2));

Sandra Rosa Arroyo Paredes

Hace 2 años

Con respecto a variables/métodos de instancia/estáticas, sus diferencias clave son:

Contexto:
- Variables/Métodos de Instancia: Operan en el contexto de un objeto específico.
- Variables/Funciones Estáticas: Operan en el contexto de la clase en general.
Acceso:
- De Instancia: Se acceden a través de una instancia de la clase (objeto).
- Estáticos: Se acceden directamente a través de la clase.
Uso de Memoria:
- De Instancia: Cada objeto tiene su propia copia.
- Estáticos: Solo existe una copia compartida por todos los objetos.
Funcionalidad:
- De Instancia: Para comportamientos específicos de cada objeto.
- Estáticos: Para funcionalidades que no requieren un estado de instancia.

En resumen, los miembros de instancia (variables y métodos) están vinculados a objetos específicos y manejan el estado y comportamiento individual, mientras que los miembros estáticos (variables y funciones) pertenecen a la clase en su conjunto y manejan aspectos compartidos o globales de la clase.

// SIN gettes y setters ❌
class Person {
  constructor(name) {
    this.name = name
  }
}
const irving = new Person("irving")
irving.name = "Irvong" // asignando propiedad
console.log(irving.name) // accediendo

// CON getters y setters ✔️
class Person {
  constructor(name) {
    this._name = name
  }

  get name(){
    return this._name
  }

  set name(newValue){
    this._name = newValue
  }
}
const irving = new Person("irving")
irving.name = "Irvong" // asignando propiedad
console.log(irving.name) // accediendo

public class MiClase {

    // Constantes
    private static final int CONSTANTE = 100;

    // Variables de instancia
    private int variableInstancia;

    // Variables estáticas
    private static int contador;

    // Constructor
    public MiClase(int valor) {
        this.variableInstancia = valor;
    }

    // Métodos estáticos
    public static void metodoEstatico() {
        // lógica
    }

    // Métodos públicos
    public void metodoPublico() {
        // lógica
    }

    // Getters y setters
    public int getVariableInstancia() {
        return variableInstancia;
    }

    public void setVariableInstancia(int variableInstancia) {
        this.variableInstancia = variableInstancia;
    }

    // Métodos privados
    private void metodoPrivado() {
        // lógica interna
    }
}
```public class MiClase {

&#x20;   // Constantes

&#x20;   private static final int CONSTANTE = 100;

&#x20;   // Variables de instancia

&#x20;   private int variableInstancia;

&#x20;   // Variables estáticas

&#x20;   private static int contador;

&#x20;   // Constructor

&#x20;   public MiClase(int valor) {

&#x20;       this.variableInstancia = valor;

&#x20;   }

&#x20;   // Métodos estáticos

&#x20;   public static void metodoEstatico() {

&#x20;       // lógica

&#x20;   }

&#x20;   // Métodos públicos

&#x20;   public void metodoPublico() {

&#x20;       // lógica

&#x20;   }

&#x20;   // Getters y setters

&#x20;   public int getVariableInstancia() {

&#x20;       return variableInstancia;

&#x20;   }

&#x20;   public void setVariableInstancia(int variableInstancia) {

&#x20;       this.variableInstancia = variableInstancia;

&#x20;   }

&#x20;   // Métodos privados

&#x20;   private void metodoPrivado() {

&#x20;       // lógica interna

&#x20;   }

}

class Producto {
  // Constantes
  static const IVA = 0.21;
  static const DESCUENTO_MAXIMO = 0.5;

  // Variables estáticas
  static contadorProductos = 0;

  // Variables de instancia
  #id;
  #nombre;
  #precio;
  #descuento;

  constructor(nombre, precio) {
    this.#id = ++Producto.contadorProductos;
    this.#nombre = nombre;
    this.#precio = precio;
    this.#descuento = 0;
  }

  // Getters
  get id() { return this.#id; }
  get nombre() { return this.#nombre; }
  get precio() { return this.#precio; }
  get descuento() { return this.#descuento; }

  // Setters
  set nombre(nuevoNombre) {
    if (typeof nuevoNombre === 'string' && nuevoNombre.trim() !== '') {
      this.#nombre = nuevoNombre.trim();
    }
  }

  set descuento(nuevoDescuento) {
    if (nuevoDescuento >= 0 && nuevoDescuento <= Producto.DESCUENTO_MAXIMO) {
      this.#descuento = nuevoDescuento;
    }
  }

  // Métodos
  calcularPrecioFinal() {
    const precioConDescuento = this.#precio * (1 - this.#descuento);
    return precioConDescuento * (1 + Producto.IVA);
  }

  // Funciones estáticas
  static compararPrecios(producto1, producto2) {
    return producto1.calcularPrecioFinal() - producto2.calcularPrecioFinal();
  }
}

// Uso de la clase
const producto1 = new Producto("Laptop", 1000);
producto1.descuento = 0.1;
console.log(producto1.calcularPrecioFinal());

const producto2 = new Producto("Smartphone", 500);
console.log(Producto.compararPrecios(producto1, producto2));

Introducción al Clean Code

Deuda técnica y refactorización de código

Reglas del diseño simple

Qué es Clean Code

Nombre y uso de las variables

Uso correcto de var, let y const

Reglas para la nomenclatura

Cómo nombrar según el tipo de dato

Nombres de Variables y Funciones Correctos en JavaScript

Ámbito de las variables

Ámbito global

Ámbito local o de función

Ámbito de bloque

Ámbito estático

Hoisting

Funciones

Declaración y expresión de funciones

Parámetros y argumentos

Funciones de flecha y el this

Clases

POO con ES6 (constructores, métodos y herencia)

Herencia en JavaScript

Tamaño reducido (responsabilidad única)

Organización

Optimizaciones

Cuándo usar comentarios

Formato coherente (codear en equipos)

Principio DRY

Tipos de Algoritmos y Complejidad Big O en JavaScript

Cierre

Sigue aprendiendo JavaScript

Organización

Progreso del curso

Introducción al Clean Code

Nombre y uso de las variables

Ámbito de las variables

Funciones

Clases

Optimizaciones

Cierre