El mundo de las Funciones en JavaScript

#javascript #beginners #spanish

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.

¿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.

¿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.

¿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 ().

¿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.

¿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.

¿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 🌟.