Gráffica Academy
Creado para la ComunidadAprende a programar
Escribir al equipo

Contacta con el equipo de Gráffica Estudio Academy.

IG @ X in
Estructuras de datos

Arrays

Casi cualquier dato real del que hablas en programación viene en plural: una lista de clientes, de productos, de mensajes. Los arrays son la estructura para guardar colecciones ordenadas de valores, y sus métodos —sobre todo map, filter y reduce— son de lo más importante que vas a aprender en todo el curso.

Crear y acceder a un array

Un array se escribe entre corchetes, con valores separados por comas. Cada elemento tiene una posición (índice) que empieza en 0:

arrays-basico.js
1
Pulsa "Ejecutar" para ver el resultado.
.push(x)

Añade x al final del array.

.pop()

Quita y devuelve el último elemento.

.unshift(x) / .shift()

Igual que push/pop pero al principio del array.

.indexOf(x) / .includes(x)

La posición de x (o -1), y si x existe en el array (true/false).

.slice(inicio, fin)

Copia una parte del array sin modificar el original.


Los tres métodos que más vas a usar

Estos tres no modifican el array original: siempre devuelven uno nuevo (o un valor, en el caso de reduce). Son la forma moderna de trabajar con listas de datos en JavaScript, y los verás por todas partes en cualquier proyecto real.

.map()

Transforma cada elemento y devuelve un array nuevo del mismo tamaño. "Por cada elemento, dame otra cosa a partir de él."

.filter()

Devuelve un array nuevo solo con los elementos que cumplen una condición. "Quédate solo con estos."

.reduce()

Reduce todo el array a un único valor (una suma, un total...). El más difícil de los tres al principio — tómate tu tiempo con el ejemplo de abajo.

map-filter-reduce.js
1
Pulsa "Ejecutar" para ver el resultado.
💡 Cómo leer .reduce()

reduce((acumulado, elemento) => ..., valorInicial): recorre el array una vez, y en cada vuelta te da el resultado acumulado hasta ahora más el elemento actual. El segundo argumento (0 en el ejemplo) es el valor con el que empieza el acumulado antes de la primera vuelta.


forEach y encadenar métodos

Si solo quieres recorrer un array sin construir uno nuevo (por ejemplo, para hacer varios console.log), usa forEach. Y como map y filter devuelven arrays nuevos, puedes encadenarlos uno detrás de otro:

encadenar.js
1
Pulsa "Ejecutar" para ver el resultado.
⚠️ Error común

Confundir forEach con map. forEach no devuelve nada útil (siempre undefined) — solo sirve para "hacer algo" con cada elemento, no para transformar el array. Si necesitas el resultado, usa map.

Comprueba lo que has aprendido

3 preguntas · sin nota, solo para afianzar lo de hoy

1. ¿Qué diferencia hay entre .map() y .filter()?

2. En reduce((acumulado, p) => acumulado + p, 0), ¿qué representa el 0 final?

3. ¿Por qué forEach no es buena opción si necesitas el resultado transformado?

Síguenos IG @ X in