TechLead

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