Manipular arrays en JavaScript es una de las tareas más frecuentes al desarrollar, sin importar si tu camino es backend, frontend o data science. Aquí vas a preparar el proyecto FreeHabits para practicar técnicas avanzadas de arrays: clonarlo desde GitHub, correrlo con un servidor local y leer el código existente para identificar qué métodos ya se usan.
¿Qué es el proyecto FreeHabits y por qué usarlo?
FreeHabits es una aplicación web de gestión de hábitos creada originalmente en el curso de programación orientada a objetos con Óscar Barajas. Permite registrar hábitos como leer una página diaria o jugar Xbox semanal, con validaciones y selector de frecuencia [0:38].
La razón de retomarlo es simple: ya tiene una base funcional con clases y algo de manipulación de listas, pero se queda corto en el uso de arrays. Sobre esa base vas a añadir funcionalidades más ricas usando iteración, transformación y filtrado.
¿Por qué es tan importante dominar arrays en JavaScript? Porque son la estructura de datos principal del lenguaje. Filtrar, ordenar o transformar listas aparece en casi cualquier feature real, desde renderizar una UI hasta procesar datos.
¿Cómo clonar el repositorio desde la terminal?
El proyecto vive en un repositorio enlazado en los recursos del curso. Puedes traerlo a tu máquina de tres formas, dependiendo de tu configuración [1:35].
- Clonar por HTTPS con
git clone y la URL pública.
- Clonar por SSH si ya tienes tus llaves configuradas.
- Descargar el
.zip directamente y descomprimirlo en tu carpeta de trabajo.
Una vez clonado, entra a la carpeta FreeHabits-Arrays-Avanzados. Para confirmar dónde estás parado usa pwd, que imprime la ruta actual, y ls -la para listar todos los archivos incluidos los ocultos [2:35]. Si ves el index.html y la carpeta del proyecto, la clonación fue exitosa.
¿Cómo correr el proyecto con http-server?
Abrir el index.html con doble clic funciona, pero no es lo que hace un desarrollador profesional. Lo correcto es levantar un servidor local, y para eso vas a usar una microdependencia de Node llamada http-server.
Antes verifica que tienes Node instalado con node -v. En la clase se trabaja con la versión 24 [3:14]. Como Node trae npm (Node Package Manager), puedes instalar la librería de forma global.
- Ejecuta
npm install -g http-server para instalarla globalmente.
- Dentro de la carpeta del proyecto corre
http-server ., donde el punto representa la carpeta actual.
- Abre en tu navegador la URL con el puerto que te devuelve la terminal.
¿Qué hace http-server exactamente? Levanta un servidor local que sirve tu index.html y sus archivos asociados por HTTP, emulando cómo funcionaría el sitio en producción.
En la terminal vas a ver los logs de cada request: qué archivos JavaScript y de estilos carga el navegador cada vez que entras a la página [4:35]. Deja ese servidor corriendo en una pestaña y abre otra terminal en paralelo para seguir trabajando.
¿Qué métodos de arrays ya usa el código actual?
Con el proyecto abierto en tu editor, ya sea VS Code, Cursor o Windsurf (Cursor es un fork de VS Code, así que la interfaz se siente igual), el archivo clave es app.js [6:20]. Ahí viven las clases y la lógica principal.
Leer código es una habilidad central del desarrollador. Una forma rápida de mapear qué se usa es buscar métodos específicos dentro del repositorio. Estos son los que ya aparecen en la base:
- push: agregar elementos al final de un array.
- find: buscar un elemento que cumpla una condición y devolverlo.
- findIndex: igual que
find, pero devuelve la posición en lugar del elemento.
- splice: eliminar (o insertar) elementos en una posición específica.
- forEach: iterar sobre cada elemento sin devolver nada nuevo.
- map: transformar cada elemento y devolver un array nuevo.
- sort: ordenar los elementos del array.
Cada uno cubre una acción distinta: agregar, buscar, eliminar, iterar, transformar y ordenar. Es el kit básico, y sobre él vas a construir operaciones más avanzadas en las siguientes clases.
¿Qué diferencia hay entre find y findIndex? find te devuelve el elemento que cumple la condición; findIndex te devuelve solo la posición numérica dentro del array. Uno te da el objeto, el otro te da el índice.
Un tip útil: pídele a una IA como ChatGPT que te haga un resumen del app.js para entender el flujo general del proyecto antes de tocar código. Así llegas con contexto y no leyendo línea por línea a ciegas.
Tu tarea ahora es recorrer el app.js, identificar en qué parte se usa cada uno de esos métodos y entender por qué se eligió ese y no otro. ¿Ya lo clonaste y corriste? Cuéntame en los comentarios qué método te llamó más la atención al leer el código.
