Sesión: Cierre de los 30 días de JavaScript

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:0064:06

Sesión: Cierre de los 30 días de JavaScript

30 días de JavaScript

Clase 57 de 57

Clase 57 / 57

Recursos

Aprende a construir un array en JavaScript desde cero y domina métodos clave sin depender de los nativos. Aquí verás cómo implementar map, filter, join, push, pop, shift y unshift, entender por qué los arrays son objetos y repasar for in vs for of. Además, toma nota de la fecha límite: 30 de abril y cómo asegurar tus comunicaciones.

¿Qué pasó con los treinta días de JavaScript y cuál es la nueva fecha límite?

La comunidad acordó extender el reto. La fecha límite es el 30 de abril. Esto da margen para completar los días pendientes y cerrar con examen y certificado.

Faltan días por liberar: día 24 (con playgrounds reestructurados), 27, 28, 29 y 30. Los contenidos ya están en revisión y ajustes de tests.
Si no te llegan emails: escribe a team@platzi.com con asunto: recibir mails de los retos. Explica que quieres las comunicaciones del reto.
Canales de seguimiento: correo y Discord. Ambos cuentan.
Requisitos para mentorías: 80 % de playgrounds/lecturas/quizzes y examen aprobado.
Examen: si fallas, puedes repetir. Tiempo de espera: 6 horas entre intentos.
Participación en redes: usa el hashtag treinta días JS Platzi. Hay una sorpresa para quienes han estado activos.
Próximo reto: se está preparando treinta días de Python. Compromiso anunciado: todos los ejercicios estarán disponibles desde el día 1.

¿Qué habilidades y conceptos practicarás al crear una clase de array?

El desafío pide implementar una clase que funcione como un array nativo sin usar sus métodos. Esto refuerza fundamentos de estructuras de datos y del lenguaje.

Arrays como objetos: manejar claves numéricas en un objeto this.data y un contador this.length.
Métodos a implementar: map, filter, join, push, pop, shift, unshift.
Buenas prácticas: retornos correctos (por ejemplo, push retorna el nuevo length), cuidado con valores falsy como 0, y lectura de tests.
Puente hacia más temas: se mencionan stacks, queues, singly linked list y doubly linked list para días posteriores.

¿Cómo se implementan push y map sin arrays nativos?

Idea clave: almacenar elementos en this.data usando índices y controlar this.length manualmente.

class MyArray {
  constructor() {
    this.data = {}; // objeto como contenedor indexado.
    this.length = 0; // contador de elementos.
  }

  push(item) {
    this.data[this.length] = item; // agrega al final.
    this.length += 1;               // actualiza length.
    return this.length;             // como el nativo.
  }

  map(fn) {
    const res = new MyArray();
    for (let i = 0; i < this.length; i++) {
      const element = this.data[i];
      res.push(fn(element));
    }
    return res; // retorna un nuevo array.
  }
}

Clave de aprendizaje: no usar corchetes del array nativo, pero sí claves numéricas en el objeto interno.

¿Cómo filtran y concatenan filter y join?

filter: ejecuta una condición por elemento y retorna un nuevo contenedor solo con los que la cumplen.

filter(fn) {
  const res = new MyArray();
  for (let i = 0; i < this.length; i++) {
    const el = this.data[i];
    if (fn(el)) res.push(el);
  }
  return res;
}

join: concatena todos los elementos con un separador. Evita agregar el separador al final.

join(sep = ",") {
  let out = "";
  for (let i = 0; i < this.length; i++) {
    out += this.data[i];
    if (i < this.length - 1) out += sep; // sin separador extra.
  }
  return out;
}

¿Qué hacen pop, shift y unshift en tu estructura?

pop: retorna el último elemento y reduce el length.

pop() {
  if (this.length === 0) return undefined;
  const lastIndex = this.length - 1;
  const last = this.data[lastIndex];
  delete this.data[lastIndex];
  this.length -= 1;
  return last;
}

shift: elimina el primer elemento, recorre todo a la izquierda, borra el último duplicado y reduce el length. Retorna el elemento eliminado.

shift() {
  if (this.length === 0) return undefined;
  const first = this.data[0];
  for (let i = 0; i < this.length - 1; i++) {
    this.data[i] = this.data[i + 1];
  }
  delete this.data[this.length - 1];
  this.length -= 1;
  return first;
}

unshift: desplaza a la derecha e inserta al inicio. Estrategia efectiva: iterar de derecha a izquierda, abrir espacio en 0 y asignar.

unshift(item) {
  for (let i = this.length; i > 0; i--) {
    this.data[i] = this.data[i - 1];
  }
  this.data[0] = item;
  this.length += 1;
  return this.length;
}

Punto crítico: cuidar casos como item igual a 0 y el orden de las operaciones para no sobrescribir valores.

¿Cuándo usar for in y for of en JavaScript?

Regla práctica: for of itera valores; for in itera índices o claves.

En arrays: for of entrega elementos; for in entrega índices.

const arr = [1, 2, 3];
for (const v of arr) console.log(v); // 1, 2, 3.
for (const k in arr) console.log(k); // '0', '1', '2'.

En objetos: for in recorre claves. Para valores usa Object.values con for of.

const obj = { live: 'cierre del live', students: 100000 };
for (const k in obj) console.log(k); // 'live', 'students'.
for (const v of Object.values(obj)) console.log(v); // 'cierre del live', 100000.

¿Tienes dudas sobre la implementación o sobre el reto, el examen, las mentorías o los playgrounds? Cuéntame en los comentarios qué parte te costó más y qué te gustaría ver en treinta días de Python.

¡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