map y filter: conceptos esenciales
Transforme y seleccione datos con map y filter; encadénelos y evite las mutaciones para escribir código más seguro.
map y filter: conceptos esenciales es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 2. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 2 lecciones en total.
Introducción a map y filter
Objetivo: transformar elementos con map y seleccionar elementos con filter.
- map: transformar
- filter: seleccionar
- Encadenar map → filter
- Sin modificaciones
Conceptos básicos de map
map aplica una función a cada elemento y devuelve un arreglo nuevo (con la misma longitud).
// map transforms each value and returns a new array
const nums = [1, 2, 3];
const doubled = nums.map(function (n) {
return n * 2;
});
console.log("nums:", nums);
console.log("doubled:", doubled);
Conceptos básicos de filter
filter devuelve solo los elementos para los que la devolución de llamada devuelve true (la longitud puede cambiar).
// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];
const evens = values.filter(function (n) {
return n % 2 === 0;
});
console.log("values:", values);
console.log("evens:", evens);
Ejemplo de encadenamiento
Combine pasos: use map para transformar y después filter para seleccionar.
// Chain methods for clarity
const prices = [4, 7, 10];
// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
return p * 1.1;
});
const expensive = withTax.filter(function (p) {
return p > 8;
});
console.log("withTax:", withTax);
console.log("expensive:", expensive);
Demostración sin modificaciones
Inmutabilidad: map/filter devuelven arreglos nuevos; el original no cambia.
// map and filter do not mutate the original array
const base = [2, 4, 6];
const plusOne = base.map(function (n) {
return n + 1;
});
const small = base.filter(function (n) {
return n < 5;
});
console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
Consejos para arreglos claros
Consejos:
- Asigne buenos nombres a las devoluciones de llamada pequeñas (n, item) para mayor claridad.
- Mantenga cortas las cadenas (2 o 3 pasos como máximo).
- Prefiera devoluciones de llamada puras (sin efectos secundarios).
Cuestionario sobre map y filter
Comprobación rápida: transformar cada elemento.
Repaso
Repaso: Utilice map para transformar valores, filter para seleccionar algunos y encadénelos sin modificar el array original.
Preguntas frecuentes
¿La lección «map y filter: conceptos esenciales» es gratis?
Sí — el texto completo de «map y filter: conceptos esenciales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 2 lecciones en total.
¿Qué aprenderé en «map y filter: conceptos esenciales»?
Transforme y seleccione datos con map y filter; encadénelos y evite las mutaciones para escribir código más seguro. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 2.
¿Cuánto tiempo toma la lección «map y filter: conceptos esenciales»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- map y filter: conceptos esenciales
- reduce, some/every y find: patrones sencillos