Funciones en JavaScript: parámetros, return, scope y arrow functions

Las funciones permiten agrupar lógica reutilizable y dividir un programa en piezas más pequeñas.

Declarar una función

function saludar() {
    console.log("Hola");
}

saludar();

Parámetros y argumentos

Los parámetros son los nombres que declaramos en la función. Los argumentos son los valores concretos que enviamos al llamarla.

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

saludar("Ana");
saludar("Luis");

return

return permite que una función entregue un resultado al código que la llamó. Esto es distinto de mostrar un valor con console.log().

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

const resultado = sumar(5, 8);

console.log(resultado);

return devuelve un valor y finaliza la ejecución de esa llamada a la función.

Más de un parámetro

function calcularPromedio(nota1, nota2, nota3) {
    return (nota1 + nota2 + nota3) / 3;
}

console.log(calcularPromedio(8, 7, 9));

Valores por defecto

function saludar(nombre = "Visitante") {
    return `Hola, ${nombre}`;
}

console.log(saludar());

Scope

El scope define desde qué parte del programa puede accederse a una variable. Las variables declaradas dentro de una función normalmente quedan limitadas a esa función.

El scope indica dónde puede utilizarse una variable.

const sitio = "Club Programador";

function ejemplo() {
    const mensaje = "Variable local";

    console.log(sitio);
    console.log(mensaje);
}

ejemplo();

// console.log(mensaje); // No está disponible aquí

Scope de bloque

if (true) {
    const activo = true;
    let puntos = 10;

    console.log(activo, puntos);
}

// activo y puntos no existen fuera del bloque

Function expression

Una function expression guarda una función dentro de una variable o constante. Esto permite tratar las funciones como valores y pasarlas a otras funciones.

const multiplicar = function (a, b) {
    return a * b;
};

console.log(multiplicar(4, 5));

Arrow functions

Las arrow functions ofrecen una sintaxis más corta y aparecen mucho en callbacks y métodos de arrays. No se comportan exactamente igual que una función tradicional respecto de this.

const multiplicar = (a, b) => {
    return a * b;
};

Si solo devolvemos una expresión:

const duplicar = numero => numero * 2;

console.log(duplicar(8));

¿Arrow function o function?

Las arrow functions son muy útiles, especialmente como callbacks. Sin embargo, no son un reemplazo idéntico para todas las funciones porque su comportamiento con this es diferente.

Funciones como valores

function ejecutar(accion) {
    accion();
}

ejecutar(() => {
    console.log("Función recibida como argumento");
});

Funciones puras como idea de diseño

function aplicarDescuento(precio, porcentaje) {
    return precio - precio * porcentaje / 100;
}

Esta función recibe datos y devuelve un resultado sin depender de variables externas ni modificar estado fuera de ella.

Ejercicio

Creá funciones para calcular subtotal, descuento e importe final de una compra.

Errores comunes

• confundir imprimir con devolver un valor;
• olvidar return;
• depender demasiado de variables globales;
• crear funciones enormes;
• usar arrow functions sin entender sus diferencias.

Seguí aprendiendo JavaScript

← Ciclos en JavaScript: for, while, for…of, break y continue

Arrays en JavaScript: métodos, recorridos, map, filter, find y reduce →