Si pudiera definir "JavaScript" con una sola palabra sera "versatilidad". Nosotros podemos crear cdigo de maneras diferentes usando los recursos que este lenguaje nos ofrece. Un claro ejemplo son las diferentes maneras de declarar una funcin. Esto puede ser confuso cuando comienzas a programar en JavaScript, as que es hoy vamos a analizar algunas formas de declarar funciones y en qu casos es mejor usarlas.
Me tom la libertad de no traducir ciertos conceptos y nombres porque sent que sera ms confuso, as que sorry por mi spanglish.

Qu es una funcin?

Comenzamos con lo ms importante, una funcin es un sub-programa que realiza una tarea especfica, puede tomar una entrada, la cual llamamos parmetros y retornar una salida. En JavaScript, las funciones son objetos de primera clase (first-class objects). Estas pueden ser manipuladas y asignadas as como cualquier otro objeto. Por default, si tu no agregas un return, el cual es usado si quieres regresar algo, las funciones regresan el valor de "undefined".

Existen diferentes formas de declarar una funcin, en este caso, nosotros vamos a enfocar en 6 maneras, las cuales explicar a continuacin.

1. Function Declaration

La manera ms comn de definir una funcin es usando la palabra clave function seguida del nombre, los parmetros de entrada -los cuales son opcionales- entre parntesis y separados por comas, as como las instrucciones encerradas en llaves {}.

Un punto importante de las Function Declaration es que se cargan antes de que se ejecute cualquier cdigo, por lo que se pueden llamar incluso antes de su declaracin. Este comportamiento es conocido como Hoisting.

Cundo podemos usarlas?

Al ser la forma ms fcil y comn, es mi primer opcin cuando quiero crear una funcin normal que necesita ser llamada una o ms veces .

2. Function Expression

La diferencia entre la forma anterior y sta es que las function expression pueden ser asignadas a una variable y el nombre es opcional. Funciones que no tienen nombre son llamadas anonymous functions. Existe ms de una forma de declararlas y esta es una de ellas.

Cundo podemos usarlas?

Las function expressions son comunes cuando necesitamos pasar dicha funcin como un parmetro a otra funcin. Esto comnmente se llama callback en JavaScript. Tambin es comn usarlas como closure, es decir, anidamiento de funciones que les da acceso a las definiciones dentro de la funcin externa.

3. Funciones de Flecha (Arrow Function)

Una de las nuevas caractersticas que nos trajo ES6 fueron las Arrow function. Al igual que las function expressions, stas son funciones annimas que pueden ser asignadas a una variable, la diferencia es que en las arrow functions, omitimos la palabra clave "function", por lo que lo primero que agregamos es la lista de parmetros, si no hay ninguno se indica con ( ). En caso de que solo haya un parmetro, los parntesis no son necesarios. Luego ponemos el smbolo => y las llaves {}.

A diferencia de los casos anteriores, las arrow functions no crean su propio scope.

Cundo podemos usarlas?

Puedes sacar el mejor provecho de las Arrow function cuando necesites crear funciones simples que devuelvan algo concreto, ya que ahorraras lneas de cdigo . Del mismo modo, si requieres que tu funcin est ligada al scope global y no necesitas que tenga su propio scope, las arrow function sern tus mejores amigas.

4. IIFE (Immediately Invoked Function Expression)

Como su nombre lo indica, las funciones IIFE se ejecutan inmediatamente despus de su declaracin. Como son funciones annimas sin estar asignadas a nada, no son accesibles para ser llamadas posteriormente. Para declararlas solo debemos crear una funcin annima entre parntesis () y seguida de ().

Cundo podemos usarlas?

Si necesitas crear una funcin que no se usar en el futuro, para evitar contaminar tu scope global, puedes usar una IIFE. Al permanecer en el anonimato, stas se usan y se olvidan.

5. Shorthand method definition

Nuestra siguiente forma es tambin una nueva caracterstica de ES6 donde declaramos la funcin dentro de un objeto. No es necesario agregar la palabra clave de function, por lo que solo se requieren el nombre de la funcin, los parmetros y las llaves.

Cundo podemos usarlas?

Este mtodo es una manera fcil de agregar una funcin como propiedad de un objeto y, honestamente, se ve bastante bien, porque es ordenado y limpio .

6. Function constructor

Debido a que las funciones son objetos Function, podemos crearlas usando el operador new. Para declararlas debemos pasar nuestros parmetros como argumentos y nuestro cdigo ser el ltimo argumento que reciba, todo en formato string.

Cundo podemos usarlas? O no?

Honestamente, no recomiendo utilizar este mtodo, ya que, al requerir que el cuerpo de la funcin sea de tipo string, puede causar problemas de optimizacin y una mayor probabilidad de errores .

Como vimos, existen diferentes formas de declarar funciones en JavaScript, cada una con sus ventajas y desventajas , por lo que depende de nosotros analizar el propsito de nuestra funcin antes de crearla y as tomar la mejor decisin. Te invito a que te diviertas probndolas y espero esta informacin te sea de ayuda .

Referencias

• Funciones
• Definicin de funciones
• Closures
• Hoisting

Gracias por leer !