El mundo de las Funciones en JavaScript 
Tags: javascript, beginners, spanish
Published: 2021-08-22 19:18:29

Si pudiera definir "JavaScript" con una sola palabra sería "**versatilidad**". Nosotros podemos crear código de maneras diferentes usando los recursos que este lenguaje nos ofrece. Un claro ejemplo son las diferentes maneras de declarar una función. 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 sería más confuso, así que sorry por mi spanglish😋.

#¿Qué es una función?🤔
Comenzamos con lo más importante, una función es un sub-programa que realiza una tarea específica, puede tomar una *entrada*, la cual llamamos parámetros 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 función, en este caso, nosotros vamos a enfocar en 6 maneras, las cuales explicaré a continuación👇.

## 1. Function Declaration
La manera más común de definir una función es usando la palabra clave **function** seguida del nombre, los parámetros de entrada -los cuales son opcionales- entre paréntesis 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 código, por lo que se pueden llamar incluso antes de su declaración😱. Este comportamiento es conocido como **Hoisting**.

![01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqyrkv7c2psfow5dgik1.png)

### ¿Cuándo podemos usarlas?
Al ser la forma más fácil y común, es mi primer opción cuando quiero crear una función normal que necesita ser llamada una o más 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 más de una forma de declararlas y esta es una de ellas.

![02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ji8i59rr6fzm8bui7p04.png)
 
### ¿Cuándo podemos usarlas?
Las *function expressions* son comunes cuando necesitamos pasar dicha función como un parámetro a otra función. Esto comúnmente se llama **callback** en JavaScript. También es común usarlas como *closure*, es decir, anidamiento de funciones que les da acceso a las definiciones dentro de la función externa. 

## 3. Funciones de Flecha (Arrow Function)
Una de las nuevas características que nos trajo *ES6* fueron las **Arrow function**. Al igual que las function expressions, éstas son funciones anónimas 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 parámetros, si no hay ninguno se indica con *( )*. En caso de que solo haya un parámetro, los paréntesis no son necesarios. Luego ponemos el símbolo *=>* y las llaves *{}*.

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

![arrowFunctions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhll63qlbfn4l22i7ipn.png)
 
### ¿Cuándo podemos usarlas?
Puedes sacar el mejor provecho de las Arrow function cuando necesites crear funciones simples que devuelvan algo concreto, ya que ahorrarías líneas de código 💪. Del mismo modo, si requieres que tu función esté ligada al scope global y no necesitas que tenga su propio scope, las arrow function serán tus mejores amigas❤️.

## 4. IIFE (Immediately Invoked Function Expression)
Como su nombre lo indica, las funciones IIFE se ejecutan inmediatamente después de su declaración. Como son *funciones anónimas* sin estar asignadas a nada, no son accesibles para ser llamadas posteriormente. Para declararlas solo debemos crear una función anónima entre paréntesis *()* y seguida de *()*.

![IIFE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y92c9hc8q5u5jpmg8e30.png)
 
### ¿Cuándo podemos usarlas?
Si necesitas crear una función 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 también una nueva característica de *ES6* donde declaramos la función dentro de un objeto. No es necesario agregar la palabra clave de *function*, por lo que solo se requieren el nombre de la función, los parámetros y las llaves.

![ES6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw6rwq5alfiv859odnej.png)
 
### ¿Cuándo podemos usarlas?
Este método es una manera fácil de agregar una función 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 parámetros como argumentos y nuestro código será el último argumento que reciba, todo en formato **string**.

![6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5saaqq5erfnlvdun46hy.png)

### ¿Cuándo podemos usarlas? ¿O no? 😰
Honestamente, no recomiendo utilizar este método, ya que, al requerir que el cuerpo de la función sea de tipo *string*, puede causar problemas de optimización 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 propósito de nuestra función antes de crearla y así tomar la mejor decisión. Te invito a que te diviertas probándolas y espero esta información te sea de ayuda 🌟.



## Referencias
 - [Funciones](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions)
 - [Definición de  funciones](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Functions)
 - [Closures](https://developer.mozilla.org/es/docs/Web/JavaScript/Closures)
 - [Hoisting](https://developer.mozilla.org/es/docs/Glossary/Hoisting)



 Gracias por leer ❤️!


| [Twitter🌟](https://twitter.com/alecodesdancer) | [Medium📖](https://alecodesdancer.medium.com)  | [Github💻](https://github.com/alecodesdancer/) | [Instagram💜](https://www.instagram.com/alecodesdancer/)
|--|--|--|--