La diferencia entre las funciones normales y las funciones arrow en JavaScript: cuándo usar cada sintaxis

(jrsinclair.com)

22 puntos por GN⁺ 2025-07-15 | 3 comentarios | Compartir por WhatsApp

En JavaScript existen varias formas de declarar funciones, como la declaración de función con la palabra clave function, la expresión de función y la función arrow
A las declaraciones de función se les aplica hoisting, por lo que pueden referenciarse desde cualquier parte del código
Las funciones arrow tienen la ventaja de una sintaxis concisa, pero presentan diferencias importantes, como que no tienen enlace de this/arguments/super
No es adecuado usar funciones arrow para funciones constructoras, generadores ni métodos
Para callbacks simples o funciones anónimas, las funciones arrow suelen ser más adecuadas

Function Declarations, Function Expressions, and Arrow Functions

En JavaScript se pueden definir funciones de tres maneras: declaración de función (statement), expresión de función (expression) y función arrow (arrow function)
La declaración de función vincula directamente un nombre, como en function isVowel(chr) { ... }, y puede referenciarse desde cualquier parte del código (hoisting). Además, el nombre de la función aparece de forma clara en los stack traces y durante la depuración
Una expresión de función es una forma de asignar una función anónima a una variable, como const takeWhile = function(predicate, arr) { ... }
Las expresiones de función también pueden tener un nombre interno, pero ese nombre no se vincula al scope externo y se usa principalmente para rastrear errores en los stack traces

Las declaraciones de función son elevadas (hoisted) por el motor de JavaScript, por lo que funcionan incluso si se llaman antes de su declaración
Las expresiones de función anónimas solo pueden llamarse después de que la variable haya sido asignada
Para depurar, darle un nombre explícito a una función puede ser ventajoso en los stack traces

Sintaxis corta y concisa: se escriben como (parámetros) => { ... } sin la palabra clave function
Siempre son funciones anónimas (aunque pueden usarse como si tuvieran nombre al asignarlas a una variable)
Solo pueden usarse como expresiones (expression), no como sentencias (statement)
No tienen enlace de this/arguments/super: a diferencia de las declaraciones o expresiones de función, capturan el this del scope superior
Si hay una sola expresión, pueden omitirse las llaves y return; si hay un solo parámetro, también pueden omitirse los paréntesis
No pueden usarse como constructoras: una función arrow no puede invocarse con la palabra clave new y no funciona como función constructora
No pueden ser generadores: no pueden usar yield ni convertirse en funciones generadoras

Ejemplo de código:

const sum = (a, b) => a + b;  
const square = x => x * x;

Se ofrece un ejemplo de la diferencia en la forma en que una función normal y una función arrow manejan this
- Al usarlas como método dentro de un objeto, una función normal hace que this apunte al propio objeto, mientras que una función arrow apunta a undefined o al this del scope externo
Si se define una función constructora como función arrow, se produce un TypeError
Una función generadora debe usar obligatoriamente la sintaxis function*

Si necesitas un generador (usar yield) → usa function*
Si necesitas usar this → usa la palabra clave function o un método de clase
Si necesitas hoisting o quieres mejor legibilidad a alto nivel → usa una declaración de función
Si no aplica ninguna de esas condiciones → suele convenir escribirlo de forma más concisa con una función arrow

En JavaScript, la sintaxis de función debe elegirse según el propósito, si se necesita this y si se trata de una constructora o un generador
Para callbacks cotidianos y funciones simples, la mejor opción suelen ser las funciones arrow
Para métodos de objeto, constructoras y generadores, es necesario usar la sintaxis function
Si necesitas hoisting o más libertad en el orden de declaración, la declaración de función resulta más conveniente

ng0301 2025-07-15

Importa tanto como lo del prototype si existe o no...
También cómo se referencia la función de orden superior que se crea...

bichi 2025-07-15

const a = (a: () => null): (() => () => null) =>() => a

bichi 2025-07-15

() => ❤️