Manipular arrays en JavaScript es una de las habilidades más utilizadas en el día a día de cualquier desarrollador, ya sea que trabajes en backend, frontend o data science. Aquí aprenderás a clonar el proyecto FreeHabits, levantarlo en local con un servidor de Node y leer su código para identificar los métodos de arrays que ya están en uso, antes de avanzar a técnicas más complejas.
Por qué los arrays son la estructura de datos central en JavaScript
Las listas son el formato natural en el que viaja la información. Cuando consumes una API, casi siempre te llega un array. Cuando trabajas con un dataset, también. Por eso, iterar, filtrar y transformar arrays se vuelve una tarea constante sin importar tu rol.
En el mundo laboral vas a pasar gran parte del tiempo extrayendo datos de listas, comparándolos y reorganizándolos. Dominar los métodos avanzados de arrays no es opcional, es la base sobre la que se construyen funcionalidades reales.
¿Qué es un array en JavaScript? Es una estructura de datos que guarda una colección ordenada de elementos. Es la forma más común de organizar información cuando consumes APIs o trabajas con datasets.
Cómo clonar el repositorio de FreeHabits paso a paso [01:30]
FreeHabits es el proyecto base que vas a expandir. Nació en el curso de programación orientada a objetos de Óscar Barajas y permite registrar hábitos con validaciones, frecuencia diaria o semanal y un selector de seguimiento.
Para traerlo a tu máquina sigue este flujo en la terminal:
- Copia el enlace del repositorio (HTTPS o SSH según tu configuración).
- Ejecuta
git clone seguido del enlace.
- Entra a la carpeta del proyecto con
cd freehabits-arrays-avanzados.
- Verifica tu ubicación con
pwd y lista archivos con ls -la.
Si prefieres no usar Git, puedes descargar el ZIP del repositorio y colocarlo en cualquier ubicación de tu computadora. El resultado funcional es el mismo.
Cómo levantar un servidor local con http-server [04:10]
Abrir el index.html directamente en el navegador funciona, pero conviene emular un entorno más profesional. Para eso usamos http-server, una microdependencia de Node que monta un servidor local en segundos.
Antes de instalarla, confirma que tienes Node con node --version. En la clase se trabaja con la versión 24. Después instala el paquete de forma global con npm install -g http-server. La bandera -g indica instalación global, disponible en todo tu sistema.
Una vez instalado, ejecuta http-server . dentro de la carpeta del proyecto. El punto representa el folder actual y le dice al servidor que busque el index.html ahí mismo. Te devolverá una dirección con un puerto que puedes abrir en el navegador para ver FreeHabits corriendo en local con todas sus funcionalidades intactas.
¿Para qué sirve npm install -g? Instala un paquete de manera global en tu sistema, lo que te permite usarlo como comando desde cualquier carpeta. Es ideal para herramientas como http-server.
Qué métodos de arrays ya usa el proyecto FreeHabits
Antes de agregar funcionalidades nuevas, conviene leer el código existente. Esa es una de las tareas más importantes de un desarrollador: entender lo que ya está escrito antes de modificarlo. Abre el proyecto en tu editor favorito, ya sea VS Code, Cursor o Windsurf. Cursor es un fork de VS Code, así que la interfaz se siente familiar.
El archivo central es app.js. Si haces una búsqueda dentro del repositorio, vas a encontrar varios métodos de arrays que ya están en uso y que vale la pena identificar uno por uno.
Push, find y findIndex para agregar y localizar elementos
Estos tres métodos resuelven necesidades muy concretas dentro del manejo de hábitos:
- push agrega un nuevo elemento al final del array. Se usa cuando registras un hábito nuevo.
- find busca un elemento que cumpla una condición y devuelve ese elemento.
- findIndex hace lo mismo que find, pero en lugar de devolver el elemento devuelve su posición dentro del array.
La diferencia entre find y findIndex es clave: uno te entrega el dato, el otro te entrega la coordenada para manipularlo después.
Splice, forEach, map y sort para transformar la lista
El proyecto también incluye métodos para modificar y recorrer la colección de hábitos:
- splice elimina elementos en una posición específica del array.
- forEach itera sobre cada elemento sin retornar uno nuevo.
- map transforma cada elemento y devuelve un array nuevo con los resultados.
- sort ordena el array según el criterio que definas.
Cada uno cumple un rol distinto. forEach sirve para ejecutar acciones, map para transformar datos, splice para eliminar y sort para ordenar visualmente la lista de hábitos.
Cómo leer el código antes de modificarlo
Leer código ajeno es un músculo que se entrena. Tu tarea ahora es abrir app.js, identificar dónde aparece cada uno de estos métodos y entender qué problema resuelven en el contexto de FreeHabits.
Un truco útil: pídele a una IA como ChatGPT o a la integrada en tu navegador un resumen del proyecto. Te ayuda a tener un mapa mental antes de profundizar línea por línea. La idea es que cuando empieces a sumar técnicas avanzadas de arrays, ya tengas claridad de lo que hay y de lo que falta por construir.
¿Qué método de arrays te ha resultado más confuso hasta ahora? Cuéntalo en los comentarios para resolverlo en las próximas clases.
