Apuntes sobre Javascript

JavaScript lo resuelve todo... eventualmente.

Funciones: Bloques de Código Reutilizables

Hasta ahora, has aprendido a trabajar con variables, operadores, condicionales y bucles. Pero a veces, necesitas repetir una tarea específica en diferentes partes de tu programa, como saludar a un usuario o calcular un precio. Aquí entran las funciones, que son como pequeñas cápsulas que realizan una tarea y puedes usarlas cuando quieras.

¿Qué son las funciones?

Una función es un bloque de código que realiza una tarea específica y puede ser reutilizado. Puedes pensar en una función como una receta: defines los pasos una vez (por ejemplo, cómo hacer un pastel) y luego la usas cada vez que la necesites, cambiando los ingredientes si quieres.

En JavaScript, las funciones:

  • Se definen con un nombre y un conjunto de instrucciones.
  • Se llaman (o invocan) cuando quieres que se ejecuten.
  • Pueden recibir parámetros (datos de entrada) y devolver resultados.

1. Definir y Llamar una Función

Para crear una función, usas la palabra clave function, seguida de un nombre, paréntesis () y llaves {} con el código.

Sintaxis:

function nombreDeLaFuncion() {
  // Código que se ejecuta
}

Ejemplo práctico:

function saludar() {
  console.log("¡Hola, bienvenido!");
}

saludar(); // Llama a la función
saludar(); // Puedes llamarla varias veces

Resultado:

¡Hola, bienvenido!
¡Hola, bienvenido!

2. Funciones con Parámetros

Los parámetros son variables que una función recibe como entrada para personalizar su comportamiento.

Sintaxis:

function nombreDeLaFuncion(parametro1, parametro2) {
  // Usa los parámetros en el código
}

Ejemplo práctico:

function saludarPersona(nombre) {
  console.log("Hola, " + nombre + "!");
}

saludarPersona("Ana"); // Imprime: Hola, Ana!
saludarPersona("Carlos"); // Imprime: Hola, Carlos!

Puedes tener varios parámetros:

function sumar(a, b) {
  console.log(a + b);
}

sumar(5, 3); // Imprime: 8
sumar(10, 20); // Imprime: 30

3. Funciones que Devuelven Valores

Las funciones pueden devolver un resultado usando la palabra clave return. Esto es útil cuando quieres usar el resultado en otra parte de tu código.

Sintaxis:

function nombreDeLaFuncion(parametros) {
  // Código
  return valor; // Devuelve un valor
}

Ejemplo práctico:

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

let resultado = multiplicar(4, 5);
console.log(resultado); // Imprime: 20

console.log(multiplicar(3, 6)); // Imprime: 18

Nota: El código después de return no se ejecuta, porque return detiene la función.

function ejemplo() {
  return "Terminé";
  console.log("Esto no se imprime");
}

4. Ámbito (Scope) de las Variables

El ámbito determina dónde una variable es accesible. Hay dos tipos principales en funciones:

  • Ámbito global: Variables declaradas fuera de funciones, accesibles en todo el código.
  • Ámbito local: Variables declaradas dentro de una función, solo accesibles dentro de ella.

Ejemplo:

let global = "Soy global";

function miFuncion() {
  let local = "Soy local";
  console.log(global); // Accesible: Imprime "Soy global"
  console.log(local); // Accesible: Imprime "Soy local"
}

miFuncion();
console.log(global); // Accesible: Imprime "Soy global"
// console.log(local); // Error: local no está definida fuera de la función

Buena práctica: Usa variables locales (let o const dentro de funciones) para evitar conflictos con otras partes del código.

5. Funciones con Valores por Defecto

Puedes definir valores por defecto para los parámetros, que se usan si no se pasa un valor.

Ejemplo:

function saludarConEdad(nombre = "Invitado", edad = 0) {
  console.log("Hola, " + nombre + ", tienes " + edad + " años.");
}

saludarConEdad("Lucía", 25); // Imprime: Hola, Lucía, tienes 25 años.
saludarConEdad(); // Imprime: Hola, Invitado, tienes 0 años.

6. Funciones Flecha

Las funciones flecha (arrow functions) son una sintaxis más compacta para escribir funciones. Las verás con frecuencia en los ejemplos de las próximas lecciones, así que conviene conocerlas.

La equivalencia con una función tradicional:

// Función tradicional
function sumar(a, b) {
  return a + b;
}

// Función flecha equivalente
const sumar = (a, b) => a + b;

console.log(sumar(3, 4)); // Imprime: 7

Reglas de la forma corta:

  • Si el cuerpo es una sola expresión, se omiten las llaves {} y el return — el resultado se devuelve implícitamente.
  • Si hay un solo parámetro, se pueden omitir los paréntesis.
  • Sin parámetros, los paréntesis son obligatorios: () => ...
const doble = n => n * 2;             // un parámetro
const saludar = () => "¡Hola!";       // sin parámetros
const multiplicar = (a, b) => a * b;  // varios parámetros

console.log(doble(5));           // Imprime: 10
console.log(saludar());          // Imprime: ¡Hola!
console.log(multiplicar(3, 4));  // Imprime: 12

Si el cuerpo necesita varias líneas, usas llaves y return explícito igual que en una función tradicional:

const describir = (nombre, edad) => {
  let texto = `${nombre} tiene ${edad} años.`;
  return texto;
};
console.log(describir("Ana", 25)); // Imprime: Ana tiene 25 años.

Buenas Prácticas

  1. Nombres descriptivos: Usa nombres de funciones que indiquen qué hacen (por ejemplo, calcularTotal en lugar de hacerCosas).
  2. Funciones cortas: Una función debe hacer una sola tarea. Si es muy larga, divídela en funciones más pequeñas.
  3. Evita efectos secundarios: Una función debería devolver un valor o realizar una acción predecible, no modificar variables globales sin razón.
  4. Usa return cuando sea útil: Si necesitas el resultado de una función, devuélvelo en lugar de imprimirlo directamente.
  5. Documenta tu código: Si la función es compleja, añade un comentario explicando qué hace.

Nota: Las funciones declaradas con function nombre() {} están disponibles en todo el ámbito, incluso antes de la línea donde se escriben (hoisting). Las funciones flecha y las asignadas a variables (const f = () => {}) no tienen este comportamiento: deben declararse antes de usarse.

En la próxima lección: arrays, para almacenar y manipular listas de múltiples valores.

TOP