30 días de JS con Teffcode

Contenido del curso

¡Te damos la bienvenida a este reto!

1
¡Bienvenido al mundo de JavaScript!
01:33 min

Día 1

Día 2

Día 3

Día 4

Día 6

Día 7

Día 8

Día 9

Día 10 - Checkpoint

Día 11

Día 12

Día 13

Día 14

Día 16

Día 17

33
Prototipos en JavaScript
01:30 min

Día 18

Día 19

Día 21

Día 22

Día 23

Día 25

Día 26

0:0073:33

30 días de JS con Teffcode

30 días de JavaScript

Clase 56 de 57

Clase 56 / 57

Recursos

Aprende a implementar el patrón observer en JavaScript con un caso real de un newsletter. En una sesión de live coding, Tef mostró con claridad cómo modelar clases, manejar arrays y pasar pruebas en un Playground, destacando trucos esenciales con filter, forEach y console.log que todo dev debe dominar.

¿Qué es el patrón observer y cómo aplicarlo en un newsletter con JavaScript?

El patrón observer plantea un sujeto que notifica a sus observadores cuando hay cambios. Aquí, el sujeto es la clase Newsletter y los observadores son instancias de Subscriber. Cuando se publica un artículo, el newsletter debe avisar a cada suscriptor.

Programación orientada a objetos: clase con atributos y métodos.
Newsletter como sujeto: mantiene un array de suscriptores y envía actualizaciones.
Suscriptor como observador: conoce su email y sabe “recibir” artículos.
Artículo: objeto con propiedades title y content.

¿Qué responsabilidades tienen Newsletter y Subscriber?

Newsletter: gestionar suscripción con subscribe, eliminación con unsubscribe y notificaciones con post.
Subscriber: inicializar con email y exponer un método receive que imprime un mensaje.

¿Cómo se implementa paso a paso: subscribe, unsubscribe, post y receive?

La solución usa POO y métodos de array. Los puntos críticos son la mutación del estado y el uso correcto de filter.

subscribe: agrega un suscriptor con push al array.
unsubscribe: usa filter para crear un nuevo array sin el email dado y reasigna el resultado.
post: itera con forEach y llama subscriber.receive(article).
receive: imprime en consola con template literals que el suscriptor recibió el artículo.

Código de referencia en JavaScript:

class Newsletter {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    this.subscribers = this.subscribers.filter(sub => sub.email !== email);
  }

  post(article) {
    this.subscribers.forEach(sub => sub.receive(article));
  }
}

class Subscriber {
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo ${article.title}.`);
  }
}

Errores comunes y cómo evitarlos:

Olvidar reasignar el resultado de filter: filter no muta, crea un nuevo array; reasigna a this.subscribers.
Confiar en que forEach devuelva algo: forEach no retorna; úsalo solo para efectos (notificar).
Mensajes en consola: usa template literals para interpolar email y title.

¿Qué consejos prácticos dio Tef sobre frameworks, portafolio y entrevistas?

Además del ejercicio, Tef compartió rutas y hábitos de aprendizaje que aceleran el crecimiento profesional.

¿Por dónde empezar con frameworks como React, Vue o Angular?

Construye piezas pequeñas: una card con botón y un toast que aparece y se cierra.
Domina fundamentos: POO, métodos de array, manejo del DOM y renderizado de datos.
Elige cualquier framework y compara: JavaScript puro vs. React para entender responsabilidades.
Mantén continuidad: retos como “treinta días de JavaScript” solidifican bases.

¿Cómo fortalecer portafolio y preparar entrevistas?

Crea un portafolio en GitHub con proyectos claros y específicos.
Enfócate: sé muy bueno en pocas cosas antes de abarcar más.
Participa en comunidad: comparte, da charlas, practica pair programming.
En entrevistas y live coding: disfruta el proceso, aprende de los errores y controla lo controlable.

Extra de Tef sobre diseño de interfaz:

Sistemas de diseño: construir componentes y estilos en Figma con design tokens.
Integración en código: documentar componentes en Storybook y llevar el Design System a JavaScript.

¿Te gustaría que añadamos pruebas extra del patrón observer o que llevemos este ejercicio a React con un estado global? Cuéntalo en los comentarios y comparte tu avance.

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Alcance de las variables

Día 3

Condicionales

Switch

Ciclos

Día 4

Arrays

Objetos

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Higher order functions

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Día 11

Asincronismo

Manejando el asincronismo

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Día 13

Métodos de arrays: Includes, Join y concat

Métodos de arrays: Flat y FlatMap

Día 14

Mutable functions

Métodos de arrays: sort

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Día 17

Prototipos en JavaScript

Día 18

Abstracción en JavaScript

Encapsulamiento en JavaScript

Día 19

Herencia en JavaScript

Polimorfismo en JavaScript

Día 21

Patrones de diseño

Sinlgeton y Factory pattern en JavaScript

Día 22

Adapter y Decorator pattern en JavaScript

Builder y Protype pattern en JavaScript

Día 23

Facade y proxy pattern en JavaScript

Chain of responsability y Observer pattern en JavaScript

Día 25

Estructuras de datos en JavaScript

Hash tables en JavaScript

Día 26

Set en JavaScript

Maps en JavaScript

Día 27

Singly Linked List en JavaScript

Día 28

Stacks en JavaScript

Día 29

Queues en JavaScript

Día 30

¡Lo lograste!

Live Class

Fundamentos de JavaScript con ejemplos en vivo