Contenido del curso

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

Primeras funciones CRUD del sistema de notas

Resumen

Construir un sistema de notas en Markdown con JavaScript es la mejor forma de poner en práctica funciones, validaciones y manejo de fechas. Aquí armamos la base del proyecto notes-md, con utilidades y un CRUD que más adelante crecerá en funcionalidad.

Este recorrido te sirve si estás aprendiendo JavaScript y quieres llevar tus conocimientos a un proyecto real, no solo a ejercicios sueltos.

Cómo se organiza la base de un proyecto de notas en JavaScript

La base parte de un archivo app.js limpio, sin console.log de prueba, y con un comentario que identifica el propósito: un sistema de notas en Markdown. Sobre ese archivo construimos dos bloques: las utilidades que se reutilizan en todo el programa y las funciones del CRUD que dan vida al sistema.

¿Qué es un CRUD en un proyecto de notas? Es el conjunto de cuatro acciones básicas: crear, listar, actualizar y eliminar. Sobre esas funciones gira todo sistema de notas.

Por qué empezar por las utilidades

Las utilidades son funciones que vivirán en la parte superior del documento y se llamarán cuantas veces haga falta. La primera que necesitamos genera un identificador único para cada nota. Para eso usamos Date.now, una API nativa de JavaScript que devuelve los milisegundos transcurridos desde 1970. Ese número crece constantemente, así que sirve tanto como ID único como referencia temporal.

js function generateID() { const timestamp = Date.now(); return timestamp; }

Cómo crear una nota con validaciones en JavaScript

La función createNote recibe content y title. Antes de hacer nada, limpiamos los espacios con content.trim() y validamos que el contenido no esté vacío. Si lo está, retornamos un mensaje de error claro.

Después generamos el noteId con nuestra utilidad y guardamos currentTime con Date.now() para registrar cuándo se creó y cuándo se actualizó por última vez. Si no llega un título, asignamos por defecto Nota sin título.

Cómo construir un excerpt con un if ternario

Para mostrar un resumen corto de cada nota usamos un if ternario: si el contenido supera los 100 caracteres, recortamos con content.slice(0, 100) y agregamos tres puntos. Si no, mostramos el contenido completo.

js const noteExcerpt = content.length > 100 ? ${content.slice(0, 100)}... : content;

Aquí entra otro recurso clave: los template literals. En vez de concatenar con +, envolvemos todo en backticks y usamos ${} para interpolar variables. Queda más limpio y se lee mejor.

¿Qué son los template literals? Son cadenas de texto delimitadas por backticks que permiten insertar variables y expresiones con ${variable}, sin concatenar con el símbolo de más.

Finalmente armamos noteInfo con todos los campos separados por pipes: id, título, contenido, excerpt, creado y actualizado. En la creación, creado y actualizado comparten el mismo currentTime.

Cómo actualizar y eliminar notas con validaciones de ID

La función updateNote recibe noteId y newContent. La validación del ID cubre tres casos: que no sea undefined, que no sea null y que no sea un string vacío. Si alguno se cumple, retornamos Error: ID inválido.

Un detalle importante al copiar y pegar código: si la función recibe noteId como parámetro, no puedes volver a declararlo dentro con const. Ese fue precisamente uno de los errores que apareció al ejecutar por primera vez, con el mensaje noteId ya ha sido declarada.

Qué hacer cuando JavaScript lanza un error

Los errores son aliados, no enemigos. Cuando aparece uno, lee el mensaje, ubica la línea y revisa si hay declaraciones duplicadas o variables mal asignadas. Si te bloqueas, prueba la técnica del patito: explicarle el problema en voz alta a un objeto inanimado (un patito de hule, por ejemplo). Verbalizar el error suele revelar la solución.

Si el problema es más grande, hablas con el patote, con un compañero o con una herramienta de inteligencia artificial. La idea es no estresarte y enfocarte en lo que el editor te está mostrando.

¿Cómo valido un ID en JavaScript? Verifica que no sea undefined, null ni un string vacío usando triple igualdad (===). Si alguna condición se cumple, retorna un mensaje de error.

Cómo construir deleteNote y listNotes

La función deleteNote solo necesita noteId. Aplica las mismas tres validaciones y devuelve un mensaje con template literals: `Nota con ID ${noteId} fue eliminada`.

La función listNotes por ahora solo retorna el mensaje Listando todas las notas disponibles. La lógica completa llegará más adelante, pero la base queda lista.

Un truco útil del editor: con Command D o Control D seleccionas todas las apariciones de una palabra y las cambias a la vez. Es ideal cuando renombras variables al duplicar funciones.

Por qué cuidar el estilo del código desde el inicio

Escribir código bien organizado, con punto y coma, nombres claros y estructura legible, no es opcional. Vas a leerlo tú en el futuro o lo van a leer otras personas que colaboren contigo. El editor además te avisa cuando una variable se declara pero nunca se usa o nunca se retorna, como pasó con message en listNotes, donde faltó el return.

Al ejecutar el bloque de pruebas, el sistema responde correctamente: crea una nota sin título, una nota con título, una nota importante y muestra el error cuando el contenido viene vacío. La base del proyecto está lista para seguir creciendo.

¿Qué función te gustaría ampliar primero: el CRUD completo o el manejo de almacenamiento? Cuéntalo en los comentarios.