Saltar al contenido principal

Funciones en JavaScript: Guía para Principiantes con Ejemplos

Funciones en JavaScript: Guía para Principiantes con Ejemplos

Aprende qué son las funciones en JavaScript, cómo crearlas y usarlas paso a paso. Explicación clara para principiantes con ejemplos prácticos que te ayudarán a dominar uno de los conceptos más importantes de la programación en JavaScript.

¿Qué es una función en JavaScript y para qué sirve?​

Las funciones en JavaScript son bloques de código reutilizables que realizan una tarea específica. Las funciones te permiten organizar tu código, hacerlo más legible y evitar la repetición.

¿Por qué usar funciones?​

Usar funciones tiene varias ventajas:

  • Reutilización de código: Puedes definir una función una vez y llamarla múltiples veces en diferentes partes de tu programa.

  • Organización: Las funciones ayudan a estructurar tu código en partes manejables y lógicas.

  • Mantenimiento: Si necesitas cambiar la lógica de una tarea, solo tienes que modificar la función en un lugar.

  • Legibilidad: Las funciones con nombres descriptivos hacen que el código sea más fácil de entender.

Cómo definir una función​

En JavaScript, puedes definir una función utilizando la palabra clave function, seguida del nombre de la función, paréntesis y llaves. Aquí tienes un ejemplo básico:

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

En este ejemplo, hemos definido una función llamada saludar que, cuando se llama, imprime "¡Hola, mundo!" en la consola.

Cómo llamar a una función​

Para ejecutar el código dentro de una función, debes "llamar" a la función utilizando su nombre seguido de paréntesis:

saludar(); // Llama a la función y muestra "¡Hola, mundo!" en la consola

Funciones con parámetros​

Las funciones pueden aceptar parámetros, que son valores que se pasan a la función cuando se llama. Estos parámetros permiten que la función trabaje con diferentes datos. Aquí tienes un ejemplo:

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

saludar("Ana"); // Muestra "¡Hola, Ana!" en la consola

saludar("Luis"); // Muestra "¡Hola, Luis!" en la consola

En este caso, la función saludar toma un parámetro llamado nombre y lo utiliza para personalizar el mensaje de saludo.

Funciones con valores de retorno​

Las funciones también pueden devolver un valor utilizando la palabra clave return. Esto es útil cuando quieres que la función realice un cálculo y te devuelva el resultado. Aquí tienes un ejemplo:

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

let resultado = sumar(5, 3); // Llama a la función y almacena el resultado

console.log(resultado); // Muestra 8 en la consola

En este ejemplo, la función sumar toma dos parámetros, a y b, y devuelve su suma. El resultado se almacena en la variable resultado.

Funciones anónimas: qué son y cuándo utilizarlas​

Las funciones anónimas son funciones que no tienen un nombre. Se utilizan comúnmente como valores asignados a variables o pasadas como argumentos a otras funciones. Aquí tienes un ejemplo de una función anónima asignada a una variable:

let multiplicar = function (x, y) {
  return x * y;
};

console.log(multiplicar(4, 5)); // Muestra 20 en la consola

Funciones flecha (Arrow Functions) en JavaScript​

Las funciones flecha son una sintaxis más concisa para definir funciones anónimas. Aquí tienes un ejemplo:

let dividir = (x, y) => {
  return x / y;
};

console.log(dividir(20, 4)); // Muestra 5 en la consola

Diferencias entre funciones declaradas y funciones expresadas​

Funciones declaradas: Se definen utilizando la palabra clave function seguida del nombre de la función. Estas funciones se pueden llamar antes de su definición en el código debido al "hoisting".

function restar(a, b) {
  return a - b;
}

console.log(restar(10, 4)); // Muestra 6 en la consola

Funciones expresadas: Se asignan a una variable y no tienen un nombre propio. Estas funciones no se pueden llamar antes de su definición en el código.

let elevarAlCuadrado = function (num) {
  return num * num;
};

console.log(elevarAlCuadrado(6)); // Muestra 36 en la consola

Funciones recursivas​

Las funciones recursivas son aquellas que se llaman a sí mismas para resolver un problema. Son útiles para tareas que pueden dividirse en subproblemas más pequeños. Aquí tienes un ejemplo de una función recursiva que calcula el factorial de un número:

function factorial(n) {
  if (n === 0) {
    return 1; // Caso base
  } else {
    return n * factorial(n - 1); // Llamada recursiva
  }
}

console.log(factorial(5)); // Muestra 120 en la consola

El valor de retorno: cómo usar return en tus funciones​

La palabra clave return en JavaScript se utiliza dentro de una función para especificar el valor que la función debe devolver cuando se llama. Cuando una función encuentra una declaración return, la ejecución de la función se detiene y el valor especificado se devuelve al lugar donde se llamó la función. Aquí tienes un ejemplo simple:

function obtenerNombreCompleto(nombre, apellido) {
  return nombre + " " + apellido; // Devuelve el nombre completo
}

let nombreCompleto = obtenerNombreCompleto("Juan", "Pérez"); // Llama a la función y almacena el resultado

console.log(nombreCompleto); // Muestra "Juan Pérez" en la consola

En este ejemplo, la función obtenerNombreCompleto toma dos parámetros, nombre y apellido, y utiliza return para devolver la concatenación de ambos. El valor devuelto se almacena en la variable nombreCompleto.

Ámbito (scope) de las variables dentro de una función​

El ámbito (scope) de una variable determina dónde puede ser accedida dentro del código. En JavaScript, las variables definidas dentro de una función tienen un ámbito local, lo que significa que solo pueden ser accedidas desde dentro de esa función. Aquí tienes un ejemplo:

function ejemploScope() {
  let mensaje = "Hola desde el ámbito local"; // Variable con ámbito local
  console.log(mensaje); // Funciona aquí
}

ejemploScope(); // Llama a la función y muestra el mensaje

console.log(mensaje); // Error: mensaje no está definido fuera de la función

En este ejemplo, la variable mensaje está definida dentro de la función ejemploScope, por lo que solo puede ser accedida desde dentro de esa función. Intentar acceder a mensaje fuera de la función resultará en un error.

Funciones dentro de funciones: anidamiento explicado​

En JavaScript, puedes definir funciones dentro de otras funciones. Estas funciones internas tienen acceso a las variables y parámetros de la función externa, lo que permite crear un ámbito cerrado y encapsular la lógica. Aquí tienes un ejemplo:

function funcionExterna(x) {
  function funcionInterna(y) {
    return x + y; // Accede a la variable x de la función externa
  }
  return funcionInterna; // Devuelve la función interna
}

let sumaConCinco = funcionExterna(5); // Llama a la función externa y obtiene la función interna

console.log(sumaConCinco(3)); // Muestra 8 en la consola (5 + 3)

console.log(sumaConCinco(10)); // Muestra 15 en la consola (5 + 10)

En este ejemplo, funcionInterna está definida dentro de funcionExterna y puede acceder a la variable x. La función externa devuelve la función interna, que luego puede ser llamada con diferentes valores.

Buenas prácticas al escribir funciones en JavaScript​

Aquí tienes algunas buenas prácticas para escribir funciones en JavaScript:

  • Nombres descriptivos: Usa nombres claros y descriptivos para tus funciones que indiquen su propósito.

  • Funciones pequeñas: Mantén tus funciones cortas y enfocadas en una sola tarea.

  • Parámetros limitados: Evita tener demasiados parámetros en una función. Si es necesario, considera usar un objeto para agruparlos.

  • Comentarios: Añade comentarios para explicar la lógica compleja dentro de tus funciones.

  • Evita efectos secundarios: Las funciones deben evitar modificar variables externas o tener efectos secundarios inesperados.

  • Usa const y let: Declara variables dentro de funciones con const o let para evitar problemas de ámbito.

Conclusión​

Las funciones son una parte fundamental de JavaScript y la programación en general. Te permiten organizar tu código, hacerlo más legible y reutilizable. Al dominar las funciones, estarás en camino de convertirte en un desarrollador de JavaScript más eficiente y efectivo. ¡Practica creando y utilizando funciones en tus proyectos para mejorar tus habilidades de programación!

Recursos
Ejercicios

💻 Prueba estos ejercicios básicos sobre Funciones en JavaScript:

Creando una Función Sencilla con JavaScript

Función para Calcular el Área de un Rectángulo

Función que Filtra una Lista de Productos en Oferta

Función que calcula el precio total con Impuesto