Marc Semper Lloret
← JavaScript: el lenguaje

UD3 · Guía y taller práctico

Lo que debes recordar

El método

Ante cualquier problema de programación, esta secuencia:

Cómo se ataca un problema con código
  1. ¿Qué datos entran y de qué tipo son de verdad?
  2. ¿Qué reglas se aplican y en qué orden?
  3. ¿Qué debe devolver, y qué debe devolver en los casos raros?
  4. Si el resultado no es el esperado: ¿en qué punto deja de coincidir con lo previsto?

La idea más importante

Si dentro de un año has olvidado la sintaxis, que quede esta:

Antes de ejecutar, predice. Cuando no coincida, no cambies código: busca dónde se separó lo que ocurre de lo que creías que ocurría.

De ahí sale todo lo demás: por eso convertimos los datos en el borde, por eso comparamos con el triple igual, por eso las funciones devuelven en lugar de imprimir, y por eso se usan puntos de interrupción en lugar de probar suerte.

No memorices JavaScript

No necesitas recordar todos los métodos. Tienes autocompletado, documentación e IA. Lo que necesitas es saber plantearte esto:

  • ¿De qué tipo es este valor realmente, con independencia del tipo previsto?
  • ¿Qué quiero recibir: una lista, un elemento, un booleano o un número?
  • ¿Esta función devuelve algo, o solo hace algo?
  • ¿Qué pasa si la lista está vacía?
  • ¿Qué pasa si el dato llega como texto?
  • ¿Estoy modificando el original sin querer?
  • ¿Quién valida esto, y en qué punto?
  • ¿Sabría explicar esta línea dentro de un mes?

Al terminar deberías poder responder

  1. ¿Dónde se ejecuta el JavaScript de una página?
  2. ¿Qué hace defer y por qué lo usamos?
  3. ¿Cuándo usas const y cuándo let?
  4. ¿Qué diferencia hay entre null y undefined?
  5. ¿Por qué "3" + 1 da "31" y "3" - 1 da 2?
  6. ¿Qué es NaN y cómo se detecta?
  7. ¿Por qué comparamos con el triple igual?
  8. ¿Cuáles son los seis valores falsy?
  9. ¿Qué diferencia hay entre || y ???
  10. ¿Cómo se comprueba el caso límite de una condición?
  11. ¿Cuándo eliges for...of y cuándo un for con índice?
  12. ¿Qué provoca un bucle infinito?
  13. ¿Por qué una función debe devolver en vez de imprimir?
  14. ¿Qué es el ámbito de bloque?
  15. ¿Qué es un callback?
  16. ¿Qué devuelve map, filter, find, some y reduce?
  17. ¿Por qué sort necesita una función de comparación con números?
  18. ¿Qué métodos de array mutan el original?
  19. ¿Cómo se copia un objeto sin compartir la referencia?
  20. ¿Qué es el encadenamiento opcional y qué evita?
  21. ¿Qué reglas tiene JSON que no tiene JavaScript?
  22. ¿Qué hacen JSON.stringify y JSON.parse?
  23. ¿Por qué los módulos ES necesitan un servidor?
  24. ¿Qué diferencia hay entre exportación nombrada y por defecto?
  25. ¿Qué hace try/catch/finally?
  26. ¿Por qué es peligroso un catch vacío?
  27. ¿Qué significa validar en el borde?
  28. ¿Por qué se guarda el dato y se formatea al presentar?
  29. ¿Qué es refactorizar, y cómo compruebas que no has roto nada?
  30. ¿Cómo se usa un punto de interrupción?

Si puedes responderlas y escribir desde cero un módulo que consulte una colección de datos, tienes la base que necesita la UD4.

El vocabulario de la unidad

Concepto Significa
Motor de JavaScript El programa del navegador que ejecuta tu código
Variable Un nombre para un valor
Tipo La clase de dato que contiene un valor
Conversión Pasar un valor de un tipo a otro, automática o explícita
NaN Un número que representa un cálculo imposible
Truthy / falsy Si un valor cuenta como verdadero o falso en una condición
Función Un bloque con nombre que recibe datos y devuelve un resultado
Parámetro / argumento Lo que la función declara / lo que se le pasa al llamarla
Retorno El valor que la función entrega a quien la llamó
Ámbito La zona del programa donde existe una variable
Callback Una función que se pasa a otra para que la llame
Array Una lista ordenada de valores
Mutar Modificar la estructura original en lugar de devolver otra
Método declarativo El que expresa qué quieres, no cómo recorrerlo
Objeto Un conjunto de propiedades con nombre
Referencia Que dos variables apunten al mismo objeto
Desestructuración Extraer propiedades o elementos a variables con nombre
JSON Formato de texto para intercambiar datos entre sistemas
Módulo Un fichero que exporta lo que otros pueden importar
Excepción Un error lanzado que interrumpe la ejecución
Validar en el borde Comprobar los datos en el punto donde entran
Refactorizar Mejorar cómo está escrito sin cambiar lo que hace
Punto de interrupción Una marca que detiene el programa para inspeccionarlo

La siguiente unidad

Ya sabes razonar con datos, escribir reglas, descomponer en funciones y encontrar tus propios errores. Lo que tu código todavía no toca es la página.

Lo que viene
  1. Datos en memoria
  2. El DOM · la página como objetos
  3. Eventos · lo que hace el usuario
  4. Render · pintar el estado

En la UD4 conectaremos las dos cosas: tu catálogo pintado en el documento, tus filtros manejados desde un formulario y tus datos llegando desde un servidor. El trabajo de estas seis semanas demostrará entonces su utilidad: cuando el filtro no filtre, no mirarás el botón. Mirarás la función.

Ya deberías ser capaz de

  • Explicar dónde se ejecuta JavaScript y qué relación tiene con el documento que ya sabes escribir.
  • Declarar datos con el tipo y el ámbito adecuados, y justificar cuándo usar const y cuándo let.
  • Predecir el resultado de una conversión de tipos en lugar de descubrirlo por sorpresa.
  • Escribir condicionales y bucles que expresen la regla del problema, no la primera forma que compila.
  • Diseñar funciones pequeñas, con un cometido claro, que devuelven valores en vez de imprimirlos.
  • Consultar arrays con métodos declarativos: map, filter, find, sort y reduce.
  • Modelar información real con objetos y convertirla a JSON y desde JSON.
  • Separar el código en módulos ES con import y export.
  • Detectar y tratar errores con try/catch, y validar la entrada antes de confiar en ella.
  • Depurar con la consola y con puntos de interrupción, en lugar de a base de cambios al azar.