Lección 5 · Funciones

Qué es una función

Una función es un bloque de código con un nombre, que se escribe una vez y se usa todas las veces que haga falta. Es la forma de no repetir el mismo cálculo en cinco lugares distintos y de corregirlo en un solo lugar cuando cambia.

Se declara con la palabra function, un nombre, paréntesis y un bloque entre llaves:

function saludar() {
    console.log("Bienvenido al Buffet del Cole");
}

Y se llama escribiendo su nombre y paréntesis:

saludar();   // Bienvenido al Buffet del Cole
saludar();   // se puede llamar todas las veces que se quiera

La diferencia con un bucle: el bucle repite seguido, en el mismo lugar del programa; la función se llama desde cualquier lado, cuando hace falta. Es una herramienta de organización, no de repetición.

Parámetros

Una función puede recibir datos para trabajar. Se declaran entre los paréntesis como si fueran variables, y se llaman parámetros. Los valores que se pasan al llamarla se llaman argumentos:

function mostrarPrecio(producto, precio) {
    console.log(`${producto} sale $${precio}`);
}

mostrarPrecio("Empanada", 350);
mostrarPrecio("Alfajor", 200);

Los parámetros son posicionales: el primer argumento va al primer parámetro, el segundo al segundo. Si se cambia el orden al llamar, la función recibe los datos cruzados y muestra cualquier cosa. Por eso los nombres de los parámetros importan casi tanto como los de las variables.

Devolver un valor

Una función que solo imprime no sirve para mucho más. Con return puede devolver un resultado, y ese resultado se usa donde se la llamó:

function calcularTotal(precio, cantidad) {
    return precio * cantidad;
}

const total = calcularTotal(350, 3);
console.log(total);   // 1050

Hay dos reglas del return que conviene tener claras:

• Corta la función: lo que esté después del return no se ejecuta.
• Una función sin return devuelve undefined.

La diferencia práctica: si se necesita usar el resultado (sumarlo, mostrarlo, guardarlo), la función devuelve con return. Si solo se necesita hacer algo (mostrar un mensaje), alcanza con que ejecute.

Ámbito

Las variables que se declaran dentro de una función existen solo ahí. Se dice que tienen ámbito local: afuera no se ven.

function calcular() {
    const resultado = 350 * 2;
    return resultado;
}

calcular();
console.log(resultado);   // ReferenceError: resultado is not defined

Eso es a propósito: cada función tiene su espacio y no ensucia el resto del programa. Lo que sí puede hacer es leer variables declaradas afuera; lo que no puede es crear una adentro y esperar que se vea afuera. Para sacar un valor, se devuelve con return.

Funciones flecha

JavaScript tiene una forma más corta de escribir funciones, llamada función flecha, que se usa mucho como argumento de otra función:

const calcularTotal = (precio, cantidad) => {
    return precio * cantidad;
};

const calcularTotal = (precio, cantidad) => precio * cantidad;

La primera es la versión completa; la segunda, con una sola expresión, devuelve el resultado sin escribir return (se llama retorno implícito). Las dos hacen lo mismo.

No hace falta usarlas siempre: las funciones con function y nombre son más legibles para la lógica principal. Las flechas brillan en la lección 6, cuando se pasan funciones a los métodos de un array.

Resumen

• Una función es un bloque con nombre; se declara una vez y se llama cuando hace falta.
• Los parámetros reciben datos, por posición.
• return devuelve un valor y corta la función; sin return devuelve undefined.
• Las variables de adentro tienen ámbito local: afuera no se ven.
• Las funciones flecha son una forma corta, útil como argumento de otra función.

En la próxima lección se guardan muchos datos juntos: arrays para el menú y objetos para cada producto.

Autoevaluación de la lección 5