Módulo 4: Funciones

javascript-desde-cero/funciones
@yoezequiel 23-04-2025

🎙️ Introducción

¡Hola! Bienvenido o bienvenida al Módulo 4 del curso de JavaScript desde cero.

Hoy vamos a aprender uno de los pilares de cualquier lenguaje de programación: las funciones.

Con las funciones vamos a poder organizar nuestro código, reutilizar instrucciones, y evitar repetirnos.

Vamos paso a paso.


🧠 ¿Qué son y para qué sirven?

Una función es un bloque de código que podemos usar una y otra vez.

Nos sirve para:

Por ejemplo, imaginate que querés mostrar un saludo varias veces. En vez de copiar el console.log("Hola") muchas veces, lo ponés dentro de una función.


📝 Declaración y ejecución

Para declarar una función, usamos la palabra function, le damos un nombre y escribimos el bloque de código entre llaves {}.

function saludar() {
  console.log("¡Hola desde una función!");
}

Pero eso solo la declara. Para ejecutarla, hay que llamarla:

saludar(); // Esto muestra el mensaje

Cada vez que llamemos a saludar(), se va a ejecutar ese bloque de código.


🧾 Parámetros, argumentos y valores de retorno

Una función puede recibir parámetros, que son como variables internas que le podemos pasar para que use.

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

saludar("Ezequiel");
saludar("Ana");

En este caso, nombre es un parámetro. "Ezequiel" y "Ana" son los argumentos que le pasamos.


También podemos hacer que una función nos devuelva un valor con la palabra return.

function sumar(a, b) {
  return a + b;
}

let resultado = sumar(3, 5);
console.log(resultado); // Muestra 8

Una función puede hacer cosas (como mostrar algo) o puede devolver un valor que después usamos donde queramos.


⚡ Funciones flecha (=>)

Hay otra forma de escribir funciones que es más corta y moderna: las funciones flecha o arrow functions.

const saludar = (nombre) => {
  console.log("Hola, " + nombre);
};

Si la función es muy cortita, incluso podemos hacer esto:

const sumar = (a, b) => a + b;

Esto es exactamente igual que:

function sumar(a, b) {
  return a + b;
}

Pero con una sintaxis más compacta.
Las arrow functions son muy comunes en JavaScript moderno, sobre todo cuando trabajamos con arrays o funciones como callbacks.


🧭 Scope y hoisting

📍 Scope

El scope es el alcance o contexto donde una variable existe.

Una variable declarada dentro de una función solo existe dentro de esa función.

function ejemplo() {
  let mensaje = "Hola";
  console.log(mensaje); // Funciona
}

console.log(mensaje); // Error: mensaje no está definida fuera

Eso evita conflictos y hace que el código sea más seguro y ordenado.


🔝 Hoisting

En JavaScript, las declaraciones de funciones se “elevan” al principio del código. Esto se llama hoisting.

saludar(); // Esto funciona, aunque esté arriba

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

Esto solo funciona con funciones declaradas con function.
No funciona con funciones flecha o funciones asignadas a variables:

saludar(); // Error

const saludar = () => {
  console.log("Hola");
};

¿Por qué? Porque las const no se elevan. Así que ojo con eso.


📌 Cierre

¡Buen trabajo! Hoy aprendiste:

Las funciones son la herramienta más poderosa que tenemos para escribir código organizado, limpio y reutilizable.

En el próximo módulo vamos a aplicar todo esto para trabajar con arrays y objetos, que son las estructuras de datos más usadas en JavaScript.

¡Nos vemos en el Módulo 5!

Lección Anterior Curso Siguiente Lección