30 días de JS con GNDX

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:0069:41

30 días de JS con GNDX

30 días de JavaScript

Clase 54 de 57

Clase 54 / 57

Recursos

Aprende a implementar una validación de formulario en JavaScript paso a paso, tal como se resolvió en una sesión de pair programming del reto de treinta días de JavaScript. Verás cómo analizar el problema, usar métodos de arrays y manejar errores de forma clara para garantizar datos consistentes y evitar correos duplicados.

¿Qué se resolvió y por qué importa en JavaScript?

Se implementó la función validateForm que recibe dos parámetros: formData (datos del formulario) y registeredUsers (usuarios ya registrados). La lógica cubre cuatro puntos clave:

Verificar campos requeridos: name, last name, email y password.
Lanzar un error con los campos faltantes si hay vacíos.
Detectar si el email ya existe en la lista de usuarios.
Agregar el nuevo usuario sin el password y retornar: «Tu registro fue exitoso, Nombre Apellido».

El enfoque resaltó la importancia del análisis antes de codificar: entender requisitos, revisar la vista, inspeccionar datos y usar herramientas como console.log, linter o incluso ChatGPT para acelerar el diagnóstico.

¿Cómo validar formularios con arrays y objetos en JavaScript?

La solución aprovechó métodos de arrays como every, filter, some y find, además de estructuras de datos como FormData y utilidades como Object.keys para comprender el objeto recibido. Se recalcó que no se pedía validar el formato del correo con regex, solo la presencia de campos y la unicidad del email.

¿Cómo verificar campos requeridos con every y filter?

Define un arreglo de requeridos: ["name", "last name", "email", "password"].
Comprueba que todos existan en formData.
Si faltan, arma un mensaje con los ausentes usando filter y join.

export function validateForm(formData, registeredUsers) {
  const requiredFields = ["name", "last name", "email", "password"];

  if (!requiredFields.every(field => formData[field])) {
    const missing = requiredFields.filter(field => !formData[field]);
    throw new Error(`Faltan los siguientes campos requeridos: ${missing.join(', ')}`);
  }

  // ... (continuación abajo)
}

Nota práctica: usar solo Object.keys(formData) te dice qué llaves existen, pero no si sus valores están vacíos. La validación debe revisar el valor de cada campo.

¿Cómo evitar emails duplicados con some o find?

Recorre la lista de usuarios para comparar el email entrante.
Lanza un error si ya existe.

  const existsUser = registeredUsers.some(user => user.email === formData.email);
  if (existsUser) {
    throw new Error(`El usuario con el email ${formData.email} ya existe`);
  }

¿Cómo guardar el usuario sin exponer el password?

Inserta solo name, last name y email.
Devuelve un mensaje de éxito personalizado.

  registeredUsers.push({
    name: formData.name,
    "last name": formData["last name"],
    email: formData.email,
  });

  return `Tu registro fue exitoso, ${formData.name} ${formData["last name"]}`;
}

¿Qué habilidades y buenas prácticas se reforzaron?

Se enfatizaron hábitos que marcan la diferencia en el día a día:

Análisis del problema antes del código. Entender entradas, salidas y reglas.
Descomposición en pasos pequeños. Requeridos, duplicados y almacenamiento por separado.
Depuración con console.log. Validar estructuras y valores reales.
Manejo de errores claro. Mensajes específicos con campos faltantes.
Métodos de arrays en contexto.
- every: confirma que todos los requeridos están presentes.
- filter: identifica campos faltantes para el mensaje.
- some/find: detecta emails duplicados.
- join: formatea el listado de faltantes.
Criterio sobre llaves vs. valores. Object.keys solo revela llaves; hay que validar contenido.
Colaboración y comunidad. Pair programming y retroalimentación en Discord.
Apoyo en herramientas. Linter, ChatGPT, búsquedas técnicas y extensiones como Code Spell Check/Checker para evitar typos.

¿Te gustaría compartir cómo validarías contraseñas o aplicarías una regex para email si el requerimiento lo pidiera? Cuéntalo en los comentarios y suma tu propia versión del reto.

Resumen

¿Qué se resolvió y por qué importa en JavaScript?

Se implementó la función validateForm que recibe dos parámetros: formData (datos del formulario) y registeredUsers (usuarios ya registrados). La lógica cubre cuatro puntos clave:

Verificar campos requeridos: name, last name, email y password.
Lanzar un error con los campos faltantes si hay vacíos.
Detectar si el email ya existe en la lista de usuarios.
Agregar el nuevo usuario sin el password y retornar: «Tu registro fue exitoso, Nombre Apellido».

¿Cómo validar formularios con arrays y objetos en JavaScript?

¿Cómo verificar campos requeridos con every y filter?

Define un arreglo de requeridos: ["name", "last name", "email", "password"].
Comprueba que todos existan en formData.
Si faltan, arma un mensaje con los ausentes usando filter y join.

export function validateForm(formData, registeredUsers) {
  const requiredFields = ["name", "last name", "email", "password"];

  if (!requiredFields.every(field => formData[field])) {
    const missing = requiredFields.filter(field => !formData[field]);
    throw new Error(`Faltan los siguientes campos requeridos: ${missing.join(', ')}`);
  }

  // ... (continuación abajo)
}

Nota práctica: usar solo Object.keys(formData) te dice qué llaves existen, pero no si sus valores están vacíos. La validación debe revisar el valor de cada campo.

¿Cómo evitar emails duplicados con some o find?

Recorre la lista de usuarios para comparar el email entrante.
Lanza un error si ya existe.

  const existsUser = registeredUsers.some(user => user.email === formData.email);
  if (existsUser) {
    throw new Error(`El usuario con el email ${formData.email} ya existe`);
  }

¿Cómo guardar el usuario sin exponer el password?

Inserta solo name, last name y email.
Devuelve un mensaje de éxito personalizado.

  registeredUsers.push({
    name: formData.name,
    "last name": formData["last name"],
    email: formData.email,
  });

  return `Tu registro fue exitoso, ${formData.name} ${formData["last name"]}`;
}

¿Qué habilidades y buenas prácticas se reforzaron?

Se enfatizaron hábitos que marcan la diferencia en el día a día:

Análisis del problema antes del código. Entender entradas, salidas y reglas.
Descomposición en pasos pequeños. Requeridos, duplicados y almacenamiento por separado.
Depuración con console.log. Validar estructuras y valores reales.
Manejo de errores claro. Mensajes específicos con campos faltantes.
Métodos de arrays en contexto.
- every: confirma que todos los requeridos están presentes.
- filter: identifica campos faltantes para el mensaje.
- some/find: detecta emails duplicados.
- join: formatea el listado de faltantes.
Criterio sobre llaves vs. valores. Object.keys solo revela llaves; hay que validar contenido.
Colaboración y comunidad. Pair programming y retroalimentación en Discord.
Apoyo en herramientas. Linter, ChatGPT, búsquedas técnicas y extensiones como Code Spell Check/Checker para evitar typos.

¿Te gustaría compartir cómo validarías contraseñas o aplicarías una regex para email si el requerimiento lo pidiera? Cuéntalo en los comentarios y suma tu propia versión del reto.

¡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