Lección 4: Funciones

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.

Simple

La estructura es la siguiente.

function alias() {
// codigo
}

Y para ejecutarlo usaremos el alias con los paréntesis.

alias();

Un ejemplo.

function saludo() {
console.log('Hola a todos');
}

saludo();
// Hola a todos

Nombra las funciones con sustantivos: perfilDeUsuario(), ultimaPagina(), columnasImpares()…

Argumentos

Es posible personalizar las instrucciones de la función con argumentos y variables al ser invocado.

Podemos ver como trabaja con un solo argumento.

function saludo(nombre) {
	console.log(`Hola a ${nombre}`);
}

saludo('Luis');

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

Puede darse la particularidad que su argumento sea opcional, o que disponga de un valor fijo si no es declarado.

function saludaA(nombre='todos') {
	console.log(`Hola a ${nombre}`);
}

saludaA();
// Hola a todos
saludaA('Luis');
// Hola a Luis

Con un array de argumentos

¿Qué ocurre si no queremos restringir el número de argumentos? O dicho de otra manera: que nos puedan dar infinitos argumentos. Eso es posible, aunque nos creará un array (lo verémos más adelante).

function diasLibres(...dias) {
	console.log(dias);
}

diasLibres('Lunes', 'Jueves', 'Domingo');
// ['Lunes', 'Jueves', 'Domingo']

Return

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.

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

Ahora se guardara en una constante y a continuación se imprime.

const texto = saluda();

console.log(texto);
// Hola a todos

Otro ejemplo, un poco 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.

function calcularEdad(anyo) {
	return new Date().getFullYear() - anyo;
}

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.

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.

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.

Anónimas

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.

// 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

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

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

function nombre() {
	return nombre();
}

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.

En el siguiente ejemplo no dejo de preguntar por un número hasta que el usuario lo adivina, se cumple la condición.

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();

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

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()

Muestra un modal de aviso y nativo.

alert('Equipo pirateado');

prompt()

Muestra un modal donde el usuario puede introducir texto.

const respuesta = prompt('¿Cual es tu color favorito?');
// Responde: Naranja

console.log(respuesta);
// Naranja

setTimeout()

Ejecuta una función con retardo. Su argumento es una función anónima como hemos visto antes.

En el ejemplo se lanzará pasado 2s.

const miTimeout = setTimeout(function() {
	alert('Acepta nuestras cookies?');
}, 2000);

setInterval()

Ejecuta una función cada cierto tiempo, de forma indefinida a no ser que lo detengas. Necesita una función anónima.

En el ejemplo se lanzará cada 3s.

const miIntervalo = setInterval(function() {
	alert('Borrando una foto suya al azar');
}, 3000);

¿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

Un código refleja salud si posee buenos comentarios, aumenta su esperanza de vida y habla muy bien del autor. Por ello es importante dejar un buen manual de instrucciones de como usar cada función.

/**
 * 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;
}

Evita comentarios del tipo “cómo funciona el código” a favor de “que devuelve”.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario