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

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(''.concat('Hola a ', nombre));
}

saludo('Luis');

Y si necesitáramos aumentar sus argumentos, separamos por comas.

function saludo(nombre, localidad) {
	console.log(''.concat('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(''.concat('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();
//

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

const texto = saluda();

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

Este mecanismo lo has experimentado de primera mano sin saberlo cuando has utilizado .concat() o .toUpperCase(). Son funciones que devuelven un string.

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.

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

4-1 4-2

¿Te ha gustado? Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario