Apuntes javascript

JavaScript lo resuelve todo... eventualmente.

Curso de JavaScript para Principiantes - Lección 6: Funciones: Bloques de Código Reutilizables

¡Bienvenido a la sexta lección! 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 máquinas 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.

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.

Ejercicios Prácticos

  1. Función de saludo:

    • Crea una función darBienvenida que reciba un parámetro nombre y muestre "¡Bienvenido, [nombre]!" en la consola.
    • Llama a la función con tu nombre y con otro nombre.

  2. Calculadora simple:

    • Crea una función restar que reciba dos parámetros (a y b) y devuelva su resta.
    • Usa la función y muestra el resultado en la consola (por ejemplo, restar(10, 3)).

  3. Función con condicional:

    • Crea una función esMayorDeEdad que reciba un parámetro edad y devuelva true si la edad es mayor o igual a 18, o false si no.
    • Prueba la función con diferentes edades y muestra los resultados.

  4. Función con valor por defecto:

    • Crea una función presentar que reciba un parámetro nombre (con valor por defecto "Anónimo") y muestre "Soy [nombre]".
    • Llama a la función con y sin un nombre.

Instrucción: Prueba estos ejercicios en JSFiddle o en la consola del navegador (F12). Por ejemplo:

function prueba() {
  console.log("¡Funciona!");
}
prueba();

Para la Próxima Lección

En la Lección 7, exploraremos arreglos (o arrays), que son listas de datos que te permitirán almacenar y manipular múltiples valores, como una lista de nombres o números. ¡Sigue practicando las funciones con los ejercicios de hoy para estar listo!

TOP