Unidad 3: Funciones y Manejo de Errores
3.1 Funciones en JavaScript
Las funciones son bloques de código reutilizables que permiten organizar y estructurar mejor nuestros programas. Nos ayudan a reducir la repetición de código y mejorar la legibilidad.
¿Cómo se ejecutan las funciones en un programa?
Cuando declaramos una función en JavaScript, esta no se ejecuta inmediatamente, sino que se almacena en memoria y solo se ejecuta cuando es llamada en el código. Esto nos permite definir funciones al inicio de un programa y utilizarlas en cualquier momento posterior.
Ejemplo de declaración y llamada de función
| Ejemplo básico de función | |
|---|---|
1 2 3 4 5 6 | |
3.1.1 Declaración y Uso de Funciones
Las funciones en JavaScript se pueden declarar utilizando la palabra clave function. Estas permiten organizar el código en bloques reutilizables.
Ejemplo de función simple
| Función que muestra un mensaje | |
|---|---|
1 2 3 4 5 | |
Las funciones pueden aceptar parámetros para hacerlas más dinámicas:
Ejemplo con parámetros
| Función con parámetros | |
|---|---|
1 2 3 4 5 6 | |
3.1.2 Parámetros y Valores de Retorno
Las funciones pueden devolver valores utilizando la palabra clave return. Esto permite que el resultado de una función pueda ser utilizado posteriormente en el programa.
Ejemplo con valor de retorno
| Función que retorna un valor | |
|---|---|
1 2 3 4 5 6 | |
Si una función no tiene return, devuelve undefined de forma implícita.
Ejemplo de función sin retorno
| Función sin return | |
|---|---|
1 2 3 4 5 6 | |
3.1.3 Funciones Anónimas
Las funciones anónimas son aquellas que no tienen un nombre definido. Se suelen asignar a variables:
Ejemplo de función anónima
| Función anónima asignada a una variable | |
|---|---|
1 2 3 4 5 | |
Las funciones anónimas son útiles para definir comportamientos que solo se usan en un contexto específico.
3.1.4 Funciones como Expresiones
En JavaScript, las funciones pueden ser declaradas como expresiones y asignadas a variables.
Ejemplo de función como expresión
| Función como expresión | |
|---|---|
1 2 3 4 5 6 7 8 9 | |
Las funciones expresadas se usan cuando queremos definir una función y almacenarla en una variable para luego ejecutarla en un momento determinado.
3.1.5 Paso de Parámetros por Valor y por Referencia
En JavaScript, los tipos primitivos (números, cadenas, booleanos) se pasan por valor, mientras que los objetos y arrays se pasan por referencia.
Nota
Pasar por valor significa que se crea una copia del valor original, mientras que pasar por referencia significa que se comparte la misma referencia en memoria. En los casos de los tipos primitivos, cualquier cambio dentro de la función no afectará a la variable original. Por tanto el paso es por valor.
Ejemplo de paso por valor
| Paso por valor | |
|---|---|
1 2 3 4 5 6 7 8 | |
Nota
En el caso de los objetos y arrays, si modificamos el objeto dentro de la función, los cambios se reflejarán fuera de la función. Por tanto en este caso se pasa siempre por referencia.
Ejemplo de paso por referencia
| Paso por referencia | |
|---|---|
1 2 3 4 5 6 7 | |
3.1.6 Alcance de las Variables: Local y Global
Las variables en JavaScript pueden tener ámbito global o ámbito local dependiendo de dónde sean declaradas.
- Variables globales: Son accesibles desde cualquier parte del código.
- Variables locales: Solo existen dentro de la función donde fueron declaradas.
Ejemplo de variables globales y locales
| Ámbito de variables | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 | |
3.1.7 Funciones recursivas (Introducción)
Una función recursiva es aquella que se llama a sí misma dentro de su propio cuerpo. Es una técnica muy poderosa y útil en programación, especialmente para resolver problemas que se pueden dividir en subproblemas más pequeños.
Algunos ejemplos típicos de resolución de problemas mediante funciones recursivas son el cálculo de factoriales, la serie de Fibonacci, la búsqueda de elementos en árboles, entre otros.
Vamos a ver como ejercicios prácticos algunos ejemplos de funciones recursivas.
Ejemplo de función recursiva: Factorial
| Función recursiva: Factorial | |
|---|---|
1 2 3 4 5 6 7 8 9 | |
3.1.8 Retorno de Funciones
Las funciones en JavaScript pueden devolver un valor mediante la palabra clave return. Esto permite que el resultado de una función pueda ser utilizado posteriormente en el programa.
Ejemplo de retorno en funciones
| Uso del return en funciones | |
|---|---|
1 2 3 4 5 6 | |
Cuando una función no tiene return, devuelve undefined de forma implícita.
Ejemplo de función sin retorno
| Función sin return | |
|---|---|
1 2 3 4 5 6 | |
Las funciones pueden retornar distintos tipos de valores:
-
Valores primitivos (números, cadenas, booleanos):
Retorno de valores primitivos 1 2 3 4 5
function obtenerNombre() { return "Carlos"; } console.log(obtenerNombre()); -
Expresiones o cálculos:
Retorno de una expresión 1 2 3 4 5
function calcularDoble(x) { return x * 2; } console.log(calcularDoble(10)); // Salida: 20 -
Objetos (tema que veremos más adelante):
Retorno de un objeto 1 2 3 4 5 6
function crearPersona(nombre, edad) { return { nombre: nombre, edad: edad }; } let persona = crearPersona("Ana", 30); console.log(persona.nombre, persona.edad); // Salida: Ana 30 -
Otras funciones:
Retorno de una función 1 2 3 4 5 6 7 8
function crearFuncion() { return function() { console.log("Soy una función retornada"); }; } let nuevaFuncion = crearFuncion(); nuevaFuncion();
El uso adecuado de return permite que las funciones sean más reutilizables y organizadas dentro del código.
3.1.9 Funciones Anónimas Autoejecutadas (IIFE)
Las funciones anónimas autoejecutadas (IIFE, Immediately Invoked Function Expressions) son funciones que se ejecutan inmediatamente después de ser definidas. Se usan para evitar contaminar el ámbito global y encapsular variables.
Ejemplo de función autoejecutada
| IIFE básica | |
|---|---|
1 2 3 | |
También pueden recibir parámetros:
IIFE con parámetros
| IIFE con parámetros | |
|---|---|
1 2 3 | |
En este punto podemos añadir la función cierre o closure que es una función anidada dentro de otra función que tiene acceso a las variables de la función exterior. Veamos un ejemplo con una función contador con un atributo valor y métodos getValor y incrementar y decrementar:
Ejemplo de función cierre
| Función cierre | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | |
Este patrón de diseño es muy útil para proteger variables y métodos de ser accedidos desde fuera de la función. Su principal diferencia con los objetos (clases) es que no se pueden crear instancias de la función contador y solo se puede acceder a sus métodos a través de la función contador.
3.1.10 Funciones Flecha (Arrow Functions)
Las funciones flecha (=>) son una forma más concisa de escribir funciones en JavaScript. Se utilizan sobre todo en funciones cortas y expresiones de retorno rápido.
Sintaxis básica:
| Sintaxis de una función flecha | |
|---|---|
1 2 | |
Si la función tiene una sola línea, el return es implícito. Si tiene varias líneas, se necesita escribir un bloque con {} y return:
Ejemplo con varias líneas
| Función flecha con varias líneas | |
|---|---|
1 2 3 4 5 | |
Las funciones flecha no tienen su propio this, lo que las hace útiles en ciertos casos (aunque esto se verá más adelante).
Ejercicios: Funciones en JavaScript
Ejercicio 1: Función para determinar si un número es positivo, negativo o cero
- Crea una función llamada
determinarSignoque reciba un número como parámetro. - La función debe devolver
"positivo"si el número es mayor que cero,"negativo"si es menor que cero, y"cero"si es exactamente cero.
Solución
| Función para determinar signo de un número | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 | |
Ejercicio 2: Función para verificar si una palabra es un palíndromo
- Crea una función
esPalindromoque reciba una palabra y devuelvatruesi se lee igual de izquierda a derecha que de derecha a izquierda, yfalseen caso contrario.
Solución
| Función para verificar palíndromos usando bucles | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 | |
Ejercicio 3: Función para calcular la media de tres números
- Crea una función llamada
calcularMediaque reciba tres números como parámetros y devuelva la media aritmética de los tres.
Solución
| Función para calcular la media | |
|---|---|
1 2 3 4 5 6 | |
Ejercicio 4: Función para determinar si un número es primo
- Crea una función
esPrimoque reciba un número entero positivo y devuelvatruesi es primo yfalseen caso contrario.
Solución
| Función para verificar si un número es primo | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 | |
Ejercicio adicional
Teiendo en cuenta la función esPrimo() crea funciones a las que seles pase un array de números enteros y:
- Devuelva un array con los números primos.
- Compruebe si exeiste algún número primo en el array.
- Compruebe si todos los números del array son primos.
- Devuelva la cantidad de números primos en el array.
Ejercicio 5: Función que devuelve la cantidad de vocales en una palabra
- Crea una función
contarVocalesque reciba una palabra y devuelva cuántas vocales contiene.
Solución
| Función para contar vocales en una palabra | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 | |
Ejercicio 6: Función para generar un número aleatorio entre dos valores
- Crea una función
numeroAleatorioque reciba dos números (minymax) y devuelva un número entero aleatorio dentro de ese rango, incluyendo ambos valores.
Solución
| Función para generar un número aleatorio | |
|---|---|
1 2 3 4 5 6 | |
Ejercicio 7: Función como expresión
- Crea una función como expresión que calcule el cuadrado de un número y la almacene en una variable.
Solución
| Función como expresión | |
|---|---|
1 2 3 4 5 | |
Ejercicio 8: Diferencia entre paso por valor y referencia
- Declara una función que intente modificar una variable primitiva y otra que modifique un objeto. Explica la diferencia.
Solución
| Paso por valor y referencia | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | |
Ejercicio 9: Comprender el ámbito de variables
- Crea una función que defina una variable local e intenta acceder a ella desde fuera de la función. ¿Qué sucede?
Solución
| Ámbito de variables | |
|---|---|
1 2 3 4 5 6 7 | |
Ejercicios adicionales
Ejercicio 10: Validar la letra del DNI
- Crea una función que reciba un número de DNI y su letra.
- Comprueba si la letra es correcta (usando el método oficial de cálculo del DNI en España).
- Pista: define y utiliza la constante
const letras = "TRWAGMYFPDXBNJZSQVHLCKE"; - Pide al usuario el número de DNI y su letra y verifica si son correctos.
Solución
| Validación de letra del DNI | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | |
Ejercicio 11: Contar repeticiones de una letra en una cadena
- Crea una función que reciba una cadena y una letra.
- Devuelve cuántas veces aparece esa letra en la cadena.
- Pide al usuario una cadena y una letra y muestra el resultado.
Solución
| Contar letras en una cadena | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | |
Ejercicio 12: Cálculo área de diferentes figuras
- Crea funciones que calculen el área de diferentes figuras geométricas. (
"cuadrado","triangulo","circulo"). - Crea una función para pedir al usuario un número positivo y validar que sea un número, devolver -1 si no es válido.
- Pide al usuario la figura y dependiendo d la figura pide los parámetros necesarios.
- Calcula el área de la figura y muéstrala (utilizando la función correspondiente).
Solución con if...else
| Cálculo de áreas de figuras geométricas | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | |
Solución con switch
| Cálculo de áreas de figuras geométricas con switch | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | |
Ejercicio 13: Filtro de articulos (JSON)
Dado un JSON con datos sobre mobiles, y un JSON con datos por los que quiere filtrar el cliente, crear la funciones necesarias para leer el JSON de artículos y el JSON de filtro. A partir de la información debemos obtener un array de artículos que cumplan el filtro, y mostrarlo por consola.
Artículos de ejemplo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | |
Filtro de ejemplo
1 2 3 4 5 6 7 8 9 10 11 | |
Solución
| Filtrar artículos por criterios | |
|---|---|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | |