Funciones declaradas VS funciones expresadas en Javascript

En el vasto mundo de JavaScript, las funciones son piezas fundamentales que permiten a los desarrolladores escribir código reutilizable, modular y organizado. Sin embargo, no todas las funciones en JavaScript se crean de la misma manera. Dos categorías principales emergen: funciones declaradas y funciones expresadas. Este artículo explora las diferencias, similitudes, y casos de uso para ambas, proporcionando una guía esencial para entender cuándo y cómo utilizar cada tipo de función.

Definición y sintaxis

Funciones declaradas

Las funciones declaradas se definen usando la sintaxis estándar function, seguida por el nombre de la función, paréntesis () que pueden incluir parámetros, y un bloque de código encerrado en llaves {}. Por ejemplo:

function saludar() {
  console.log("¡Hola Mundo!");
}

Funciones expresadas

Las funciones expresadas, por otro lado, se crean asignando una función anónima o nombrada a una variable. La expresión de función puede ser una función anónima o una función flecha (introducida en ES6). Ejemplo de una función expresada:

const despedida = function() {
  console.log("¡Adiós Mundo!");
};

Y en su forma de función flecha:

const saludo = () => console.log("¡Hola de nuevo Mundo!");

Diferencias clave

  • Hoisting (Elevación): Las funciones declaradas se elevan completamente al inicio de su ámbito de ejecución, lo que significa que pueden ser llamadas antes de su declaración en el código. Las funciones expresadas, en contraste, son elevadas solo en su definición de variable, pero no en su asignación, lo que implica que no pueden ser llamadas antes de su definición.
  • Sintaxis y verbosidad: Las funciones expresadas, especialmente las funciones flecha, ofrecen una sintaxis más concisa, ideal para operaciones cortas o funciones que se pasan como argumentos.
  • this Binding: El valor de this dentro de una función declarada es dinámico, basado en el contexto de ejecución. En las funciones flecha (una forma popular de funciones expresadas), this es léxicamente vinculado, lo que significa que toma el valor de this del ámbito donde la función fue definida.

¿Cuándo usar cada uno?

  • Funciones declaradas: Son preferibles para definir funciones que constituyen la funcionalidad principal de tu programa o módulo, gracias a su claridad y al hoisting.
  • Funciones expresadas: Son útiles para callbacks, funciones que se pasan como argumentos, y cuando se necesita un manejo específico del contexto this, como en el desarrollo de interfaces de usuario con frameworks modernos.

Conclusión

Entender la diferencia entre funciones declaradas y expresadas en JavaScript es crucial para escribir código limpio, eficiente y adecuado al contexto. Cada tipo tiene sus ventajas y puede ser más apropiado dependiendo de la situación específica. La elección entre uno y otro dependerá de la necesidad de hoisting, la preferencia de sintaxis, y cómo se maneja el contexto de this.

Enlaces a Libros

  • “JavaScript: The Good Parts” por Douglas Crockford
  • “Eloquent JavaScript” por Marijn Haverbeke
  • “You Don’t Know JS” (serie) por Kyle Simpson

Páginas Web y Aplicaciones para Profundizar

Scroll al inicio