Funciones: Código Reutilizable
¡Las funciones son bloques de código reutilizables. Son fundamentales!
¿Por Qué Usar Funciones?
Sin función:
javascript
console.log("¡Hola, María!");console.log("¡Hola, Juan!");console.log("¡Hola, Ana!");Con función:
javascript
function saludar(nombre) { console.log(`¡Hola, ${nombre}!`);} saludar("María");saludar("Juan");saludar("Ana");Ventajas:
- Reutilización - escribe una vez, usa muchas veces
- Organización - código más legible
- Mantenimiento - cambia en un solo lugar
Creando Funciones
Declaración de Función
javascript
function saludar() { console.log("¡Hola!");} saludar(); // llamando la funciónFunción con Parámetros
javascript
function saludar(nombre) { console.log(`¡Hola, ${nombre}!`);} saludar("María"); // "¡Hola, María!"saludar("Juan"); // "¡Hola, Juan!"Función con Return
javascript
function sumar(a, b) { return a + b;} const resultado = sumar(5, 3);console.log(resultado); // 8return envía el valor de vuelta y termina la función.
Expresión de Función
javascript
const saludar = function(nombre) { return `¡Hola, ${nombre}!`;}; console.log(saludar("María"));Arrow Function (Moderno)
javascript
// Con llaves (múltiples líneas)const saludar = (nombre) => { return `¡Hola, ${nombre}!`;}; // Simplificado (una línea)const saludar = (nombre) => `¡Hola, ${nombre}!`; // Un parámetro (sin paréntesis necesarios)const doble = n => n * 2; // Sin parámetrosconst decirHola = () => "¡Hola!";Parámetros por Defecto
javascript
function saludar(nombre = "visitante") { console.log(`¡Hola, ${nombre}!`);} saludar(); // "¡Hola, visitante!"saludar("María"); // "¡Hola, María!"Múltiples Parámetros
javascript
function crearPerfil(nombre, edad, ciudad) { return { nombre: nombre, edad: edad, ciudad: ciudad };} const perfil = crearPerfil("Juan", 25, "Madrid");Scope (Alcance)
Dónde existen las variables:
javascript
const global = "Existo en todos lados"; function test() { const local = "Solo existo aquí dentro"; console.log(global); // ✅ Funciona console.log(local); // ✅ Funciona} console.log(global); // ✅ Funcionaconsole.log(local); // ❌ ¡Error!Funciones Llamando Funciones
javascript
function cuadrado(n) { return n * n;} function sumaCuadrados(a, b) { return cuadrado(a) + cuadrado(b);} console.log(sumaCuadrados(3, 4)); // 9 + 16 = 25Funciones de Orden Superior
Funciones que reciben otras funciones:
javascript
const numeros = [1, 2, 3, 4, 5]; // map - transforma cada elementoconst doblados = numeros.map(n => n * 2);// [2, 4, 6, 8, 10] // filter - filtra elementosconst pares = numeros.filter(n => n % 2 === 0);// [2, 4] // find - encuentra primer coincidenciaconst mayorQue3 = numeros.find(n => n > 3);// 4 // reduce - acumulaconst suma = numeros.reduce((acc, n) => acc + n, 0);// 15Ejercicio Práctico: Calculadora
javascript
function sumar(a, b) { return a + b;} function restar(a, b) { return a - b;} function multiplicar(a, b) { return a * b;} function dividir(a, b) { if (b === 0) { return "Error: no se puede dividir por cero"; } return a / b;} function calcular(a, operador, b) { switch (operador) { case "+": return sumar(a, b); case "-": return restar(a, b); case "*": return multiplicar(a, b); case "/": return dividir(a, b); default: return "Operador inválido"; }} // Usoconsole.log(calcular(10, "+", 5)); // 15console.log(calcular(10, "-", 3)); // 7console.log(calcular(4, "*", 3)); // 12console.log(calcular(20, "/", 4)); // 5Tips
- Nombres descriptivos:
calcularPromedioes mejor quecalc - Una cosa por función: si el nombre tiene "y", tal vez dividir
- Pocos parámetros: idealmente hasta 3
- Siempre retornar: aunque sea un mensaje
Resumen
- ✅ Las funciones organizan y reutilizan código
- ✅ Los parámetros las hacen flexibles
- ✅
returnenvía el valor de vuelta - ✅ Las arrow functions son modernas y concisas
- ✅ El scope controla dónde existen las variables
¡En la próxima lección, aprenderemos arrays y objetos! 🚀