Funciones en JavaScript: ámbito y cierres

Una función da nombre a una tarea y almacena las instrucciones para realizarla. Definirla no ejecuta esas instrucciones. Una llamada las ejecuta y otra llamada las ejecuta de nuevo con entradas nuevas.

Escribe la definición

Una declaración tiene la palabra clave function, un nombre, paréntesis para los parámetros y llaves para el cuerpo:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Aquí name es un parámetro: un nombre local para la entrada que proporciona cada llamada. El cuerpo une esa entrada al texto que la rodea y muestra el resultado. La llave de cierre marca el final de la definición; la ejecución continúa con la siguiente sentencia fuera de ella.

Una función sin entradas también necesita paréntesis. Por ejemplo, function sayHi() { console.log("Hi"); } define una tarea con una lista de parámetros vacía. Las llaves pertenecen a la definición; los paréntesis después de un nombre aparecen tanto en las definiciones como en las llamadas, con funciones distintas.

Ejecuta la tarea

greet("Amira");
greet("Li");

La primera llamada asigna a name el valor "Amira" y muestra «Hello, Amira!». La segunda inicia una nueva llamada con name igual a "Li" y muestra «Hello, Li!». La definición se comparte; la entrada pertenece a cada llamada individual.

greet por sí solo se refiere al valor de la función. No ejecuta el cuerpo. Esta distinción importa cuando una línea parece no hacer nada: sayHi; lee un valor de función y lo descarta, mientras que sayHi(); muestra «Hi».

Sustituye instrucciones copiadas

Supón que varios informes necesitan un encabezado rodeado de líneas:

function printHeading(title) {
  console.log("-----");
  console.log(title);
  console.log("-----");
}

printHeading("Report");
printHeading("Totals");

La primera llamada muestra una línea, «Report» y otra línea. La segunda muestra el mismo marco alrededor de «Totals». Para cambiar el estilo de las líneas, edita las dos sentencias que las muestran en esta única definición. Sin la función, habría que corregir cada encabezado copiado por separado.

Elige un nombre que indique qué hace una llamada. printHeading describe una acción; isValidEmail nombra una comprobación de sí o no. Usa camelCase, con la primera palabra en minúscula y las siguientes con mayúscula inicial. Si un nombre propuesto une dos tareas distintas con «y», considera dar a cada tarea su propia función.

Lee código que llama anticipadamente a una declaración

Las declaraciones se preparan antes de que se ejecute el código que las rodea. Este comportamiento se llama elevación de declaraciones (hoisting):

sayHi();
function sayHi() {
  console.log("Hi");
}

La llamada funciona dentro del ámbito de la declaración aunque la definición escrita aparezca después. La elevación no hace que el cuerpo se ejecute antes; hace que la función esté disponible para llamarla.

Comprueba la ortografía y el uso de mayúsculas cuando falle una llamada. Greet() y greet() son nombres diferentes. Llamar a greeet() sin declararla genera un ReferenceError; omitir los paréntesis de llamada puede fallar silenciosamente, porque leer una función existente es código válido.

Las funciones son valores. Puedes guardar una en una variable, copiar su referencia, pasarla a otra función o devolverla. Una expresión de función crea ese valor donde se espera una expresión.

Almacena una función

const square = function (n) {
  return n * n;
};

const answer = square(4);

La expresión después de = crea una función. La asignación la almacena en square; la llamada posterior devuelve 16. Esta sentencia termina con punto y coma, siguiendo la convención de formato usada aquí.

La posición de function distingue las formas. Una definición escrita como function square(n) { ... } por sí sola es una declaración. Una función escrita después de = o directamente como argumento de una llamada es una expresión. Ambas formas de función ordinaria pueden aceptar parámetros y devolver valores.

Usa const para una variable que contiene una función cuando su valor deba mantenerse igual. Se permite llamar a square(5); asignar square = 5; genera un TypeError. La constante protege la variable frente a su sustitución. No impide llamar repetidamente a la función.

Guarda una función o guarda su resultado

const sq = square;
const result = square(3);

sq se refiere a la misma función que square. Llamar a sq(3) devuelve 9. result contiene el número 9 que devolvió una llamada. No se puede llamar a ese número como función. typeof square y typeof sq son "function"; typeof result es "number".

Leer una asignación de derecha a izquierda ayuda: decide primero si su lado derecho crea una función, se refiere a una función existente o llama a una. La variable de la izquierda recibe ese valor. Copiar la referencia no crea una segunda implementación independiente.

Espera a que se ejecute la asignación

Una declaración y una expresión almacenada se pueden llamar en momentos diferentes:

Con const o let, el nombre no se puede usar antes de la inicialización. Con var, el nombre existe desde antes, pero el valor de función no se asigna hasta que la ejecución llega a la expresión. Elevar la variable no eleva la asignación.

Da a una expresión un nombre interno

const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

El nombre externo es factorial. El nombre fact pertenece al interior de la función y permite que se llame a sí misma; el código externo no puede usar directamente ese nombre interno. El nombre de la expresión también puede facilitar la lectura de las trazas de la pila. Por ejemplo, factorial(3) calcula 3 por 2 por 1 y devuelve 6.

Las declaraciones funcionan bien para las principales tareas con nombre de un script. Las expresiones encajan donde el código necesita un valor de función, como en una asignación a una variable o en un argumento. Elegir una expresión cambia cómo se crea y almacena el valor, no cómo lo llaman los paréntesis.

Las funciones flecha son expresiones de función con una escritura más corta. Su comportamiento de retorno depende de lo que sigue a la flecha, así que examina el cuerpo antes de decidir qué produce una llamada.

Elige la forma de los parámetros

const sayHi = () => "hi";
const double = n => n * 2;
const add = (a, b) => a + b;

Si no hay parámetros, se necesitan paréntesis vacíos. Un solo parámetro simple puede omitirlos. Dos o más los requieren. Un parámetro predeterminado o de resto también necesita paréntesis: (n = 1) => n * 2 y (...nums) => nums.length son válidos.

La flecha separa las entradas del cuerpo. const double = n => n * 2; crea la función y la almacena; double(6) la llama después y devuelve 12. Como cualquier const que contiene una expresión de función, double no se puede leer antes de que se ejecute su línea de inicialización.

Devuelve una expresión o escribe un bloque

Un cuerpo conciso devuelve su expresión automáticamente. Las llaves comienzan un bloque de sentencias. En un bloque, evaluar una expresión no la devuelve a quien llamó; escribe return de forma explícita.

Usa un bloque cuando la tarea necesite trabajo intermedio:

const describe = (n) => {
  const kind = n % 2 === 0 ? "even" : "odd";
  return n + " is " + kind;
};

Para describe(7), la condición es falsa, por lo que kind toma el valor "odd". El retorno une entonces el número y las palabras en «7 is odd». Eliminar ese retorno mantendría el cálculo local, pero daría undefined a quien llamó.

Devuelve un literal de objeto

Un literal de objeto también usa llaves. Enciérralo entre paréntesis para que el analizador lo interprete como una expresión:

const makePoint = (x, y) => ({ x: x, y: y });

makePoint(2, 5) devuelve un objeto con x igual a 2 e y igual a 5. Sin los paréntesis, la primera llave comienza un bloque. La forma con una sola propiedad () => { value: 1 } devuelve undefined; la forma similar con dos propiedades separadas por una coma produce un error de sintaxis. Los paréntesis cambian cómo se interpreta el cuerpo.

Conoce los límites de la forma abreviada

Las funciones flecha no tienen sus propios this ni arguments, y no se puede llamar a ellas con new para construir objetos. Para un cálculo sencillo que no usa ni this ni arguments, una función flecha y una expresión de función ordinaria se comportan igual. Sustituir todas las funciones ordinarias por funciones flecha puede cambiar el código que depende de esas características.

Las funciones flecha cortas son especialmente legibles como funciones de devolución de llamada. [1, 2, 3].map(n => n * 10) pasa una función que devuelve un elemento transformado y produce [10, 20, 30]. Cambiarla a n => { n * 10; } hace que se pierda silenciosamente cada valor devuelto.

Los parámetros de una función dan nombre a los valores proporcionados por una llamada. Para seguir una llamada, relaciona primero las entradas por posición y después sigue las operaciones del cuerpo.

Relaciona posiciones y tipos

function area(width, height) {
  return width * height;
}

area(4, 2.5);

width y height son parámetros; 4 y 2,5 son argumentos. Durante esta llamada, width contiene 4 y height contiene 2,5, por lo que el resultado es 10. Los nombres de los parámetros no se relacionan con los nombres de las variables de quien llama. Con divide(a, b), cambiar divide(10, 2) por divide(2, 10) cambia el resultado de 5 a 0,2.

JavaScript no exige un número concreto de argumentos. area(4) deja height como undefined; multiplicar por ese valor produce NaN. area(4, 2, 99) devuelve 8 porque este cuerpo no usa el tercer argumento. Una función puede recopilar argumentos adicionales, pero los que no se usan no causan un error automático.

Los tipos también importan aunque se acepte la llamada. area("4", 2) devuelve 8 porque la multiplicación convierte el texto. Una función de suma se comporta de otra manera: add("4", 2) devuelve «42» cuando su cuerpo es return a + b;. Si el texto representa un número, add(Number("4"), 2) devuelve 6.

Reasigna un parámetro local

Cada parámetro es local a su llamada. Asignarle un número nuevo no reasigna la variable de quien llama:

let score = 5;
function reset(s) {
  s = 0;
}
reset(score);

La llamada copia el valor 5 en s. La asignación cambia s a 0 y score sigue valiendo 5. Los números, las cadenas y los booleanos siguen esta regla de copia de valores. El código externo no puede leer s directamente; una función anidada puede conservar el acceso a él mediante un cierre.

Modifica un array mediante una referencia copiada

Un valor de tipo array es una referencia a un array. Al pasar ese valor se copia la referencia, por lo que quien llama y el parámetro pueden acceder al mismo array:

const list = [1, 2];
function addItem(arr) {
  arr.push(3);
}
addItem(list);

Ahora list es [1, 2, 3]. La función no reasignó list; modificó el array al que acceden ambos nombres. Una declaración const impide sustituir la referencia almacenada, no cambiar el contenido del array.

Compara con una reasignación local:

function clearLocal(arr) {
  arr = [];
}
clearLocal(list);

Esto hace que solo arr apunte a un array vacío nuevo. list sigue apuntando a [1, 2, 3]. Pregúntate si una operación modifica un array existente, como hace push, o da a un nombre un valor diferente, como hace =.

Devuelve un array nuevo cuando la entrada deba permanecer intacta

function withItem(arr, item) {
  return arr.concat(item);
}

withItem([1, 2], 3) produce [1, 2, 3] como un array nuevo. El array de entrada sigue siendo [1, 2]. Esto hace que la función sea útil cuando quien llama necesita tanto la lista original como la ampliada. Documenta mediante el nombre y el comportamiento de una función los cambios que se espera que haga en sus entradas, para que quienes la llamen puedan usarla de forma predecible.

Los valores predeterminados hacen que una entrada sea opcional; los parámetros de resto permiten que una llamada proporcione muchas entradas. La sintaxis de propagación conecta un array existente con una función que espera argumentos separados.

Aplica un valor predeterminado solo para undefined

function greet(name = "friend") {
  return "Hello, " + name;
}

Tanto greet() como greet(undefined) devuelven «Hello, friend». greet(null) devuelve «Hello, null» y greet("") devuelve «Hello, ». Un valor predeterminado se aplica a undefined, no a todos los valores que parecen vacíos.

Los valores predeterminados se evalúan cuando una llamada los necesita. Pueden usar parámetros anteriores: function makeBox(width, height = width) { return width * height; } devuelve 9 para makeBox(3) y 12 para makeBox(3, 4). El segundo argumento explícito sustituye el valor predeterminado para esa llamada.

Pon primero las entradas obligatorias. Con function total(amount, rate = 0.25) { return amount + amount * rate; }, total(80) devuelve 100 y total(80, 0.5) devuelve 120. Invertir los parámetros haría que la llamada habitual con la tasa predeterminada requiriera total(undefined, 80).

El código antiguo puede usar level = level || 50;. Esto también sustituye 0, false y una cadena vacía porque son valores falsos en contexto booleano. Un parámetro predeterminado conserva esos valores: function setVolume(level = 50) { return level; } devuelve 0 para setVolume(0) y 50 para setVolume(undefined).

Reúne argumentos con un parámetro de resto

function sum(...numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

sum(1, 2, 3) coloca [1, 2, 3] en numbers y devuelve 6. sum() le da un array vacío, por lo que el bucle no suma nada y devuelve 0. Un parámetro de resto es un array real, listo para usar métodos de array o recorrerlo.

Una entrada fija puede aparecer antes del parámetro de resto: en function log(label, ...values) { console.log(label, values); }, log("scores", 7, 9) da a label la cadena «scores» y a values el array [7, 9]. Solo se permite un parámetro de resto y debe ir al final; de lo contrario, JavaScript no puede asignar los argumentos restantes sin ambigüedad con esta sintaxis.

Expande argumentos con propagación

Math.max(...[3, 7, 2]) recibe tres números y devuelve 7. Math.max([3, 7, 2]) recibe un array y devuelve NaN. Los tres puntos son idénticos en el texto, pero la sintaxis que los rodea indica qué función cumplen.

Las funciones ordinarias también tienen un objeto arguments que contiene los argumentos que se les pasaron. Es similar a un array, con entradas indexadas y una longitud, pero no es un array real y no tiene métodos propios map ni filter. Las funciones flecha no tienen su propio arguments. Para código nuevo que necesita una lista flexible de entradas, prefiere un parámetro de resto.

Un valor devuelto es la salida que otro código recibe de una llamada. Mostrarlo puede enseñar el mismo valor en pantalla, pero da a quien llama un resultado diferente a menos que la función también lo devuelva.

Usa la llamada como un valor

function double(n) {
  return n * 2;
}
const x = double(5) + 1;

double(5) devuelve 10, por lo que la asignación se evalúa como 10 más 1 y almacena 11. Una llamada puede aparecer en cualquier lugar donde se necesite un valor adecuado. double(double(3)) obtiene primero 6 de la llamada interna y después devuelve 12 desde la externa. Math.round(double(2.3)) duplica el valor hasta 4,6 y lo redondea a 5.

return también termina inmediatamente la llamada actual. Una cláusula de guarda maneja un caso especial antes del trabajo principal:

function safeDivide(a, b) {
  if (b === 0) {
    return null;
  }
  return a / b;
}

safeDivide(6, 0) devuelve null y nunca llega a la división. safeDivide(6, 2) omite la cláusula de guarda y devuelve 3. Coloca la condición antes de la operación que protege.

Distingue el resultado de su visualización

function addLog(a, b) {
  console.log(a + b);
}

addLog(2, 3) muestra 5, pero su valor de retorno es undefined. Por tanto, addLog(2, 3) * 2 muestra 5 y se evalúa como NaN. Una función que llega a su final sin un retorno, o ejecuta un return; sin valor, devuelve undefined. La visualización en la consola es un efecto secundario, no el resultado numérico utilizable de la llamada.

Si quien llama necesita una suma, escribe return a + b;. Entonces podrá elegir entre mostrarla, almacenarla o usarla en otro cálculo. Así las decisiones de visualización quedan fuera de un cálculo reutilizable.

Mantén la expresión devuelta en la misma línea

function brokenAdd(a, b) {
  return
  a + b;
}

JavaScript termina la sentencia return en el salto de línea. La función devuelve undefined; nunca se llega a la expresión posterior. Para una expresión larga, empieza a escribirla o abre un paréntesis en la línea de return y después continúa debajo.

Agrupa varios resultados en un valor

Una llamada devuelve un valor, pero ese valor puede ser un array:

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [low, high] = minMax([4, 9, 1]);

El array devuelto es [1, 9]. La desestructuración asigna su primera entrada a low y la segunda a high. Sigue habiendo un solo valor devuelto, que contiene dos resultados útiles.

Una función pura calcula su salida a partir de sus argumentos y no cambia nada fuera de sí misma. double es pura. Mostrar valores, actualizar una variable externa y modificar un array de entrada son efectos secundarios. Los cálculos puros son fáciles de comprobar con ejemplos de entradas y salidas; los efectos secundarios pertenecen a funciones con nombres claros allí donde el programa necesita cambios visibles.

Cuando una función llama a otra, la función que llama se pausa hasta que termina esa llamada. La pila de llamadas registra el trabajo pendiente para que la ejecución pueda reanudarse en el lugar correcto.

Añade y elimina marcos de llamadas

Cada llamada activa tiene un marco de pila que contiene sus parámetros, variables locales y lugar de retorno. Una nueva llamada se coloca en la cima de la pila; un retorno elimina ese marco superior.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}
sumOfSquares(3, 4);

Primero, sumOfSquares comienza con a igual a 3 y b igual a 4. Llama a square(3), que devuelve 9 y termina. Después se ejecuta square(4) y devuelve 16. La suma pausada ahora puede completarse como 9 más 16, y sumOfSquares devuelve 25. Las dos llamadas a square no se solapan en este seguimiento.

Cada llamada obtiene parámetros y variables locales nuevos. Llamar dos veces a la misma función no reutiliza el estado numérico local de una llamada anterior. Incluso cuando una función se llama a sí misma, la nueva llamada tiene su propio marco.

Reduce un problema con recursión

Una función recursiva se llama a sí misma. Un caso base termina sin otra llamada a sí misma; un caso recursivo da un paso hacia ese caso base.

function factorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

Para entradas enteras no negativas, esto multiplica los enteros hasta llegar a 1. Sigue factorial(4) en dos direcciones:

1. factorial(4) espera a factorial(3).
2. Esa llamada espera a factorial(2).
3. Esa llamada espera a factorial(1).
4. El caso base devuelve 1.
5. Las llamadas en espera devuelven 2, después 6 y después 24.

La multiplicación en la llamada con n igual a 4 ocurre después de que termine la llamada más pequeña. Su propia n se ha mantenido en 4 mientras esperaba.

El caso base debe ser alcanzable. Usar solo n === 1 falla para una entrada inicial de 0 si cada llamada recursiva resta 1: los valores se vuelven negativos y nunca llegan a 1. n <= 1 cubre tanto 0 como 1. Sin una vía de parada, las llamadas repetidas agotan la pila. Chrome y Node.js muestran «RangeError: Maximum call stack size exceeded»; Firefox usa «InternalError: too much recursion».

Reconoce una versión más pequeña de la misma tarea

function countItems(list) {
  let count = 0;
  for (const item of list) {
    if (Array.isArray(item)) {
      count += countItems(item);
    } else {
      count += 1;
    }
  }
  return count;
}

countItems([1, [2, 3], [4, [5]]]) devuelve 5. Cada array anidado plantea la misma pregunta de recuento sobre una lista más pequeña. Un bucle también es adecuado para un factorial sencillo; la recursión es especialmente útil cuando los propios datos están anidados.

Si falla una llamada, lee la traza de la pila desde la llamada más reciente, arriba. Las entradas siguientes muestran qué llamadas pendientes condujeron hasta ella. Las entradas repetidas de una función pueden revelar una recursión que no se detuvo.

El ámbito de una variable es la región donde se puede usar su nombre. El ámbito permite que las funciones mantengan separados sus datos de trabajo y, al mismo tiempo, usen entradas y valores del código que las rodea.

Delimita las declaraciones

let y const tienen ámbito de bloque. Un bloque es una región dentro de llaves, como el cuerpo de un if, de un bucle o de una función:

if (true) {
  const msg = "hi";
  console.log(msg);
}

La instrucción que muestra el valor funciona dentro del bloque. Añadir console.log(msg); después del bloque genera un ReferenceError porque ese código externo no puede acceder a esta declaración. Otra declaración externa con el mismo nombre sería una variable diferente.

Los parámetros y las variables dentro de una función son locales a esa función. En function f() { let temp = 1; }, el código externo no puede leer temp. Dos funciones pueden tener cada una una variable local total sin compartirla. Cada llamada comienza con variables locales nuevas; una función anidada devuelta puede conservar después el acceso mediante un cierre.

Lee declaraciones antiguas con var

function test() {
  if (true) {
    var x = 1;
  }
  return x;
}

test() devuelve 1 porque var ignora el límite del if. Sustituirlo por let x = 1; hace que falle el retorno: la x del bloque no está disponible allí. Del mismo modo, for (let i = 0; i < 3; i++) {} mantiene i dentro del bucle, mientras que una var i permanece disponible en la función o el script que la contiene después del bucle y vale 3.

Busca hacia fuera desde la posición donde está escrita la función

Los ámbitos se anidan. Una función interna puede usar nombres de los ámbitos que la contienen, pero el código externo no puede buscar hacia dentro en las variables locales de una función interna. Esto es el ámbito léxico: el lugar donde está escrito el código determina los nombres disponibles.

const level = "global";
function show() {
  return level;
}
function run() {
  const level = "local";
  return show();
}

run() devuelve «global». show se definió fuera de run, por lo que el ámbito que la contiene incluye la level externa. Llamarla desde dentro de run no le da acceso a la level local de quien llama.

Mantén el estado compartido bajo control

Una variable de nivel superior en un script normal es global y las funciones de ese script pueden acceder a ella. Las variables globales compartidas pueden hacer que tareas independientes se afecten entre sí; los scripts de una misma página también pueden entrar en conflicto por los nombres. Pasar entradas y devolver salidas mantiene visibles las dependencias.

Declara todas las variables. En modo estricto, count = 5; genera un ReferenceError si no existe una declaración accesible. Sin modo estricto, una asignación así puede crear una variable global accidental. Un script puede activar el modo estricto con "use strict"; al principio; los módulos lo activan automáticamente. Prefiere const para valores que no se reasignan y let cuando se necesita reasignación.

El mismo nombre puede aparecer en varios ámbitos. JavaScript encuentra la declaración correspondiente buscando hacia fuera desde el código actual y deteniéndose en la primera coincidencia.

Sigue la cadena de ámbitos

let x = 1;
function f() {
  let x = 2;
  return x;
}

f() devuelve 2. La declaración local oculta la x externa, por lo que la búsqueda se detiene dentro de f. El valor externo sigue siendo 1. Un parámetro puede ocultar un nombre de la misma manera. Si ningún ámbito de la cadena declara un nombre, leerlo genera un ReferenceError.

Una asignación no declara una variable nueva. Con let count = 0; function add() { count = count + 1; }, add encuentra la declaración externa y la modifica. Añadir let cambia el significado: crea un nuevo nombre local, que puede ocultar precisamente el valor que querías leer.

Distingue el registro de la inicialización

La elevación de declaraciones describe cómo se registran las declaraciones antes de que se ejecute su ámbito. Su comportamiento inicial es diferente:

Por ejemplo, console.log(a); var a = 5; muestra undefined. La asignación del valor 5 aún no se ha producido. En cambio, console.log(b); let b = 5; falla. El intervalo durante el cual el nombre léxico existe pero no se puede acceder a él es su zona muerta temporal, que suele abreviarse como TDZ.

Sigue el sombreado antes de una línea de declaración

let n = 10;
function f() {
  console.log(n);
  let n = 20;
}
f();

La n interna oculta a la externa en todo el cuerpo de la función, incluso antes de la línea donde está escrita la declaración. En console.log(n), ese nombre interno sigue en su zona muerta temporal, por lo que la llamada genera un ReferenceError. JavaScript no pasa por alto una declaración local sin inicializar para recurrir al valor externo 10.

El mismo problema aparece en let count = count + 1; dentro de add. El lado derecho lee la nueva count local antes de que se haya inicializado. Si la intención es actualizar un contador externo, usa una asignación sin una nueva declaración. Si la intención es calcular un valor distinto, dale otro nombre y lee explícitamente el contador externo.

Distingue la reasignación de la mutación

let y const no pueden volver a declarar el mismo nombre en un ámbito; hacerlo produce un SyntaxError. Un ámbito interno puede declarar su propio nombre, lo que constituye sombreado. var permite declaraciones repetidas en su ámbito, lo que dificulta detectar la reutilización accidental de nombres.

const impide reasignar su variable. No congela un array:

const list = [];
list.push(1);

La referencia almacenada en list sigue siendo la misma mientras el array cambia a [1]. list = []; intentaría sustituir la referencia almacenada y fallaría.

Mantén cada declaración en el ámbito más pequeño que la necesite. Usar nombres distintos para tareas distintas reduce la necesidad de seguir mentalmente el sombreado, e inicializar antes de usar evita errores de zona muerta temporal.

Una función conserva un enlace al ámbito donde se creó. La función y ese acceso conservado forman un cierre. El enlace resulta especialmente útil cuando una función anidada se devuelve y se llama después de que haya terminado su llamada externa.

Da memoria a una función devuelta

function makeCounter() {
  let count = 0;
  return function () {
    count = count + 1;
    return count;
  };
}
const counter = makeCounter();

La llamada a makeCounter crea count, crea una función interna y devuelve esa función. Todavía no ejecuta el cuerpo interno. Ahora counter contiene el valor de la función. Su primera llamada cambia la count conservada de 0 a 1 y devuelve 1. La siguiente cambia la misma variable a 2 y devuelve 2.

El marco de pila de la llamada externa ha terminado, pero la variable capturada sigue siendo accesible. Una variable local que ya no tiene ningún uso accesible puede liberarse; aquí la función interna, a la que aún se puede llamar, sigue necesitándola. El acceso mediante un cierre sobrevive al retorno sin convertir la variable en global.

Crea memorias independientes con llamadas separadas

const a = makeCounter();
const b = makeCounter();
a();
a();
b();

Los resultados son 1, 2 y 1. Cada llamada a la fábrica creó una count diferente. Las dos funciones devueltas por llamadas separadas tienen el mismo código, pero distintos entornos conservados.

Copiar una referencia a una función devuelta funciona de otra manera. Si const alias = a;, entonces alias() usa el contador existente de a; no llama a makeCounter ni crea otro entorno.

Conserva variables, no copias de sus valores

let greeting = "Hi";
const say = () => greeting;
greeting = "Hello";

say() devuelve «Hello». El cierre lee la variable cuando se ejecuta, por lo que una actualización posterior es visible. No almacena una copia fija de «Hi» en el momento de su creación.

El código externo no puede acceder directamente a la count local y counter.count es undefined. Solo el código que tiene acceso a ese entorno léxico puede leerla o actualizarla. Llamar al contador desde una función diferente no cambia qué contador usa.

Comparte estado dentro de una llamada externa

function makeWallet() {
  let balance = 0;
  return [
    function deposit(n) { balance += n; return balance; },
    function getBalance() { return balance; }
  ];
}
const [deposit, getBalance] = makeWallet();
deposit(50);
deposit(20);

getBalance() devuelve 70 porque ambas funciones devueltas se crearon en la misma llamada y se refieren a la misma balance. Otra llamada a makeWallet() crea un saldo separado.

Una fábrica de funciones usa el acceso de los cierres para crear funciones con su propia configuración o estado. Quien llama proporciona la configuración una vez y después usa muchas veces la función devuelta.

Configura una función con un parámetro

function makeMultiplier(factor) {
  return (n) => n * factor;
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);

double(5) devuelve 10 y triple(5) devuelve 15. Cada función flecha devuelta conserva el factor de su propia llamada a la fábrica. La función externa configura el comportamiento; la interna realiza el trabajo repetido.

La forma compacta es const makeMultiplier = (factor) => (n) => n * factor;. Dos flechas significan que se crean dos funciones, no que se hacen dos cálculos consecutivos sobre un número. makeMultiplier(4)(5) primero devuelve una función configurada con 4 y después la llama con 5 para obtener 20.

Aplica una regla al estado privado

function makeLimiter(max) {
  let used = 0;
  return function () {
    if (used >= max) {
      return false;
    }
    used = used + 1;
    return true;
  };
}
const tryLogin = makeLimiter(3);

Las tres primeras llamadas devuelven true e incrementan used. La cuarta devuelve false antes de incrementarla. used es local a la llamada a la fábrica, por lo que el código externo no puede restablecerla mediante ese nombre. La función devuelta controla qué cambios están disponibles. Otro limitador tendría su propia variable used y su propio máximo.

Analiza funciones creadas en bucles

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}

El bucle crea tres funciones, pero una sola var i. Después del bucle, esa variable contiene 3. Llamar ahora a cualquiera de las funciones almacenadas devuelve 3 porque todos los cierres leen el mismo enlace actual. Crear una función no evalúa su cuerpo ni guarda una copia del valor actual de i.

Cambiar la cabecera a let i = 0 da al bucle un enlace separado para cada iteración. Las funciones almacenadas devuelven entonces 0, 1 y 2. La misma distinción explica la impresión diferida: una función de devolución de llamada de setTimeout que lee var i después del bucle ve el valor final, mientras que la versión con let conserva el valor de cada iteración.

Reconoce una expresión invocada inmediatamente

El código antiguo suele crear un ámbito de función privado y ejecutarlo inmediatamente:

(function () {
  var hidden = 1;
  console.log(hidden);
})();

Esta es una expresión de función invocada inmediatamente, o IIFE. Los paréntesis exteriores crean una expresión de función; los paréntesis finales la llaman. hidden pertenece a esa función, lo que la mantiene fuera del ámbito global circundante. Es un patrón habitual en código escrito antes de las declaraciones con ámbito de bloque y los módulos.

El acceso conservado también afecta a la memoria. Un cierre al que se puede llamar y que necesita un array grande mantiene esos datos accesibles. Cuando ya no se puede acceder a la función ni a sus datos capturados, estos pueden liberarse. Conserva cierres de larga duración de forma deliberada cuando su memoria forme parte de la tarea.

Una función de devolución de llamada es una función que se proporciona como argumento para que otra función la llame. Permite que la función receptora se encargue de la tarea general mientras quien llama proporciona una acción o comprobación concreta.

Pasa una acción a un bucle

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i);
  }
}
repeat(3, (i) => console.log(i));

repeat controla el bucle y elige los valores 0, 1 y 2. La función flecha determina qué hacer con cada valor: mostrarlo. Cada action(i) llama a la función proporcionada con el número de esa iteración.

Puedes pasar una función existente o escribir una en el punto de uso. repeat(2, sayHi) pasa la función con nombre. repeat(2, (i) => console.log("Round " + (i + 1))) muestra «Round 1» y «Round 2». Una función de devolución de llamada puede ignorar los argumentos que no necesita.

Pasa el valor, sin llamar antes a la función

repeat(3, sayHi()) evalúa sayHi() al preparar los argumentos. Si sayHi solo muestra texto, su valor de retorno es undefined, por lo que repeat recibe ese valor como action. La llamada posterior action(i) falla con un TypeError porque no se puede llamar a undefined como función.

Usa repeat(3, sayHi) para pasar la función. Si la llamada posterior necesita argumentos elegidos, pasa una función envolvente como () => sayHi() para que la llamada ocurra dentro del cuerpo de la función de devolución de llamada. La creación y la invocación de una función son pasos separados.

Comprueba qué argumentos proporciona la función receptora

Las funciones de devolución de llamada de los arrays suelen recibir más de un argumento: el elemento, el índice y el array completo. Pasar una función existente solo es seguro cuando esas entradas corresponden al significado de sus parámetros.

["1", "2", "3"].map(parseInt);

Esto devuelve [1, NaN, NaN]. parseInt acepta un segundo argumento para la base numérica, por lo que el índice del array cambia su comportamiento. Usa ["1", "2", "3"].map((s) => parseInt(s, 10)) para elegir explícitamente la base 10, o .map(Number) para convertir estas cadenas.

Devuelve una respuesta a la función receptora

function countIf(arr, test) {
  let n = 0;
  for (const x of arr) {
    if (test(x)) {
      n++;
    }
  }
  return n;
}

countIf([3, 8, 12, 5], (x) => x > 4) devuelve 3. La función de devolución de llamada responde una pregunta para cada elemento; countIf usa cada respuesta para decidir si incrementa el contador. Compáralo con repeat, cuyo bucle ignora el valor de retorno de la función de devolución de llamada. El código o la documentación de la función receptora indican tanto los argumentos como la función del resultado.

Las funciones de devolución de llamada pueden ejecutarse inmediatamente o más tarde. repeat y los métodos de array las llaman de forma síncrona antes de terminar. setTimeout(sayHi, 2000) programa una para más tarde mientras el código posterior continúa inmediatamente. Ser una función de devolución de llamada describe cómo se proporciona una función, no cuándo debe ejecutarse.

Una función de orden superior acepta una función, devuelve una función o hace ambas cosas. El valor de función proporciona el comportamiento, mientras que la función de orden superior gestiona un patrón reutilizable.

Escribe el patrón una vez

function myMap(arr, transform) {
  const result = [];
  for (const item of arr) {
    result.push(transform(item));
  }
  return result;
}

myMap([1, 2, 3], (n) => n * n) devuelve [1, 4, 9]. El bucle y la construcción del array de salida se mantienen iguales; la función de devolución de llamada decide cómo cambia cada entrada. Un filtro correspondiente añade un elemento solo cuando test(item) es verdadero en contexto booleano. Con [4, 7, 10, 3] y (n) => n % 2 === 0, ese patrón conserva [4, 10].

Elige el contrato de devolución de llamada que necesitas

map, filter y find no modifican por sí mismos el array de entrada, pero las funciones de devolución de llamada sí pueden hacerlo. Que un método devuelva un array nuevo no hace que todas las funciones de devolución de llamada proporcionadas sean puras.

Mantén un resultado durante una reducción

[5, 10, 15].reduce((total, n) => total + n, 0);

El acumulador inicial es 0. La función de devolución de llamada devuelve 5 para el primer elemento, 15 para el segundo y 30 para el tercero. Cada valor devuelto se convierte en el total de la siguiente llamada. El método devuelve 30 después del último elemento. Un array vacío sin acumulador inicial hace que reduce genere un TypeError; un valor inicial explícito también define un resultado útil para una entrada vacía.

Devolver arrays permite encadenar llamadas. [3, 8, 12, 5].filter((n) => n > 4).map((n) => n * 2) primero conserva [8, 12, 5] y después lo transforma en [16, 24, 10]. Lee la cadena en orden de ejecución, de izquierda a derecha.

Proporciona una regla de ordenación numérica

Sin un comparador, sort compara las entradas como cadenas. Por tanto, [10, 9, 1].sort() produce [1, 10, 9]. Para ordenar números de forma ascendente, usa .sort((a, b) => a - b). Un retorno negativo coloca a primero, uno positivo coloca b primero y cero deja el par como equivalente para la ordenación. A diferencia de map y filter, sort reorganiza su array de entrada.

Comprueba los valores devueltos

[1, 2, 3].map((n) => { n * 2; }) produce [undefined, undefined, undefined] porque el bloque no tiene retorno. Usar forEach para construir un nuevo resultado mediante una asignación también falla si esperas que el propio método devuelva un array. Elige map para transformar y forEach para acciones cuyos resultados no necesitan recopilarse.

Un método de orden superior expresa claramente un patrón conocido. Un bucle sencillo sigue siendo útil cuando el trabajo necesita break o no encaja en el contrato del método.

Una función puede devolver una función nueva que recuerda otra existente. Las funciones envolventes, la composición y la aplicación parcial usan este patrón para adaptar el comportamiento sin copiar el cuerpo de la función original.

Envuelve una llamada y conserva su resultado

function logged(fn) {
  return (...args) => {
    console.log("Calling with", args);
    const result = fn(...args);
    console.log("Result", result);
    return result;
  };
}
const add = (a, b) => a + b;

logged(add) crea una función que conserva add como fn. Llamar a logged(add)(2, 3) reúne los argumentos, los pasa a add, muestra el valor devuelto y devuelve 5. El parámetro de resto reúne las entradas de la función envolvente; la propagación las pasa. El retorno final mantiene la salida disponible para cálculos posteriores.

logged(add(2, 3)) pasa el número 5. Llamar después a esa función envolvente intenta llamar a 5 y genera un TypeError. Hay dos etapas: configurar la función envolvente con una función y después llamar a la función devuelta con entradas.

Conserva estado alrededor de una operación

function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}

Para una operación que termina normalmente, la primera llamada ejecuta fn y almacena su resultado. Las llamadas posteriores devuelven ese valor almacenado sin volver a ejecutar fn, aunque sus argumentos sean diferentes. El booleano registra si la operación se ejecutó; comprobar si el resultado es verdadero en contexto booleano sería incorrecto cuando un resultado válido es 0 o false. Cada llamada a once crea su propio indicador y resultado almacenado.

Pasa un resultado a otra función

const compose = (f, g) => (x) => f(g(x));
const addOne = (n) => n + 1;
const square = (n) => n * n;

compose(square, addOne)(3) ejecuta primero addOne(3) y después eleva 4 al cuadrado para devolver 16. compose(addOne, square)(3) primero eleva 3 al cuadrado y después suma 1, y devuelve 10. La función más cercana a la entrada se ejecuta primero, por lo que importa el orden de los argumentos de compose.

Fija algunos argumentos de antemano

function partial(fn, ...fixed) {
  return (...rest) => fn(...fixed, ...rest);
}
const greetWith = (greeting, name) => greeting + ", " + name;
const hello = partial(greetWith, "Hello");

hello("Ana") llama a greetWith("Hello", "Ana") y devuelve «Hello, Ana». Esta función auxiliar de aplicación parcial coloca primero los argumentos fijos y después los argumentos posteriores; cambiar ese orden modifica la llamada subyacente.