Funciones
Declaraciones, expresiones, funciones flecha
Funciones en JavaScript
Las funciones son bloques de codigo reutilizables que realizan una tarea especifica. Son fundamentales en JavaScript.
Declaracion de Funcion
// Declaracion de funcion (function declaration)
function saludar(nombre) {
return "Hola, " + nombre + "!";
}
console.log(saludar("Maria")); // "Hola, Maria!"
// Las declaraciones se "elevan" (hoisting)
// Puedes llamarlas antes de declararlas
despedirse("Juan"); // Funciona!
function despedirse(nombre) {
return "Adios, " + nombre;
}
Expresion de Funcion
// Expresion de funcion (function expression)
const sumar = function(a, b) {
return a + b;
};
console.log(sumar(2, 3)); // 5
// Las expresiones NO se elevan
// multiplicar(2, 3); // Error! No esta definida aun
const multiplicar = function(a, b) {
return a * b;
};
Funciones Flecha (ES6)
// Sintaxis basica
const saludar = (nombre) => {
return "Hola, " + nombre;
};
// Retorno implicito (sin llaves)
const saludar2 = (nombre) => "Hola, " + nombre;
// Un parametro - parentesis opcionales
const cuadrado = x => x * x;
// Sin parametros - parentesis requeridos
const obtenerFecha = () => new Date();
// Multiples parametros
const sumar = (a, b) => a + b;
console.log(cuadrado(4)); // 16
console.log(sumar(2, 3)); // 5
Parametros por Defecto
function saludar(nombre = "Mundo") {
return "Hola, " + nombre + "!";
}
console.log(saludar()); // "Hola, Mundo!"
console.log(saludar("Maria")); // "Hola, Maria!"
// Con funciones flecha
const multiplicar = (a, b = 1) => a * b;
console.log(multiplicar(5)); // 5
console.log(multiplicar(5, 2)); // 10
Rest Parameters
// Recoger multiples argumentos en un array
function sumarTodos(...numeros) {
return numeros.reduce((total, num) => total + num, 0);
}
console.log(sumarTodos(1, 2, 3, 4, 5)); // 15
// Combinar con parametros regulares
function saludarTodos(saludo, ...nombres) {
return nombres.map(nombre => `${saludo}, ${nombre}!`);
}
console.log(saludarTodos("Hola", "Ana", "Juan", "Pedro"));
// ["Hola, Ana!", "Hola, Juan!", "Hola, Pedro!"]
Callbacks
// Una funcion que recibe otra funcion como argumento
function procesarUsuario(usuario, callback) {
// Hacer algo con el usuario
const resultado = callback(usuario);
return resultado;
}
const usuario = { nombre: "Ana", edad: 25 };
const obtenerNombre = (u) => u.nombre;
const obtenerEdad = (u) => u.edad;
console.log(procesarUsuario(usuario, obtenerNombre)); // "Ana"
console.log(procesarUsuario(usuario, obtenerEdad)); // 25
Funciones Flecha vs Regulares
- Las flechas no tienen su propio
this- heredan del contexto padre - Las flechas no pueden usarse como constructores
- Las flechas no tienen el objeto
arguments - Usa flechas para callbacks y funciones cortas
- Usa funciones regulares para metodos de objetos