JavaScript Academy · Lección

Funciones puras y efectos secundarios

Escriba funciones predecibles y fáciles de probar.

Funciones puras y efectos secundarios es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. 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 4 lecciones en total.

Qué hace pura a una función

Una función pura tiene dos propiedades: dados los mismos valores de entrada, siempre devuelve el mismo resultado y no provoca efectos secundarios observables. Las funciones puras son predecibles y fáciles de probar.

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
console.log(add(2, 3)); // always 5

Resultado determinista

La pureza implica determinismo. Los mismos argumentos siempre deben corresponder al mismo resultado, sin depender de estado oculto, del tiempo ni de la aleatoriedad.

function double(n) {
  return n * 2;
}
console.log(double(10)); // always 20

Qué es un efecto secundario

Un efecto secundario es cualquier cosa que hace una función además de devolver un valor: registrar información, modificar estado externo, escribir en el almacenamiento, realizar llamadas de red o cambiar sus argumentos.

let total = 0;
function impureAdd(n) {
  total += n;     // side effect: mutates outer state
  return total;
}
console.log(impureAdd(5));
console.log(impureAdd(5)); // 5 then 10, not pure

Depender de un estado externo

Leer también un estado externo mutable rompe la pureza, porque el resultado cambia aunque el argumento siga siendo el mismo.

let rate = 1.5;
function priceImpure(x) {
  return x * rate; // depends on outside variable
}
console.log(priceImpure(10)); // 15
rate = 2;
console.log(priceImpure(10)); // 20 - different result

Hacerla pura

Pase como argumentos todo lo que la función necesite. Así, su resultado dependerá únicamente de las entradas.

function price(x, rate) {
  return x * rate;
}
console.log(price(10, 1.5)); // 15
console.log(price(10, 2));   // 20

Modificar argumentos no es puro

Cambiar un objeto o un array que se ha pasado como argumento es un efecto secundario que el código que realiza la llamada puede observar. Las funciones puras no modifican sus entradas.

function impurePush(arr, x) {
  arr.push(x);   // mutates caller array
  return arr;
}
const a = [1, 2];
impurePush(a, 3);
console.log(a); // [1, 2, 3] - caller changed

Devolver valores nuevos

Una versión pura crea y devuelve un valor nuevo en lugar de modificar la entrada.

function pureAppend(arr, x) {
  return [...arr, x];
}
const a = [1, 2];
const b = pureAppend(a, 3);
console.log(a); // [1, 2] unchanged
console.log(b); // [1, 2, 3]

Por qué resulta útil la pureza

Las funciones puras son muy fáciles de probar (sin configuración ni mocks), se pueden almacenar en caché de forma segura (memoización) y se pueden ejecutar de forma segura en cualquier orden o en paralelo. Facilitan el razonamiento local sobre el código.

function square(n) { return n * n; }
console.log([1, 2, 3].map(square)); // [1, 4, 9]

Aislar la impureza

No puede evitar todos los efectos secundarios: las aplicaciones deben registrar información, obtener datos y renderizar. El objetivo es llevar los efectos a los extremos y mantener pura la lógica central.

function computeTotal(items) {
  return items.reduce((s, i) => s + i.price, 0);
}
const total = computeTotal([{ price: 5 }, { price: 7 }]);
console.log(total); // 12 - pure core, log at the edge

Transparencia referencial

Una llamada pura se puede sustituir por su resultado sin cambiar el comportamiento. add(2, 3) es intercambiable con 5 en cualquier lugar. Esta propiedad se denomina transparencia referencial.

function add(a, b) { return a + b; }
const x = add(2, 3) + add(2, 3);
const y = 5 + 5;
console.log(x === y); // true

Detectar la impureza

Busque indicios: console, Math.random, Date.now, asignaciones a variables externas o modificaciones de argumentos. Cualquiera de estas acciones hace que una función sea impura.

function pureRoll(seed) {
  return (seed * 1103515245 + 12345) % 100;
}
console.log(pureRoll(42)); // deterministic, testable

Comprobación rápida

Identificar funciones puras.

Resumen

Las funciones puras son deterministas y no tienen efectos secundarios: no modifican elementos externos, no realizan operaciones de entrada y salida ni modifican argumentos. Pase las dependencias como argumentos y devuelva valores nuevos en lugar de modificar los existentes. La pureza proporciona facilidad de prueba, memoización, transparencia referencial y seguridad al ejecutarse en paralelo. Mantenga pura la lógica central y lleve los efectos a los extremos.

Preguntas frecuentes

¿La lección «Funciones puras y efectos secundarios» es gratis?

Sí — el texto completo de «Funciones puras y efectos secundarios» 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 4 lecciones en total.

¿Qué aprenderé en «Funciones puras y efectos secundarios»?

Escriba funciones predecibles y fáciles de probar. 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 4.

¿Cuánto tiempo toma la lección «Funciones puras y efectos secundarios»?

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

← Volver a JavaScript Academy