En el mundo del desarrollo web, JavaScript es un lenguaje esencial en el que se basan la mayoría de interacciones y dinámicas de los sitios web. Las página web están constituidas por HTML (estructura) y CSS (estilo). JavaScript es un lenguaje de programación o de secuencia de comandos, a través del cual podemos decirle a nuestro navegador qué tareas debe realizar. Es conocido por su capacidad para agregar interactividad y dinamismo a los sitios web, ya que abre un amplio abanico de posibilidades.
¿Qué es una Función en JavaScript?
Para comenzar a entender los tipos de funciones que hay en JavaScript primero debemos saber ¿qué es una función? Una función es un fragmento de código que puede ser invocado para realizar tareas o devolver un resultado. Por definición una función es un procedimiento, un conjunto de sentencias que realizan una tarea o calculan un valor. Las funciones son bloques de código reutilizables que se utilizan para realizar tareas específicas. En JavaScript, las funciones son esenciales para dividir un programa en partes más pequeñas y manejables.
Esta función puede, o no, recibir parámetros/valores y también puede, o no, devolver un resultado. En Javascript las funciones son diferentes a las funciones de otros lenguajes de programación. En Javascript las funciones son un objeto. Por ello se les puede asignar variables, arrays u otros objetos. En Javascript las funciones son objetos de "primera clase". Esto quiere decir que se pueden crear nuevas funciones durante la ejecución del programa. Una de las características más importantes de las funciones en Javascript es su versatilidad. La forma en la cual hallamos definido nuestra función, definirá el comportamiento de la misma. Las funciones pueden devolver un valor utilizando la palabra clave «return«. Si queremos salir con antelación de una función debemos ejecutar un return, o lanzar un error. Otra característica es que por defecto las funciones devuelven el valor "undefined".
Parámetros y Argumentos: La Base de la Interacción
Cuando estemos trabajando con funciones es importante que diferencies entre parámetro y argumento. Las funciones de JavaScript pueden aceptar información llamada parámetros.
- Un parámetro es/son la/s variables que definimos cuando creamos la función.
- Los valores que proporcionas cuando llamas a una función se llaman argumentos.
En este caso, la función «saludar» tiene un parámetro llamado «nombre«. En este ejemplo, la función «sumar» toma dos argumentos, realiza una suma y devuelve el resultado. En el apartado anterior, hemos visto la parte más simple de función, que es abstraer información para simplificar y reducir nuestro código. Sin embargo, una de las virtudes más interesantes de una función es la de poder reutilizarla para múltiples tareas. Y para ello, tenemos que saber que son los parámetros de entrada y de salida de una función. A las funciones se les pueden pasar parámetros, que no son más que variables que les pasamos desde fuera hacia dentro de la función.
Lea también: Longitud del RFC para personas morales en México
La idea de las funciones es enfocarnos en el código de la declaración, y una vez lo tengamos funcionando, nos podemos olvidar de él porque está encapsulado dentro de la función. Simplemente tendremos que recordar el nombre de la función y los parámetros que hay que pasarle. Esto hace que sea mucho más fácil trabajar con el código.
Tipos de Declaración de Funciones
JavaScript ofrece diferentes formas de crear funciones, lo que te brinda flexibilidad y poder para abordar diversas situaciones.
1. Function Declaration (Declaración de Función)
Comenzaremos por la más sencilla de todas, la "Function declaration". Declaración de funciones. En JavaScript, puedes declarar una función utilizando la palabra clave «function«, seguida del nombre de la función y un par de paréntesis. Esto se conoce como la cabecera de la función. Este tipo de función se creará con la palabra reservada function, seguido obligatoriamente por un nombre, que identificará a nuestra función, una lista de parámetros entre paréntesis, y el símbolo de las llaves {}. Además este tipo de funciones son compatibles con el hoisting. Una vez que has definido una función, puedes llamarla en cualquier parte de tu código. Llamar a una función significa ejecutar el conjunto de instrucciones que contiene.
2. Function Expression (Expresión de Función)
La siguiente forma de declarar una nueva función que vamos a ver es muy similar al tipo de anterior, "Function Declaration". Este tipo de funciones las podemos almacenar en una variable. Esta forma permite guardar una función dentro de una variable, para luego ejecutar dicha variable. Con este nuevo enfoque, estamos creando una función en el interior de una variable, lo que nos permitirá posteriormente ejecutar la variable (como si fuera una función). Si al crear nuestra nueva función no utilizamos un identificador estaremos creando una función anónima. Las funciones anónimas son funciones sin un nombre definido. Se utilizan comúnmente en contextos donde no necesitas una referencia a la función en otro lugar de tu código. Un diferencia con las "Function Declaration" es que estas no son compatibles con el hoisting. La diferencia fundamental entre las funciones por declaración y las funciones por expresión es que estas últimas sólo están disponibles a partir de la inicialización de la variable.
3. Arrow Functions (Funciones Flecha)
Otra de las novedades de ES6 son las "Arrow function". Las Funciones Flechas son una forma corta de escribir funciones que aparece en JavaScript a partir de ECMAScript 6. Las funciones flecha son una forma concisa de definir funciones en JavaScript. Además de la sintaxis que es diferente a las anteriores este tipo de funciones tienen las siguientes características:
Lea también: Funcionamiento del RFC en México
- Las "arrow function" no crean su propio contexto al ejecutarse.
- El objeto arguments no se encuentra en el contexto de la función.
- Si al definir la función no utilizamos el símbolo de las llaves.
4. Shorthand Method (Método Abreviado)
El cuarto tipo de definición que vamos a ver es el "Shorthand method". Este método permite definir funciones de forma concisa dentro de objetos literales o clases. Veamos en detalle este ejemplo. Add() y saluda() son dos métodos de la clase poblacion que hemos definido con el método "Shorthand".
5. IIFE (Expresiones de Función Ejecutadas Inmediatamente)
A veces nos podemos encontrar en la situación de crear funciones y ejecutarlas inmediatamente, para estos casos existen las funciones autoejecutables o IIFE (Expresión de Función Ejecutada Inmediatamente). Normalmente cuando definimos una función es porque la vamos a llamar en varias ocasiones, pero y sí sólo queremos llamar a la función en una sola ocasión y obtener un resultado. Para ello podemos utilizar la funciones IIFE. Este tipo de funciones se ejecutan inmediatamente y no son accesibles posteriormente. Para crear una función de este tipo deberemos crearla en un operador de agrupación (). Tenemos una función anónima que también es una función autoejecutable.
6. Function Constructor (Constructor de Función)
Y finalmente la "Function constructor". Es una forma bastante inusual de declarar las funciones pero vamos a verla también. Las funciones en Javascript, son funciones, y poseen el constructor Function. Por ello podremos crear una variable que invoque a un objeto Function. Cuando invoquemos a este objeto podremos enviar todos los argumentos que deseemos. En este ejemplo hemos creado la constante sumaFunction que crea una nueva instancia del objeto Function al cual le enviamos tres argumentos.
Manejo de Parámetros en Detalle
Las funciones son mucho más flexibles y potentes de lo que hemos visto hasta ahora.
Parámetros Múltiples
Hasta ahora sólo hemos creado una función con 1 parámetro, pero una función de Javascript puede tener muchos más parámetros. En este ejemplo, hemos modificado nuestra función tablaDelUno() por esta nueva versión que hemos cambiado de nombre a tablaMultiplicar(). Esta función necesita que le pasemos dos parámetros: tabla (la tabla de multiplicar en cuestión) y hasta (el número hasta donde llegará la tabla de multiplicar). Podemos añadir más parámetros a la función según nuestras necesidades. Es importante recordar que el orden de los parámetros es importante y que los nombres de cada parámetro no se pueden repetir en una misma función.
Lea también: Número de letras y números en el RFC
Parámetros por Defecto
Es posible que en algunos casos queramos que ciertos parámetros tengan un valor sin necesidad de escribirlos en la ejecución. Es lo que se llama un valor por defecto. En nuestro ejemplo anterior, nos podría interesar que la tabla de multiplicar llegue siempre hasta el 10, ya que es el comportamiento por defecto. Si queremos que llegue hasta otro número, lo indicamos explicitamente, pero si lo omitimos, queremos que llegue hasta 10.