Saltar al contenido principal

Funciones

Una función es un bloque de código que podemos crear para realizar una tarea concreta.

Las funciones nos permiten organizar el código y reutilizarlo.

Por ejemplo, si necesitamos mostrar un par de mensajes varias veces, podríamos escribir:

console.log("Hola");
console.log("Que tal?");
console.log("Hola");
console.log("Que tal?");
console.log("Hola");
console.log("Que tal?");

Pero veremos será más cómodo crear una función que se encargue de mostrar ese par de mensajes:

function saludar() {

    console.log("Hola");
    console.log("Que tal?");

}

Y después utilizarla tantas veces como queramos:

saludar();
saludar();
saludar();

Como ves, englobar las dos instrucciones:

console.log("Hola");
console.log("Que tal?");

en una misma función reduce el número de líneas cada vez que queremos mostrar esos mensajes.

La idea principal es que creamos la función una vez y podemos ejecutarla tantas veces como necesitemos.

Pero, ¿cómo funciona exactamente?​

Declaración de una función​

La forma más tradicional de crear una función es mediante una declaración de función.

Su sintaxis es:

function nombreFuncion() {

    // Código que hace la función

}

Por ejemplo:

function saludar() {

    console.log("Hola");

}

Crear la función no significa que su código se ejecute inmediatamente. Sino simplemente, estamos indicando que existe esa función y cuál es su tarea.

Para ejecutarla debemos llamar a la función usando siempre su nombre y paréntesis:

saludar();

Salida:

Hola

Podemos llamar a una función tantas veces como queramos:

saludar();
saludar();
saludar();

Salida:

Hola
Hola
Hola

¿Por qué utilizar funciones?​

Imagina que tenemos un programa bastante grande y necesitamos realizar la misma operación en diferentes lugares del código.

Sin funciones tendríamos que repetir el código todas las veces que queramos realizar dicha tarea. De esta forma, la lógica del cálculo está escrita una sola vez y simplemente con una línea se ejecutan todas las intrucciones que engloba la función.

Parámetros​

Muchas veces necesitamos que una función trabaje con datos que nosotros le proporcionamos.

Estos datos se indican mediante parámetros.

Por ejemplo, la función anterior saludar() simplemente decía "Hola". Pero ahora imaginemos que queremos una función que pueda saluar a alguien en concreto. Es decir que pueda decir:

Hola Marta
Hola Adriana
Hola Juan

En estos casos al definir la función colocamos entre sus paréntesis el parámetro que necesite para funcionar. Al crear la función siempre tenemos en mente una generalización de la tarea. Por el ejemplo, en el ejemplo de saludar a alguien, pensaremos en realizar una función que dado un nombre lo salude.

Para ello:

function saludar(nombre) {

    console.log(`Hola ${nombre}`);

}

En este caso, nombre es un parámetro. Si te fijas en el código de la función:

console.log(`Hola ${nombre}`);

La tarea que está haciendo ahora saludar(nombre) es mostrar el mensaje "Hola" seguido de sea cual sea el nombre que se ha proporcionado como parámetro.

Cuando llamamos a la función, ya le proporcionamos un valor específico:

saludar("Esther");

Salida:

Hola Esther

También podemos utilizar diferentes valores:

saludar("Carlos");
saludar("Laura");

Salida:

Hola Carlos
Hola Laura

Por otro lado, podemos tener varios parámetros:

function sumar(a, b) {

    console.log(a + b);

}

Y llamarla:

sumar(5, 3);

Salida:

8

Los valores que proporcionamos al llamar a una función se denominan argumentos.

Por tanto:

function sumar(a, b) {

a y b son parámetros.

Mientras que:

sumar(5, 3);

5 y 3 son argumentos.

return​

Hasta ahora las funciones que hemos visto simplemente muestran información utilizando console.log(). Pero la mayoría de las veces necesitaremos que la función realize una operación o cálculo y devuelva un resultado, no solo lo muestre.

Para ello utilizamos return.

Por ejemplo:

function sumar(a, b) {

    return a + b;

}

Al utilizar return cuando llamamos a la función con sumar(5,3) podemos guardar el resultado en otra variable:

let resultado = sumar(5, 3);

console.log(resultado);

Salida:

8

La función calcula 5 + 3 y devuelve 8.

Podemos pensar en una función como una pequeña máquina:

        5       3
        ↓       ↓
     ┌─────────────┐
     │    sumar    │
     └─────────────┘
            ↓
            8

El return es lo que permite sacar el resultado de la función para poder utilizarlo fuera de la función.

Por ejemplo:

function sumar(a, b) {

    return a + b;

}
let resultado = sumar(5, 3);
console.log(`El resultado es: ${resultado}`);
let resultado = resultado + 3;
console.log(`Ahora el resultado es: ${resultado}`);

Salida:

El resultado es 8
Ahora el resultado es 11

return termina la función​

Cuando una función encuentra un return, deja de ejecutarse.

Por ejemplo:

function comprobar() {

    console.log("Inicio");

    return;

    console.log("Final");

}

Si ejecutamos:

comprobar();

Salida:

Inicio

El segundo console.log() nunca se ejecuta porque el return termina la función.

console.log() y return no son lo mismo​

Es importante no confundirlos.

console.log() muestra un valor:

function sumar(a, b) {

    console.log(a + b);

}

Mientras que return devuelve un valor:

function sumar(a, b) {

    return a + b;

}

Con return podemos guardar el resultado:

let resultado = sumar(5, 3);

Esto no sería posible de la misma forma utilizando únicamente console.log().

Expresiones de función

Otra forma de crear una función es guardarla dentro de una variable.

A esto se le llama expresión de función. Es simplemente otra forma de escribir funciones.

Antes la sintaxis era:

function nombreFuncion() {

   // Código de la función

}

Y ahora con expresión de función la sintaxis es:

let nombreFuncion = function() {

    // Código de la función

};

Ahora podemos utilizar la función mediante el nombre de la variable:

nombreFuncion();

También podemos utilizar parámetros:

let sumar = function(a, b) {

    return a + b;

};

console.log(sumar(5, 3));

Salida:

8

La diferencia principal respecto a una declaración tradicional es la forma en la que definimos la función:

function sumar(a, b) {

    return a + b;

}

frente a:

let sumar = function(a, b) {

    return a + b;

};

Ambas permiten crear funciones, pero la segunda guarda la función dentro de una variable.

Arrow functions

Las arrow functions, o funciones flecha, son una forma más corta de escribir funciones.

La sintaxis es:

const nombreFuncion = (parametros) => {

    // Código

};

Por ejemplo, esta función:

function sumar(a, b) {

    return a + b;

}

Se puede escribir como:

const sumar = (a, b) => {

    return a + b;

};

La flecha => es la característica principal de este tipo de funciones.

Si la función solo tiene una expresión que devolver, podemos escribirla todavía más corta:

const sumar = (a, b) => a + b;

El return está implícito en este caso.

Arrow functions con un parámetro​

Cuando una arrow function tiene un único parámetro, podemos escribirla sin paréntesis:

const cuadrado = numero => numero * numero;

También sería válido escribir:

const cuadrado = (numero) => numero * numero;

Las dos formas funcionan.

Arrow functions sin parámetros​

Cuando no tenemos parámetros, debemos utilizar los paréntesis:

const saludar = () => {

    console.log("Hola");

};

Y la llamamos normalmente:

saludar();

Comparación de las diferentes formas

Podemos crear una función para calcular el doble de un número de diferentes maneras.

Declaración​

function doble(numero) {

    return numero * 2;

}

Expresión​

const doble = function(numero) {

    return numero * 2;

};

Arrow function​

const doble = numero => numero * 2;

Las tres representan la misma idea, pero utilizan una sintaxis diferente.

¿Cuándo utilizar cada una?​

Al principio es recomendable aprender primero la declaración de funciones, ya que es la forma más sencilla de entender cómo funcionan.

Las expresiones de función y las arrow functions son muy habituales en JavaScript moderno.

Especialmente las arrow functions aparecen constantemente cuando trabajamos con arrays:

let numeros = [1, 2, 3, 4];

let dobles = numeros.map(numero => numero * 2);

Aquí numero => numero * 2 es una arrow function que se ejecuta para cada elemento del array.

Resumen​

Las funciones permiten agrupar código para realizar una tarea y reutilizarlo.

Una función puede:

  • Recibir datos mediante parámetros.
  • Ejecutar determinadas instrucciones.
  • Devolver un resultado mediante return.

Las principales formas que hemos visto para crear funciones son:

function sumar(a, b) {
    return a + b;
}
const sumar = function(a, b) {
    return a + b;
};
const sumar = (a, b) => a + b;

Las funciones son una de las partes fundamentales de JavaScript y las utilizaremos continuamente a medida que avancemos en el lenguaje.

Ejemplos resueltos

Ejercicio resuelto 1 - Calcular un descuento​

Enunciado​

Crea una función que reciba un precio y devuelva el precio con un descuento del 20 %.

Análisis​

La función necesita recibir el precio como parámetro y devolver el resultado del cálculo.

Solución​

function aplicarDescuento(precio) {

    return precio * 0.8;

}

let resultado = aplicarDescuento(50);

console.log(resultado);

Salida:

40

Explicación​

La función recibe 50 como argumento.

Después calcula:

50 × 0.8 = 40

Finalmente, return devuelve el resultado y podemos guardarlo en la variable resultado.

Ejercicio resuelto 2 - Comprobar si un número es par​

Enunciado​

Crea una función que reciba un número y devuelva true si es par y false si es impar.

Solución​

const esPar = numero => numero % 2 === 0;

console.log(esPar(8));
console.log(esPar(7));

Salida:

true
false

Explicación​

El operador % obtiene el resto de una división.

Si un número dividido entre 2 tiene resto 0, es par.

La función devuelve directamente el resultado de la comparación.