Funciones en JavaScript
Hay un momento, en todo desarrollo, que acabas reutilizando el mismo código una y otra vez. Puede ser que esté formado por un par de líneas o cientos de ellas. A nivel de organización es más práctico crear un grupo capaz de ser invocado que ir copiando y pegando en diferentes sitios. Además que para modificar es más rápido hacerlo una vez que varias. Esta característica se denomina: función.

by Z&W Web - Marketing Online - IA

Funciones Simples
Estructura Básica
function alias() { // codigo }
Y para ejecutarlo usaremos el alias con los paréntesis.
alias();
Ejemplo
function saludo() { console.log('Hola a todos'); } saludo(); // Hola a todos
Nomenclatura
Nombra las funciones con sustantivos: perfilDeUsuario(), ultimaPagina(), columnasImpares()…
Funciones con Argumentos
Un solo argumento
Es posible personalizar las instrucciones de la función con argumentos y variables al ser invocado.
function saludo(nombre) { console.log(`Hola a ${nombre}`); } saludo('Luis');
Múltiples argumentos
Y si necesitáramos aumentar sus argumentos, separamos por comas.
function saludo(nombre, localidad) { console.log(`Hola a ${nombre} desde ${localidad}`); } saludo('Luis', 'Valencia'); // Hola a Luis desde Valencia
Argumentos por Defecto
Valores predeterminados
Puede darse la particularidad que su argumento sea opcional, o que disponga de un valor fijo si no es declarado.
Ejemplo
function saludaA(nombre='todos') { console.log(`Hola a ${nombre}`); } saludaA(); // Hola a todos saludaA('Luis'); // Hola a Luis
Array de Argumentos
Argumentos ilimitados
¿Qué ocurre si no queremos restringir el número de argumentos? O dicho de otra manera: que nos puedan dar infinitos argumentos.
Creación de array
Eso es posible, aunque nos creará un array (lo verémos más adelante).
Ejemplo
function diasLibres(...dias) { console.log(dias); } diasLibres('Lunes', 'Jueves', 'Domingo'); // ['Lunes', 'Jueves', 'Domingo']
Return en Funciones
Devolver valores
Las funciones que hemos tratado hasta ahora son cajas negras, ejecutan un código pero no recibimos una respuesta. Si queremos devolver alguna variable usaremos return.
Ejemplo básico
En este ejemplo se nos suelta un string pero se pierde al no ser recogido.
function saluda() { return 'Hola a todos'; } saluda(); // Hola a todos
Capturando el valor
Ahora se guardara en una constante y a continuación se imprime.
const texto = saluda(); console.log(texto); // Hola a todos
Ejemplo Práctico con Return
Función para calcular edad
Un ejemplo más avanzado y práctico, podría ser una pequeña función que nos ayude a calcular cuantos años tiene una persona.
Código de la función
function calcularEdad(anyo) { return new Date().getFullYear() - anyo; }
Uso de la función
const nombre = "Bob"; const anyoNacimiento = 2000; const edad = calcularEdad(anyoNacimiento) console.log(`${nombre} nació en ${anyoNacimiento} y tiene ${edad} años.`); // Bob nació en 2000 y tiene 22 años.
Funciones Puras
Concepto
Este mecanismo lo has experimentado de primera mano sin saberlo cuando has utilizado .toUpperCase() usando una función como si fuera una variable, o en otras palabras funciones puras.
Programación Funcional
Puedes profundizar en el tema aprendiendo que es la programación funcional con una breve introducción en JavaScript, uno de los tres paradigmas elementales en el mundo de la programación.
Funciones Anónimas
Sin nombre
Al igual que una función puede devolver un string, integer, float o boolean… puede también dar una función. Solo debes omitir su alias.
Ejemplo
// Guardo la función en la variable "miFuncion" para no perderla. const miFuncion = function() { console.log('Soy anónima'); };
Lo ejecuto.
miFuncion(); // Soy anónima
Nota
No te preocupes si no acabas de ver su uso, lo declararás junto a otras funciones más complejas. Con que seas capaz de reconocer su sintaxis será suficiente.
Recursividad

Concepto
Has comprobado que una función puede llamar a otra función. ¿Y llamarse a si misma? Es posible y se llama recursividad.

2

2
Estructura básica
function nombre() { return nombre(); }

Utilidad
Es útil cuando queremos volver a llamar a la función hasta que se cumpla ciertos requisitos, o cuando queremos realizar un calculo de manera recursiva.
Ejemplo de Recursividad: Adivinar Número
Planteamiento
En el siguiente ejemplo no dejo de preguntar por un número hasta que el usuario lo adivina, se cumple la condición.
2
Código
function adivinarNumero() { // Variables const numeroAdivinar = 4; const respuesta = prompt('Del 1 al 5, ¿en que número estoy pensando?'); // Lógica if (respuesta == numeroAdivinar) { alert("¡Lo has adivinado!") return true; } return adivinarNumero(); } adivinarNumero();
Recursividad para Cálculos
Sumar Números Naturales
Otro uso común, y más avanzado, es para realizar cálculos.
function sumarNumerosNaturales(n) { return n > 0 ? n + sumarNumerosNaturales(n - 1) : n; } sumarNumerosNaturales(8); // 36
Secuencia Fibonacci
function generar_secuencia_fibonacci(longitud, secuencia=[0, 1]) { return secuencia.length < longitud ? generar_secuencia_fibonacci(longitud, secuencia.concat(secuencia.at(-1) + secuencia.at(-2))) : secuencia; } generar_secuencia_fibonacci(7); // [0, 1, 1, 2, 3, 5, 8]
Funciones Especiales: Alert
Descripción
Muestra un modal de aviso y nativo.
Sintaxis
alert('Equipo pirateado');
Uso común
Se utiliza para mostrar mensajes importantes al usuario que requieren su atención inmediata.
Funciones Especiales: Prompt
Descripción
Muestra un modal donde el usuario puede introducir texto.
Ejemplo
const respuesta = prompt('¿Cual es tu color favorito?'); // Responde: Naranja console.log(respuesta); // Naranja
Funciones Especiales: setTimeout

2

3

Descripción
Ejecuta una función con retardo. Su argumento es una función anónima como hemos visto antes.
2
Ejemplo
En el ejemplo se lanzará pasado 2s.
3
Código
const miTimeout = setTimeout(function() { alert('Acepta nuestras cookies?'); }, 2000);
Funciones Especiales: setInterval
Descripción
Ejecuta una función cada cierto tiempo, de forma indefinida a no ser que lo detengas. Necesita una función anónima.
2
Ejemplo
En el ejemplo se lanzará cada 3s.
const miIntervalo = setInterval(function() { alert('Borrando una foto suya al azar'); }, 3000);
Detener el intervalo
¿Por qué guardamos el intervalo en una variable? Por si quisieramos pararlo en un futuro. Disponemos de otra función especializada llamada clearInterval.
clearInterval(miIntervalo);
Bloques de Comentarios

Importancia
Un código refleja salud si posee buenos comentarios
Beneficios
Aumenta su esperanza de vida y habla muy bien del autor
Documentación
Es importante dejar un buen manual de instrucciones
Ejemplo de Documentación JSDoc
Estructura JSDoc
/** * Devuelve la suma de los argumentos * @param {number} num1 Primer numero a sumar. * @param {number} num2 Segundo numero a sumar. * @return {number} resultado de la suma. */ function sumar(num1, num2) { return num1 + num2; }
Buenas Prácticas
Evita comentarios del tipo "cómo funciona el código" a favor de "que devuelve".
Resumen de Tipos de Funciones

1

1
Funciones Simples
Bloques de código reutilizables con nombre

Con Argumentos
Reciben datos para personalizar su comportamiento

Con Return
Devuelven valores que pueden ser utilizados

Anónimas
Sin nombre, útiles como callbacks

Recursivas
Se llaman a sí mismas para resolver problemas complejos
Beneficios de Usar Funciones
1
Reutilización
Evita duplicar código y mantiene tu proyecto más organizado
2
Mantenimiento
Facilita los cambios al centralizar la lógica en un solo lugar
3
Legibilidad
Mejora la comprensión del código al separarlo en bloques con nombres descriptivos
4
Modularidad
Permite construir aplicaciones complejas a partir de componentes simples
Post relacionados

zetandweb.es

Condicionales en JavaScript

Los condicionales nos permiten tomar decisiones, crear ramificaciones en la lógica del software que estamos construyendo: ¿bajo que condiciones debo ejecutar las instrucciones? ¿qué hago si no se cumple mis requisitios?

Zetandweb.es

Eventos en JavaScript

Cualquier actividad producida por un usuario se denomina Eventos: pulsar una tecla, mover el ratón, hacer scroll, pulsar un botón… Y todos los eventos pueden ser escuchados para lanzar acciones. En otras palabras, podemos detectar y vincular cada evento a una funcionalidad de JavaScript. ¡Incluso ex

zetandweb.es

Guía Completa: var, let y const en JavaScript

Descubre las diferencias clave entre las declaraciones de variables en JavaScript y aprende a utilizarlas correctamente en tus proyectos.

zetandweb.es

Operadores Lógicos en JavaScript

Aprende a utilizar los operadores lógicos en JavaScript para evaluar expresiones y crear condiciones complejas. Comenzar a aprender

guia-pruebas-usabilidad-9w1v30d.gamma.site

Guía sobre pruebas de usabilidad de sitios web

Un diseño web atractivo y una experiencia de usuario agradable son elementos vitales para el éxito de un sitio web. Descubre cómo evaluar y mejorar la usabilidad de tu página web para aumentar la credibilidad y la tasa de conversión.

validacion-formularios-gbij6ey.gamma.site

Validación de Formularios en el Lado del Cliente

Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos estab

¿Dudas o algo que quieras comentarme?
Estoy aquí para ayudarte a seguir mejorando y aprendiendo.
Si necesitas que te ayude con tu proyecto o clases más específicas escríbeme