Que son
Las funciones son bloques de código autocontenido, lo que significa que tiene su propio código independiente al scope o al ámbito global, que se define una sola vez y que se puede ejecutar en cualquier momento. Además una función puede o no recibir parámetros que son datos que recibe separados por coma, y puede devolver o no, dependiendo del caso, valores.
Las funciones son un tipo de dato muy especial, también se consideran objetos, y en el argot de las cuestiones éticas de Javascript, se dice que son ciudadanos de primer orden, o de primera clase, lo que significa que son muy poderosas en Javascript, ya que las podemos asignar como valor, podemos retornar la ejecución de una función adicional, entonces, se pueden pasar como argumentos, pueden retornar como valores.
Desde ES6 tenemos características muy interesantes, un caso de ellos son las funciones flecha o arrow function, que veremos más adelante.
Declarar una función
Para declarar una función, existen dos maneras de crear nuestras funciones:
- Funciones declaradas
- Funciones expresadas
Hay una diferencia entre utilizar una manera u otra.
Función declarada
Para trabajar con una función declarada utilizamos la palabra reservada function, de la siguiente manera.
Ejm
<script>
// Función declarada
function estoEsUnaFuncion () {
}
</script>Cómo decíamos, una función es un bloque de líneas de código que se ejecutan al unísono.
Ejm
<script>
// Función declarada
function estoEsUnaFuncion () {
console.log("Uno");
console.log("Dos");
console.log("Tres");
}
</script>Una vez tenemos declarada la función, lo que tenemos que hacer es mandarla llamar, esto se conoce como invocar una función, y se hace de la siguiente manera.
Ejm
// Invocación de función estoEsUnaFuncion();
Para invocarla, además del nombre tenemos que ponerle los paréntesis. Los paréntesis indican, en un lenguaje de programación, que una función se va a ejecutar. Por lo tanto, en el momento que invocamos a la función de nuestro ejm, ésta se ejecuta.
Función que devuelve valores
Vamos a declarar una función que va a devolver valores. Para ello se ha de hacer uso de una palabra reservada denominada return.
// Declarar función que devuelve valores
function unaFuncionQueDevuelveValores () {
console.log("Uno");
console.log("Dos");
return "La función ha retornado una cadena de texto";
}
// Guardo la función en una variable para poder imprimirla en consola
let valorDeFuncion = unaFuncionQueDevuelveValores();
console.log(valorDeFuncion);La variable que hemos creado que es igual a la función retornará el valor de return. Cuando una función, dentro del cuerpo de la función, el compilador de la función encuentra la palabra reservada return, en ese momento, ignora todas las líneas de código que están abajo, retorna ese valor como valor de la función, y todo lo que está antes del return se ejecuta, pero lo que está después ya no se ejecuta.
A lo largo de los scripts que realicemos, habrá funciones que retornarán un valor, que podrá ser una cadena de texto, un número, objeto, array, la misma función, pero va a haber veces que nuestras funciones no van a tener que retornar valores.
Función que recibe parámetros y devuelve valores
Para ello vamos a crear una función, de la siguiente manera.
Ejm
// Declarar función que reciba parámetros y devuelva valores
function saludar(nombre, edad) {
console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años`);
}
// Invocar a función pasándole los parámetros
saludar("Francisco", 51);
saludar();La primera invocación nos devolverá los valores que hemos pasado por parámetros, pero la segunda invocación devolverá undefined como valor, ya que no le hemos pasado los valores que la función pide. Antes en ES6 no se podían asignar valores a los parámetros directamente, pero desde ES6 ya se pueden asignar valores a los parámetros que pasamos a la función, quedando la sintaxis de la siguiente manera.
Ejm
// Declarar función que reciba parámetros y devuelva valores
function saludar(nombre = "Francisco", edad = 51) {
console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años`);
}
// Invocar a función pasándole los parámetros y sin pasarle parámetros
saludar("Luis", 49);
saludar();En la segunda invocación, donde no le estamos asignando valores a los parámetros, devuelve los valores por defecto que hemos asignado a dichos parámetros.
Funciones declaradas VS funciones expresadas
En las funciones declaradas, se puede invocar a la función antes de declararla, funcionaría perfectamente. Esto es debido al Hoisting, cuando declaramos una función, Javascript directamente la sube al principio, después de las variables declaradas, con lo cual es como si se hubiera declarado ya, hace lo que se denomina un hoisting de la función, lo primero que ordena Javascript son variables, después funciones, por lo que, dinámicamente lo que hace Javascript es elevar (Hoisting), es por ello que, aunque invoquemos (llamemos) a la función antes de declararla, va a funciones sin problema en las funciones declaradas.
Existe otra manera de declarar funciones, y es declararlas como si fueran expresiones, lo que se hace es crear la función y asignarla dinámicamente a una variable, con en el siguiente ejm.
Ejm
// Funciones expresadas
const funcionExpresada = function() {
console.log("Esto es una función expresada");
}
funcionExpresada();En este caso ya no tenemos que darle nombre a la función, porque dicho nombre se lo hemos puesto a la variable. Este es un patrón muy utilizado dentro de las funciones en Javascript, y esto se conoce con el nombre de función anónima, es decir, una función que no tiene nombre.
Buenas prácticas
Ambas opciones son válidas. Si somos ordenados y declaramos primero nuestras variables y después nuestras funciones, no hay problema en crear funciones declaradas. Pero en los últimos años se está utilizando mas la función expresada, la cual nos evita cometer errores de compilación por tener mal acomodado nuestro código.
Ejm completo
Os dejamos la sintaxis de un ejm completo de funciones declaradas y expresadas.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Funciones en Javascript</title>
</head>
<body>
<h1>Funciones en Javascript</h1>
<script>
// Declaración de función
function estoEsUnaFuncion () {
console.log("Uno");
console.log("Dos");
console.log("Tres");
}
// Invocación de función
estoEsUnaFuncion();
// Declarar función que devuelve valores
function unaFuncionQueDevuelveValores () {
console.log("Uno");
console.log("Dos");
return "La función ha retornado una cadena de texto";
}
let valorDeFuncion = unaFuncionQueDevuelveValores();
console.log(valorDeFuncion);
// Declarar función que reciba parámetros y devuelva valores
function saludar(nombre = "Francisco", edad = 51) {
console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años`);
}
// Invocar a función pasándole los parámetros y sin pasarle parámetros
saludar("Pepito", 49);
saludar();
// Funciones expresadas
const funcionExpresada = function() {
console.log("Esto es una función expresada");
}
funcionExpresada();
</script>
</body>
</html>