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

• 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

Hoisting and Naming

• 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

Arrow Functions

• 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;  
  

Practical Example: this, constructoras y generadores

• 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*

¿Qué sintaxis de función conviene elegir y cuándo?

• 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

Conclusión

• 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]

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]

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

[bichi]

() => ❤️