Introducción a las Funciones en JavaScript 1 3
Introducción a las-- - -�
Funciones en JavaScript
¿Por qué aprender sobre funciones en JavaScript?
JavaScript es el lenguaje del desarrollo web moderno, y las
funciones son una de sus piezas más importantes. Dominar las
funciones no solo te permite escribir código más limpio y
eficiente, sino que también es esencial para crear aplicaciones
web dinámicas y escalables. Como desarrollador, entender
cómo funcionan y cómo utilizarlas te abrirá la puerta a proyectos
más complejos y emocionantes.
¿Qué son las funciones?
Una función en JavaScript es un bloque
de código diseñado para realizar una
tarea específica.
Imagina que estás construyendo un juego: en lugar
de repetir una y otra vez el mismo código para que el
personaje salte, podrías escribir una función llamada
saltar y ejecutarla cada vez que el jugador presione la
tecla de salto. Esto no solo ahorra tiempo, sino que
hace que el código sea más fácil de leer y mantener.
Ventajas de usar funciones en tu código
do Organización
Separar tareas en funciones específicas hace que tu código
tenga mayor rendimiento y sea más sencillo resolver un
problema.
2025
Introducción a las Funciones en JavaScript 1 4
C".J Reutilización
Define una vez una función y ejecútala tantas veces como
necesites.
O Reducción de errores
Utiliza extensiones como 'ESLint' para identificar errores
rápidamente.
cf.J Escalabilidad
Con las funciones podrás dividir responsabilidades en tu código,
lo que permitirá que crezca eficientemente.
Ejemplo
function saludar() {
[Link]('Hola, Henr(d!');
}
// Llamamos a la función
saludar();// Salida: ¡Hola, Henr(d!
En este ejemplo, cada vez que llames a saludar(), ejecutará el
código que tiene dentro, mostrando el mensaje. Ahora imagina
lo útil que es esto en proyectos más grandes.
2025
Introducción a las Funciones en JavaScript 1 5
El papel de las funciones en tu carrera como desarrollador
Las funciones no son solo teoría: son fundamentales en el
trabajo diario de cualquier desarrollador. Aquí tienes algunas
áreas donde las funciones son clave:
➔ lnteractividad en sitios web: Imagina que necesitas mostrar
un mensaje cuando el usuario hace clic en un botón. Esto lo
harías con una función.
➔ Procesamiento de datos: Las funciones son ideales para
analizar grandes conjuntos de datos, como calcular
promedios, filtrar información o transformar listas.
➔ Automatización: Desde validaciones de formularios hasta
simulaciones complejas, las funciones simplifican tareas
repetitivas.
Ejemplo
tunction calcularPromedio(numeros) {
let suma = O;
tor (!et numero of numeros) {
suma+= numero;
}
return suma/ [Link];
}
const calificaciones = [85, 90, 78, 92];
[Link]('EI promedio es: ${calcularPromedio(caliticaciones)}');
// Salida: El promedio es: 86.25
Este ejemplo muestra cómo encapsular un cálculo en una
función no solo la hace reutilizable, sino que también organiza el
código de forma lógica.
2025
Introducción a las Funciones en JavaScript 1 6
Funciones: El "superpoder" de los desarrolladores
Una vez que entiendes las funciones, puedes combinarlas para
crear programas complejos y dinámicos. Por ejemplo, un sitio
web completo podría basarse en una colección de funciones,
cada una encargada de una tarea específica como:
• Mostrar un menú.
• Validar datos de usuario.
• Consultar una API para mostrar información en tiempo real.
Ejemplo
function mostrarMenu() {
[Link]('1. Iniciar Sesión');
[Link]('2. Registrarse');
}
function validarUsuario(nombre, contraseña) {
return nombre = = = 'admin' && contraseña = = = '1234';
}
function iniciarAplicacion() {
mostrarMenu();
const acceso = validarUsuario('admin', '1234');
[Link](acceso? '¡Bienvenido!': 'Credenciales incorrectas');
}
in iciarAplicacion();
// Salida:
// 1. Iniciar Sesión
// 2. Registrarse
// ¡Bienvenido!
2025
Fundamentos de las Funciones en JavaScript 17
Fundamentos de las
Funciones en JavaScript
En este apartado exploraremos los conceptos
fundamentales de las funciones en JavaScript.
Si bien son uno de los elementos básicos del
lenguaje, entenderlas completamente es
esencial para desarrollar aplicaciones sólidas
y escalables.
¿Qué es una función?
Una función es un conjunto de instrucciones que realiza una
tarea específica o calcula un valor. Piensa en ella como una
"máquina" que recibe datos de entrada (opcionalmente), realiza
una operación y, en muchos casos, devuelve un resultado.
Ejemplo
tunction saludar() {
[Link]('¡Hola, desarrollador!');
}
//Llamar a la función
saludar();// Salida: ¡Hola, desarrollador!
En este ejemplo:
• Definimos la función saludar.
• Luego llamamos a la función para que ejecute el código
que contiene.
2025
Fundamentos de las Funciones en JavaScript 1 8
Elementos clave de una función
Cada función en JavaScript tiene los siguientes elementos:
➔ Nombre de la función: Identifica la función y permite
ejecutarla. Ejemplo: saludar.
➔ Parámetros: Son variables que actúan como entradas para la
función. Los defines al crear la función.
➔ Bloque de código: Es el conjunto de instrucciones que se
ejecutan cuando la función es llamada.
➔ return: Devuelve un resultado (opcional). Si no se utiliza, la
función devuelve undefined por defecto.
Ejemplo práctico con parámetros y retorno
function sumar(a, b) {
return a + b;
[Link](sumar(3, 7)); // Salida: 10
Aquí:
• a y b son parámetros.
• return envía el resultado de la operación para que pueda
ser utilizado.
2025
Fundamentos de las Funciones en JavaScript 1 9
Parámetros vs Argumentos
Aunque suelen confundirse, son conceptos distintos:
➔ Parámetros: Son las variables que declaras en la función.
Representan los valores que la función espera recibir.
➔ Argumentos: Son los valores reales que pasas a la función
cuando la llamas.
Ejemplo
tunction multiplicar(a, b) {//Parámetros
return a* b;
[Link](multiplicar(4, 5)); // Argumentos, salida: 20
Argumentos predeterminados
Los argumentos predeterminados son valores que una función
usará si no se le pasa uno al ser llamada. Esto asegura que la
función siempre tenga un valor con el cual trabajar.
Ejemplo
tunction saludar(nombre -- 'desarrollador') {
[Link]('¡Hola, ${nombre}!');
saludar();// Salida: ¡Hola, desarrollador!
saludar('Henry'); // Salida: ¡Hola, Henry!
En este caso, si no proporcionas un argumento, el valor por
defecto será 'desarrollador'.
2025
Fundamentos de las Funciones en JavaScript l 10
return: El valor que devuelve la función
La palabra clave return se utiliza para devolver un resultado
desde una función. Esto permite que el resultado pueda ser
usado en otras partes del programa.
Ejemplo
function obtenerMensaje() {
return ' ¡ Aprender JavaScript es divertido!';
const mensaje = obtenerMensaje();
[Link](mensaje); // Salida: ¡Aprender JavaScript es divertido!
Importante: Una vez que return es ejecutado, la función
termina. Cualquier código después de return no será ejecutado.
Ejemplo
tunction sumar(a, b) {
return a+ b;
[Link]('Esto nunca se mostrará');// Este código no se ejecuta
El alcance en las funciones
El alcance determina qué partes de tu código pueden acceder a
una variable.
En JavaScript, existen dos tipos principales de alcance en las
funciones:
2025
Fundamentos de las Funciones en JavaScript l 11
Alcance local
Las variables declaradas dentro de una función solo están
disponibles dentro de esa función. No pueden ser accedidas
desde fuera.
Ejemplo
function mostrarMensaje() {
let mensaje = 'Este es un mensaje local';
[Link](mensaje);
}
mostrarMensaje(); // Salida: Este es un mensaje local
[Link](mensaje); // Error: mensaje no está definido
Alcance global
Las variables declaradas fuera de cualquier función son accesibles
desde cualquier parte del código.
Ejemplo
let mensajeGlobal = 'Variable global';
function mostrarMensajeGlobal() {
[Link](mensajeGlobal);
}
mostrarMensajeGlobal(); // Salida: Variable global
[Link](mensajeGlobal); // Salida: Variable global
Cuidado con las variables globales: Aunque pueden ser útiles,
abusar de ellas puede llevar a conflictos si diferentes partes del
programa intentan modificar la misma variable.
2025
Fundamentos de las Funciones en JavaScript l 12
Funciones "de primera clase"
En JavaScript, las funciones son "de primera clase".
Esto significa que pueden:
01 Asignarse a variables.
02 Pasarse como argumentos a otras funciones.
03 Devolverse desde una función.
Ejemplo 1
Asignar una función a una variable
const saludar = function () {
[Link]('¡Hola, mundo!');
};
saludar();// Salida: ¡Hola, mundo!
Ejemplo 2
Pasar una función como argumento
function ejecutarFuncion(funcion) {
fune ion();
}
ejecutarFuncíon(() => {
[Link]('Esta es una función pasada como argumento.');
});
2025
Fundamentos de las Funciones en JavaScript l 13
Ejemplo 3
Devolver una función desde otra función
function crearSaludo(saludo) {
return function (nombre) {
return '${saludo}, ${nombre}!';
};
}
const saludoFormal = crearSaludo('Buenos días');
[Link](saludoFormal('Henry')); // Salida: Buenos días, Henry!
Buenas prácticas al trabajar con funciones
o, Mantén las funciones cortas y específicas: Una función
debe hacer solo una cosa y hacerla bien.
02 Usa nombres descriptivos: El nombre de la función debe
explicar claramente qué hace.
03 Evita efectos secundarios: Las funciones deben ser
predecibles y no modificar variables fuera de su alcance.
04 Aprovecha las características modernas: Usa argumentos
predeterminados, arrow functions y desestructuración
cuando sea apropiado.
2025
Fundamentos de las Funciones en JavaScript l 14
Ejemplo con buenas prácticas:
const calcularAreaRectangulo = ({ base, altura}) => base* altura;
const rectangulo -- { base: 5, altura: 10 };
[Link](calcularAreaRectangulo(rectangulo)); // Salida: 50
Las funciones son mucho más que bloques de código. Son
herramientas fundamentales que te permiten escribir código
organizado, reutilizable y eficiente. Al dominar los conceptos
básicos como parámetros, return, y alcance, estarás
construyendo una base sólida para avanzar hacia conceptos
más avanzados como las funciones de alto orden y el manejo de
asincronía.
2025
Tipos de Funciones en JavaScript 15
J
Tipos de Funciones en javaScript
En JavaScript, existen diferentes formas de
crear funciones, cada una con sus propias
características y casos de uso.
Este apartado se centrará en explorar los diversos tipos de
funciones, sus sintaxis y las ventajas de utilizarlas. Comprender
estas diferencias te permitirá escribir código más limpio,
eficiente y adaptado a las necesidades de tus proyectos.
01. Declaración de funciones
Es la forma más común y tradicional de definir una función.
Utiliza la palabra clave function seguida del nombre de la
función, los parámetros (opcional) y el bloque de código.
Características:
• Evita efectos secundarios: Las funciones deben ser
predecibles y no modificar variables fuera de su alcance.
• Aprovecha las características modernas: Usa argumentos
predeterminados, arrow functions y desestructuración
cuando sea apropiado.
Ejemplo
function sumar(a, b) {
return a+ b;
}
[Link](sumar(3, 7)); // Salida: 10
2025
Tipos de Funciones en JavaScript l 16
Ventajas:
• Puede ser llamada antes de su definición gracias al hoisting.
• Su sintaxis clara es ideal para funciones reutilizables en
proyectos grandes.
Ejemplo de hoisting:
[Link](sumar(5, 5)); // Salida: 10
function sumar(a, b) {
return a + b;
02. Funciones expresadas (funciones anónimas)
Son funciones que no tienen un nombre y se asignan a una
variable. A menudo se utilizan para lógica temporal o como
argumentos para otras funciones.
Características:
• La función no tiene un nombre explícito.
• No son elevadas por el hoisting, por lo que deben declararse
antes de usarse.
2025
Tipos de Funciones en JavaScript l 17
Ejemplo
const multiplicar = function (a. b) {
return a* b;
};
[Link](multiplicar(4. 5)); // Salida: 20
Ventajas:
• Útiles para pasar como argumentos a otras funciones.
• Son más flexibles en casos donde no es necesario un
nombre.
Ejemplo de función como argumento
function ejecutarüperacion(a. b, operacion) {
return operacion(a, b);
}
const dividir = function (a, b) {
return a/ b;
};
[Link](ejecutar0peracion (10, 2, dividir));// Salida: 5
2025
Tipos de Funciones en JavaScript l 18
03. Funciones flecha (Arrow Functions)
Introducidas en ES6, las arrow functions son una forma
moderna y compacta de definir funciones. Son ideales para
funciones cortas y simples.
Características:
• No requieren la palabra clave function.
• Usan la sintaxis �.
• No tienen su propio contexto de this, lo que las hace ideales
para callbacks.
Ejemplo básico
const saludar = (nombre) = > 'Hola, ${nombre}!';
[Link](saludar('Henry')); // Salida: Hola, Henry!
Ventajas:
• Sintaxis más limpia, especialmente en funciones de una sola
línea.
• Mantienen el contexto léxico de this, evitando problemas
comunes.
2025
Tipos de Funciones en JavaScript l 19
Ejemplo práctico con métodos de array
const numeras = (1, 2, 3, 4];
const cuadrados = [Link](n => n ** 2);
[Link](cuadrados); // Salida: [1, 4, 9, 16]
Limitaciones:
• No son adecuadas para funciones que dependen de this
(como métodos de objetos).
• No se pueden usar como constructores.
Ejemplo incorrecto con this
const objeto = {
nombre: 'Henry',
saludar:() = > {
[Link]('Hola, ${[Link]}'); // Salida: Hola, undefined
},
};
[Link]();
En este caso, this no apunta al objeto objeto, lo que resulta en
un comportamiento inesperado.
2025
Tipos de Funciones en JavaScript 1 20
04. Funciones de alto orden
01 Aceptan una función como argumento.
02 Devuelven una función como resultado.
Características:
• Son una herramienta poderosa para escribir código más
modular y reutilizable.
• Se utilizan frecuentemente en JavaScript moderno,
especialmente en bibliotecas como React y frameworks
funcionales.
Ejemplo
function calcular(operacion) {
return function (a, b) {
return operacion(a, b);
};
}
const suma = calcular((a, b) = > a + b);
[Link](suma(4, 6)); // Salida: 10
2025
Tipos de Funciones en JavaScript 1 21
O 5. Funciones inmediatamente invocadas (IIFE)
Las IIFE (lmmediately lnvoked Function Expressions) son
funciones que se ejecutan justo después de ser definidas. Son
útiles para crear un alcance aislado y evitar que las variables
"contaminen" el entorno global.
Características:
• Se declaran y ejecutan en un solo paso.
• Suelen usarse para inicializar configuraciones o proteger el
código.
Ejemplo
(function () {
[Link]('Esta función se ejecuta inmediatamente');
})();
Ventajas:
• Encapsulan variables y evitan conflictos en el ámbito global.
• Son útiles en proyectos grandes donde la limpieza del
espacio global es crítica.
2025
Tipos de Funciones en JavaScript 1 22
06. Métodos de objetos
Cuando una función está asociada a un objeto, se le llama
método. Estas funciones pueden acceder a las propiedades del
objeto mediante la palabra clave this.
Ejemplo
const persona = {
nombre: 'Henry',
saludar() {
[Link]('Hola, mi nombre es ${[Link]}');
},
};
[Link]();// Salida: Hola, mi nombre es Henry
Ventajas:
• Facilitan la encapsulación de lógica relacionada con un
objeto.
• Permiten un código más estructurado y orientado a objetos.
2025
Tipos de Funciones en JavaScript 1 23
Comparativa de herramientas según el flujo de trabajo
Tipo Características Usos comunes
principales
Sintaxis tradicional,
Declaración Funciones reutilizables
soporta hoisting
Asignadas a variables, no Callbacks, lógica
Funciones anónimas
tienen nombre temporal
Sintaxis corta, no tienen Métodos de array,
Funciones flecha
su propio this callbacks
Aceptan/devuelven Modularidad,
Funciones de alta orden
funciones programación funcional
Se ejecutan Alcances aislados,
IIFE inmediatamente configuraciones
Funciones asociadas a un Lógica orientada a
Métodos de objetos
objeto objetos
Entender los diferentes tipos de funciones en JavaScript te da la
flexibilidad para elegir la herramienta adecuada según el
problema que quieras resolver. Cada tipo tiene sus fortalezas y
limitaciones, y dominarlas te permitirá escribir código más
eficiente, limpio y modular.
2025
Características avanzadas de las Funciones en JavaScript 1 24
Características avanzadas de
las Funciones en JavaScript
En este capítulo, exploraremos conceptos
avanzados que amplían el poder de las funciones
en JavaScript.
Estas características permiten crear soluciones más
sofisticadas, optimizar el rendimiento de tus aplicaciones y
manejar problemas complejos de manera eficiente.
01. Recursión
La recursión ocurre cuando una función se llama a sí misma
dentro de su propio cuerpo. Es una herramienta poderosa para
resolver problemas que pueden descomponerse en versiones
más pequeñas de sí mismos, como cálculos matemáticos o
navegación por estructuras de datos jerárquicas.
Ejemplo básico: Cálculo del factorial
El factorial de un número (n!) es el producto de todos los enteros
positivos desde 1 hasta n.
Ejemplo
tunction tactorial(n) {
it (n === O) {
return 1; // Condición de parada
}
return n * factorial(n - 1); // Llamada recursiva
}
[Link](tactoria1(5)); // Salida: 120
2025
Características avanzadas de las Funciones en JavaScript 1 25
Cómo funciona:
1 . Si n es O, se devuelve 1. Esto detiene la recursión.
2. Si no, la función se llama a sí misma con n - 'l.
3. Las llamadas se resuelven "de abajo hacia arriba",
multiplicando los resultados.
Cuidado: Asegúrate de incluir una condición de parada. De lo
contrario, la función entrará en un bucle infinito y causará un
error de desbordamiento de pila.
02. Closures
Un closure es una función que "recuerda" el entorno (variables)
donde fue creada, incluso después de que dicho entorno haya
terminado su ejecución. Esta característica permite encapsular
datos y crear funciones especializadas.
Ejemplo
function crearContador() {
let contador =O;// Variable privada
return function () {
contador++;
return contador;
};
}
const contador1 = crearContador();
[Link](contador1()); // Salida: 1
[Link](contador1()); // Salida: 2
2025
Características avanzadas de las Funciones en JavaScript 1 26
Cómo funciona:
• contador es una variable local dentro de crearContador.
• Cuando crearContador devuelve una función, esta retiene el
acceso a contador, incluso después de que crearContador
haya terminado.
Usos comunes:
• Encapsular variables para que no sean accesibles desde
fuera.
• Crear funciones especializadas dinámicamente.
• Implementar patrones como módulos o funciones
generadoras de lógica.
03. Contexto de this
En JavaScript, this se refiere al objeto al que pertenece la
función que se está ejecutando. Sin embargo, su valor depende
del contexto en el que la función es llamada.
Reglas generales:
1. En un método de objeto: this se refiere al objeto al que
pertenece el método.
2. En una función global: this se refiere al objeto global
(window en navegadores, global en [Link]).
3. En funciones flecha: this mantiene el contexto léxico donde
fue definida la función.
2025
Características avanzadas de las Funciones en JavaScript 1 27
Ejemplo
const objeto = {
nombre: 'Henry',
saludar: function () {
[Link]('Hola, mi nombre es ${[Link]}');
},
};
[Link]();// Salida: Hola, mi nombre es Henry
Ejemplo con funciones flecha
const objeto = {
nombre: 'Henry',
saludar:()=> {
[Link]('Hola, mi nombre es ${[Link]}');
},
};
[Link]();// Salida: Hola, mi nombre es undefined
En este caso, this no apunta al objeto, sino al contexto global.
Por eso, las funciones flecha no son ideales para métodos de
objetos.
Soluciones al problema del contexto:
1. Usar bind: Crea una nueva función con un this fijo.
2. Guardar el contexto en una variable: Asignar this a una
variable antes de usarlo.
3. Usar funciones flecha: En callbacks y métodos, aseguran
que this se mantenga léxico.
2025
Características avanzadas de las Funciones en JavaScript 1 28
04. Funciones inmediatamente invocadas (IIFE)
Una IIFE (lmmediately lnvoked Function Expression) es una
función que se ejecuta justo después de ser definida. Esto
ayuda a crear un alcance privado, útil para evitar conflictos con
otras variables.
Ejemplo básico
(function () {
[Link]('Esta función se ejecuta inmediatamente');
})();
Ventajas:
• Evita la contaminación del espacio global.
• Útil para encapsular variables temporales.
Ejemplo práctico
(function () {
const mensaje = 'Hola desde IIFE';
console. log(mensaje);
} )();
// [Link](mensaje); // Error: mensaje no está definido
2025
Características avanzadas de las Funciones en JavaScript 1 29
O 5. Funciones que devuelven funciones
En JavaScript, las funciones pueden devolver otras funciones.
Esto es útil para crear comportamientos personalizados o
reutiliza bles.
Ejemplo
function crearSaludo(saludo) {
return function (nombre) {
return '${saludo}, ${nombre}!';
};
}
const saludoFormal = crearSaludo('Buenos días');
[Link](saludoFormal('Henry')); // Salida: Buenos días, Henry!
¿Dónde se usa?
• En programación funcional para crear funciones
especializadas.
• En configuraciones dinámicas, como generar validadores o
filtros.
2025
Características avanzadas de las Funciones en JavaScript 1 30
O 5. Modularidad con funciones
Aunque los módulos ES6 son la norma actual para organizar
código, las funciones siguen siendo útiles para crear bloques de
lógica encapsulada.
Ejemplo
const moduloCalculadora = (function () {
function sumar(a, b) {
return a + b;
}
function restar(a, b) {
return a - b;
}
return {
sumar,
restar,
};
})();
[Link]([Link](5, 3)); // Salida: 8
[Link]([Link](10, 6)J; // Salida: 4
2025
Características avanzadas de las Funciones en JavaScript 1 31
Resumen de conceptos avanzados
Característica Descripción Usos principales
Problemas iterativos como
Una función se llama a sí
Recursión misma.
factorial, navegación de
estructuras jerárquicas.
Funciones que recuerdan Encapsulación de datos,
Closures el contexto donde fueron generación de funciones
creadas. especializadas.
this depende de cómo se Métodos de objetos,
Contexto de llame la función. callbacks.
Funciones que se ejecutan Configuraciones iniciales,
IIFE inmediatamente al ser evitar contaminación del
definidas. espacio global.
Funciones que Funciones que generan
Creación de lógica
devuelven otras funciones
especializada y reutilizable.
funciones dinámicamente.
Organización del código En proyectos donde los
Modularidad con
en bloques lógicos módu�sES6no son una
funciones reutilizables. opción.
Las características avanzadas de las funciones en JavaScript
son herramientas poderosas que permiten resolver problemas
complejos, encapsular lógica y escribir código más eficiente. Al
dominar conceptos como recursión, closures e IIFE, estarás
preparado para enfrentar desafíos más sofisticados en el
desarrollo de aplicaciones.
2025
Buenas prácticas en el uso de Funciones 1 40
Buenas prácticas en el
uso de Funciones
Escribir funciones es una habilidad esencial en JavaScript, pero
escribir buenas funciones
es lo que separa a un
desarrollador competente
de uno excelente.
Las buenas prácticas no solo hacen que tu código sea más
legible y eficiente, sino que también facilitan la colaboración
en equipo y la escalabilidad de tus proyectos.
En este capítulo, exploraremos las mejores
prácticas al trabajar con funciones en
JavaScript, con ejemplos prácticos para que
puedas aplicarlas de inmediato.
2025
Buenas prácticas en el uso de Funciones 1 41
01. Principio de Responsabilidad Única
Cada función debe tener una única tarea claramente definida.
Esto facilita la comprensión, el mantenimiento y la
reutilización de las funciones.
Ejemplo
// X Función con demasiadas responsabilidades
tunction procesarPedido(pedido) {
veriti carStoc k(pedido);
calcularl mpu estos(pedido);
enviarNotiticac ion(pedido);
}
// D Funciones con responsabilidades únicas
function verificarStock(pedido) {
// Lógica de verificación
}
tunction calcularlmpuestos(pedido) {
// Lógica de cálculo
}
function enviarNotiticacion(pedido) {
// Lógica de notificación
}
Beneficios:
• Facilita el mantenimiento y depuración del código.
• Permite probar cada función de forma aislada.
2025
Buenas prácticas en el uso de Funciones 1 42
02. Usa nombres significativos
El nombre de una función debe describir claramente lo que
hace. Esto hace que el código sea más legible y reduce la
necesidad de comentarios.
Ejemplo
// X Nombre poco descriptivo
tunction p() {
return [Link];
// ti Nombre claro y significativo
tunction obtenerValorDePi() {
return [Link];
Reglas generales:
• Usa verbos para funciones (calcularSuma, obtenerDatos).
• Sé específico (enviarCorreo es mejor que enviar).
• Evita abreviaturas y nombres ambiguos.
2025
Buenas prácticas en el uso de Funciones 1 43
03. Limita la cantidad de parámetros
Las funciones con demasiados parámetros son difíciles de
leer y propensas a errores. Idealmente, una función debe
tener tres parámetros o menos. Si necesitas más, considera
usar un objeto como parámetro.
Ejemplo
// X Función con demasiados parámetros
function crearUsuario(nombre, edad, correo, direccion, telefono) {
// Lógica para crear usuario
}
// ti Uso de un objeto como parámetro
function crearUsuario({ nombre, edad, correo, direccion, telefono }) {
// Lógica para crear usuario
}
crearUsuario({
nombre: 'Henry',
edad: 25,
correo: 'henry@[Link]',
direccion: 'Calle Falsa 123',
telefono: '123456789',
});
Ventajas del objeto:
• Mejora la legibilidad.
• Permite pasar parámetros en cualquier orden.
• Facilita la extensión si se necesitan más propiedades en
el futuro.
2025
Buenas prácticas en el uso de Funciones 1 44
04. Evita efectos secundarios inesperados
Un efecto secundario ocurre cuando una función modifica
variables o datos fuera de su alcance. Aunque a veces es
necesario, debes minimizarlos para que las funciones sean
predecibles.
Ejemplo
// X Función con efecto secundario inesperado
let total = O;
function agregarAITotal(cantidad) {
total +=cantidad;// Modifica una variable global
}
// ti Función sin efectos secundarios
function calcularNuevoTotal(totalActual, cantidad) {
return totalActual + cantidad;
}
Beneficios:
• Las funciones son más fáciles de probar y depurar.
• Reducen el riesgo de errores en el código.
2025
Buenas prácticas en el uso de Funciones 1 45
O 5. Documenta tus funciones
Aunque los nombres descriptivos ayudan, algunas funciones
complejas requieren documentación adicional. Los
comentarios deben explicar qué hace la función, qué
parámetros acepta y qué devuelve.
Ejemplo
/**
* Calcula el área de un rectángulo.
* @param {number} base - La base del rectángulo.
* @param {number} altura - La altura del rectángulo.
* @returns {number} - El área del rectángulo.
*/
function calcularArea(base, altura) {
return base * altura;
}
[Link](calcularArea(5, 10)); // Salida: 50
Ventajas:
• Facilita la colaboración en equipo.
• Ayuda a los nuevos desarrolladores a entender
rápidamente el código.
2025
Buenas prácticas en el uso de Funciones 1 46
06. Usa la sintaxis moderna de JavaScript
La sintaxis moderna, como las funciones flecha y la
desestructuración, hace que el código sea más limpio y
legible.
Ejemplo
// X Sintaxis tradicional
tunction sumar(a, b) {
return a+ b;
}
// ti Sintaxis moderna
const sumar = (a, b) = >a+ b;
Desestructuración en parámetros
const usuario = { nombre: 'Henry', edad: 25 };
// X Sin desestructuración
function mostrarUsuario(usuarlo) {
[Link]('Nombre: ${[Link]}, Edad: ${[Link]}');
}
// D Con desestructuración
tunction mostrarUsuario({ nombre, edad }) {
[Link]('Nombre: ${nombre}, Edad: ${edad}');
}
mostrarUsuario(usuario); // Salida: Nombre: Henry, Edad: 25
2025
Buenas prácticas en el uso de Funciones 1 47
07. Maneja errores adecuadamente
Nunca asumas que las entradas serán siempre correctas. Usa
validaciones y manejo de errores para evitar que una función
se comporte de forma inesperada.
Ejemplo
tunction dividir(a, b) {
it (b = = = O) {
throw new Error('No se puede dividir por cero');
}
return a/ b;
}
try {
[Link](dividir(10, 2)); // Salida: 5
[Link](dividir(10, O));// Lanza un error
} catch (error) {
[Link]([Link]); // Salida: No se puede dividir por cero
}
Beneficios:
• Previenes fallos inesperados en tiempo de ejecución.
• Facilitas la depuración al identificar problemas claramente.
2025
Buenas prácticas en el uso de Funciones 1 48
08. Escribe funciones puras
Una función pura es aquella que:
01 Siempre devuelve el mismo resultado para los mismos
argumentos.
02 No tiene efectos secundarios.
Ejemplo
// X Función impura
let valorGlobal = 5;
function agregar(valor) {
return valorGlobal + valor;
// rJ Función pura
function agregarPuro(valor, incremento) {
return valor + incremento;
[Link](agregarPuro(5, 10)); // Salida: 15
Ventajas de las funciones puras:
• Son predecibles y fáciles de probar.
• Mejoran la legibilidad y confiabilidad del código.
2025
Buenas prácticas en el uso de Funciones 1 49
09. Mantén las funciones cortas
Las funciones largas suelen ser difíciles de entender y
mantener. Intenta dividir las tareas en pequeñas funciones
específicas.
Ejemplo
// X Función larga y confusa
function procesarürden(orden) {
verificarPago( orden);
verifi carStock(orden);
prepararEnvio(orden);
enviar Notificac ion(orden);
}
// tiFunciones pequeñas y manejables
function verificarPago(orden) {
// Lógica para verificar el pago
}
function verificarStock(orden) {
// Lógica para verificar el stock
}
function prepararEnvio(orden) {
// Lógica para preparar el envío
}
function enviarNotificacion(orden) {
// Lógica para enviar notificación
}
Adoptar buenas prácticas en el uso de funciones no solo
mejora la calidad de tu código, sino que también te convierte
en un mejor desarrollador. Estas recomendaciones te
ayudarán a escribir funciones más claras, eficientes y fáciles
de mantener, lo que es esencial para el desarrollo profesional.
2025
Ejemplos Prácticos y Casos Reales 1 50
Ejemplos prácticos y casos reales
Las funciones en JavaScript son herramientas extremadamente
versátiles que se utilizan en prácticamente todas las áreas del
desarrollo web.
En este capítulo, exploraremos aplicaciones
prácticas y casos de uso reales que te ayudarán
a comprender cómo las funciones pueden
resolver problemas del mundo real, desde la
manipulación de datos hasta la interacción con
el DOM y las operaciones asíncronas.
01. Manipulación de Arrays
Transformación de datos con .mapQ
El método .mapQ es perfecto para transformar elementos de
un array. Una función pasada como argumento a .mapQ se
ejecuta para cada elemento, devolviendo un nuevo array con
los resultados.
Ejemplo
const numeras = (1, 2, 3, 4, 5];
// Elevar al cuadrado cada número
const cuadrados = [Link](num => num ** 2);
[Link](cuadrados); // Salida: (1, 4, 9, 16, 25]
2025
Ejemplos Prácticos y Casos Reales 1 51
Filtrado de datos con .filterQ
El método .filterQ devuelve un nuevo array con todos los
elementos que cumplen con una condición.
Ejemplo
const edades = (18, 22, 15, 30, 14, 25);
// Filtrar mayores de edad
const mayoresDeEdad = [Link](edad => edad >= 18);
[Link](ma'='oresDeEdad); // Salida: (18, 22, 30, 25)
Reducción de arrays con .reduceQ
El método .reduce() reduce un array a un único valor
aplicando una función acumulativa.
Ejemplo
const precios = [100, 200, 300];
// Calcular el total
const total= [Link]((acumulador, precio)=> acumulador+ precio, O);
[Link](total); // Salida: 600
2025
Ejemplos Prácticos y Casos Reales 1 52
02. Interacción con el DOM
Añadir eventos a elementos
Las funciones son esenciales para interactuar con el DOM, ya
que puedes asignarlas como manejadores de eventos para
responder a las acciones del usuario.
Ejemplo
[Link]('boton').addEventlistener('click', () => {
alert('¡Botón clickeado!');
});
Manipular contenido dinámicamente
Puedes usar funciones para actualizar contenido en
respuesta a eventos.
Ejemplo
const contador = [Link]('contador');
let clicks = O;
[Link]('boton').addEventlistener('click', () => {
clicks++;
[Link] = 'Has clickeado ${clicks} veces·;
});
2025
Ejemplos Prácticos y Casos Reales 1 53
Generar elementos dinámicamente
Con las funciones, pu edes crear elementos HTML sobre la
marcha.
Ejemplo
function agregarElemento(texto) {
const lista = [Link]('lista');
const nuevoElemento = [Link]('li');
[Link] = texto;
[Link](nuevoElemento);
agregarElemento('Nuevo elemento');
2025
Ejemplos Prácticos y Casos Reales 1 54
03. Validación de formularios
Las funciones son fundamentales para validar datos de
entrada antes de enviarlos a un servidor.
Ejemplo
function validarFormulario(evento) {
[Link]();
const nombre = [Link]('nombre').value;
const correo = [Link]('correo').value;
if (!nombre) {
alert('EI campo de nombre es obligatorio');
return;
}
if () {
alert('Por favor, ingresa un correo válido');
return;
}
alert('Formulario enviado correctamente');
}
[Link]('form u lario').addEventlisten er('su b mit', validarFormulario);
2025
Ejemplos Prácticos y Casos Reales 1 55
04. Operaciones asíncronas
Consumiendo APls con Fetch
Las funciones son clave para manejar la lógica de llamadas a
APls y procesar los resultados.
Ejemplo
async function obtenerUsuarios() {
try {
const respuesta = await fetch('[Link]
const usuarios = await [Link]();
console.l og('Usuarios:', usuarios);
} catch (error) {
[Link]('Error al obtener usuarios:', error);
}
}
obtenerUsuarios();
Cargar contenido dinámico
Puedes combinar funciones y manipulación del DOM para
mostrar datos obtenidos de una API.
2025
Ejemplos Prácticos y Casos Reales 1 56
Ejemplo
async function mostrarUsuarios() {
const respuesta = await fetch('[Link]
const usuarios = await [Link]();
const lista = [Link]('lista-usuarios');
[Link](usuario => {
const item = [Link]('li');
[Link] = [Link];
[Link](item);
});
}
mostrarUsuarios();
05. Generación de lógica modular
Patrón de Módulos
Usar funciones para encapsular lógica es una práctica común
en JavaScript, especialmente en proyectos grandes.
2025
Ejemplos Prácticos y Casos Reales 1 57
Ejemplo
const Calculadora = (function () {
function sumar(a, b) {
return a+ b;
}
function restar(a, b) {
return a - b;
}
return {
sumar,
restar,
};
}) ();
[Link]([Link](5, 3)); // Salida: 8
[Link]([Link](�O, 4)); // Salida: 6
05. Mini-proyecto: Temporizador
Descripción:
Crearemos un temporizador que inicie, pause y reinicie según
las acciones del usuario.
2025
Ejemplos Prácticos y Casos Reales 1 58
HTML
<div>
<h1 id = "tiempo">O</h1>
<button id="iniciar"> 1 n iciar</button >
<button id = "pausar">Pausar</button>
<button id="reiniciar">Reiniciar</button>
</div>
JavaScript
let tiempo = O;
let intervalo;
function iniciarTemporizador() {
if (!intervalo) {
intervalo = setlnterval(() => {
tiempo++;
[Link]('tiempo').textContent = tiempo;
}, 1000);
}
}
function pausarTemporizador() {
elearlnterval(intervalo);
intervalo = null;
}
function reiniciarTemporizador() {
pausarTemporizador();
tiempo = O;
[Link]('tiempo').textContent = tiempo;
}
[Link]('iniciar').addEventlistener('click', iniciarTemporizador);
[Link] Id(' pausar').ad dEventlistener('click', pausarTemporizador );
[Link] Id('reiniciar').addEventlistener('cli e k', reinici arTemporizador);
2025
Conclusión 1 59
Conclusión
A lo largo de esta guía hemos recorrido un camino profundo y
completo por el mundo de las funciones en JavaScript, desde
los fundamentos hasta las aplicaciones prácticas y los casos
avanzados. Este viaje ha sido diseñado para equiparte con las
herramientas y conocimientos necesarios para escribir código
más limpio, eficiente y preparado para afrontar los desafíos
del desarrollo web moderno.
Las funciones son la base de un lenguaje poderoso
como JavaScript, pero lo que las hace realmente
significativas es cómo las aplicas para resolver
problemas, optimizar procesos y crear experiencias
increíbles para los usuarios.
¿Qué esperas para dar el
siguiente paso?
Descubre cómo convertirte en Desarrollador Full Stack y
prepárate para un futuro donde la tecnología y la IA
serán tus mejores aliadas. ¡Empieza hoy con Henry! +i
4rbD4t4lt