Funciones en Javascript

Curso de Javascript Online. Desde cero.

14.  
19.  
25.  
34.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Son bloques de código reutilizables.

Estos bloques de código reutilizables a menudo reciben un nombre (como todas las funciones de esta lección). Por ejemplo la función declarada en el código de más abajo recibe el nombre saludar.

En esta lección no aparecen, pero una función a la que no le ponemos un nombre, se llama función anónima.

Su sintaxis de declaración es:

function [nombreDeLaFuncion]([parámetros de la función, si los tuviese]){
   [código de la función]
}

¿Para que sirven?

Imagina que queremos dar la bienvenida a un usuario a nuestra aplicación y explicarle las normas de uso. Podríamos hacer un console log con el siguiente código:

console.log('Hola Jorge, bienvenido a esta aplicación de consola. Estamos muy contentos de que quieras comenzar a usarla a pesar de ser una aplicación sustancialmente limitada ya que a parte de saludarte y soltarte este rollo, no hace mucho más');

Si quisieramos utilizar esta función para dar la bienvenida a la aplicación a toda una clase con 20 alumnos, tendríamos que repetir este código 20 veces. Sin embargo, si lo encápsulamos en una función, lo que repetiremos 20 veces será la llamada a la función, quedando un código mucho más conciso y versátil (si quiero cambiar el saludo, lo hago una vez y no 20).

function saludarAlumno(nombreAlumno){
   console.log('Hola ' + nombreAlumno + ', bienvenido a esta aplicación de consola. Estamos muy contentos de que quieras comenzar a usarla a pesar de ser una aplicación sustancialmente limitada ya que a parte de saludarte y soltarte este rollo, no hace mucho más');
}

saludarAlumno('Jorge');
saludarAlumno('Roberto');
saludarAlumno('Laura');

Función que no devuelve nada, sin parámetros

function saludar(){
	console.log('Buenas tardes!');
}

saludar();

Función que no devuelve nada, con parámetros

function saludar(nombre){
	console.log('Buenas tardes ' + nombre);
}

saludar('Pablo');

Ejercicios: funciones

Resolveremos los siguientes ejercicios definiendo una función con parámetros de entrada

1. Crear y llamar a una función que reciba como parámetro de entrada un valor booleano y muestre «Sí, eso es cierto» si el valor es true, y «No, eso es falso» si el valor es false.

2. Ejercicio «hoyQuieroComer»
Crear una función llamada «hoyQuieroComer» que recibe un parámetro “comida” cuyo valor será «garbanzos».
Cuando llamemos a la función se mostrará un log indicándonos lo que deseamos comer.

Funciones en Javascript 1

3. Crear una función llamada calcularCubo que recibe un número, calcule su cubo y muestre el resultado por consola. Llamar a la función pasándole el valor 3.

4. Crear una función llamada calcularVelocidad que recibirá la velocidad en Km/hora y la mostrará en metros/hora.

A la función le pasaremos como parámetro de entrada 3 kilómetros/hora y deberíamos visualizar 3000 metros/hora.

5. Crear una función llamada calcularArea que recibirá el ancho y el alto de un rectángulo y calculará su area.

Cuando una función recibe varios parámetros, estos irán separados por coma.

calculaArea(alto, ancho);

6. Crear y llamar a una función que recibe la base y la altura de un triángulo y calcula su área.

Area triángulo = base*altura/2

7. Crear estas dos funciones:

  • calculaPerimetro(radio)
Perímetro de la circunferencia = 2*Math.PI*radio
  • calculaArea(radio)
Area de la circunferencia = Math.PI*radio2

Función que devuelve un valor

función php
Función que no devuelve nada
function noDevuelveNada(a, b){
	const resultado = a + b;
	console.log(resultado);
}

noDevuelveNada(2,3);
Función que devuelve algo
function devuelveValor(a,b){
	const resultado = a + b;
	return resultado;
}

const valorDevuelto = devuelveValor(2,3);
console.log(valorDevuelto);

Aclaraciones mega importantes:

El valor que devuelve una función debe ser almacenado en la misma línea en la que llamas a la función.

Este código:

const v = calcularPresupuesto();

No significa: v es igual a calcularPresupuesto(). Porque entonces v sería una función y v es un valor concreto.

Significa: v es igual a lo que devuelve calcularPresupuesto().

Preguntas que debes saber responder para todas las funciones que hagas

1. ¿En qué línea has definido la función?
2. ¿En qué línea has llamado a la función?
3. ¿Cuantos parámetros de entrada tiene la función?
4. ¿Cómo se llaman los parámetros de entrada de la función?
5. ¿La función devuelve algo?

1. function calcularSuma( numero1, numero2) {
2. const resultado = numero1 + numero2;
3. return resultado;
4. }
5.
6. calcularSuma(3,4);
¿En qué línea has definido la función?
1

¿En qué línea has llamado a la función? 
6

¿Cuantos parámetros de entrada tiene la función?
2

¿Cómo se llaman los parámetros de entrada de la función? 
numero1 y numero2

¿La función devuelve algo? 
Sí, el valor de la constante resultado

Ejercicios 2

1. ¿Qué valor de x se mostrará en la consola?

function hello() {
	return "Hi!";
}

const x = hello();
console.log(x);
"Hi!"

2. ¿Qué valor de x se mostrará en la consola?

function reply(phrase) {
	return phrase;
}

const x = reply("How do you do?");
console.log(x); // ¿Qué valor de x se mostrará en la consola?
"How do you do?"

3. ¿Qué valor de x se mostrará en la consola?

function whereIs(name) {
	return "Dónde esta " + name + "?";
}

const x = whereIs("Jacky");
console.log(x); // ¿Qué valor de x se mostrará en la consola?
"Dónde esta Jacky?"

4. Escribe una función echo que devuelva el valor que recibe como parámetro.

echo("Greta");

debería devolver «Greta» y

echo("CO2");

debería devolver «CO2».

5. Escribe una función saludar que reciba un parámetro y devuelva el texto «Hola <parametro>!»

Por ejemplo,

saludar("Ada");

Debería devolver «Hola Ada!»

saludar("Grace");

Debería devolver «Hola Grace!»

6. Modificar la siguiente función para que devuelva Inside si val está entre 10 y 20 inclusive y Outside en caso contrario.

function test(val) {
	if (val) { // Cambia esta línea
		return "Inside";
	}else {
		return "Outside";
	}
}

7. Añade el operador de igual para que la siguiente función devuelva Equal cuando val sea 12.

function testEqual(val) {
	if (val) { // Cambia esta línea
		return "Equal";
	}
	return "Not Equal";
}

8. Combina las sentencias if en un único bloque de tipo if/else.

function testElse(val) {
	let result = "";
	if (val > 5) {
		result = "Mayor que 5";
	}

	if (val <= 5) {
		result = "Menor o igual a 5";
	}
	return result;
}

9. Combina las sentencias en un único bloque de tipo if/elseif/else.

function testElse(val) {
	let result = "";

	if (val > 5) {
		result = "Bigger than 5";
	}

	if (val < 5) {
	result = "Smaller than 5";
	}

	if (val == 5) {
		result = "Equal to 5";
	}
	return result;
}

10. ¿Qué valor de x se mostrará por consola?

function hola(nombre) {
	return "Hi " + nombre + "!";
}

const h1 = hola("Selva");
const h2 = hola("Pola");
const x = h1 +  " " + h2;
console.log(x); // ¿Qué valor de x se mostrará en la consola?
x = "Hi Selva! Hi Pola!";

11. ¿Qué valor de x se mostrará por consola?

function duplica(nombre) {
	return nombre + " and " + nombre;
}

const x = duplica("Roy");
console.log(x); // ¿Qué valor de x se mostrará en la consola?
"Roy and Roy"

12. Completar la función para que se cumplan las siguientes condiciones:

function testSize(num) {
	return "Change Me"; // Quitar esta línea y poner en su lugar la lógica pertinente (bloques de tipo if/else)
}
num < 5 → return "Tiny";
num < 10 → return "Small";
num < 15 → return "Medium";
num < 20 → return "Large";
num >= 20 → return "Huge";

13. Escribe una función nand que tome como parámetros de entrada dos valores booleanos. Si ambos valores son true, debería devolver false. En cualquier otro caso, debería devolver true.

Por ejemplo, la llamada

nand(true, true);

debería devolver false.

Las llamadas:

nand(true, false);
nand(false, true);
nand(false, false);

deberían devolver true.

14. Escribe una función nor que tome como parámetros de entrada dos valores booleanos. Si alguno de los dos es false, debería devolver true. En cualquier otro caso, el valor devuelto debería ser false.

Por ejemplo, la llamada a la función

nor(false, false);

debería devolver true.

Las llamadas:

nor(true, false);
nor(false, true);
nor(true, true);

deberían devolver false.

15. Escribe una función xor que tome dos valores booleanos. Si ambos valores son diferentes, debería devolver true. Si ambos valores son iguales, debería devolver false.

Por ejemplo, las llamadas:

xor(true, false);
xor(false, true);

deberían devolver true.

Las llamadas

xor(true, true);
xor(false, false);

deberían devolver false.

Recolector de basura

Javascript requiere una cantidad de memoria para poder trabajar. . En esta memoria, cedida por el Sistema Operativo, cada programa debe ser capaz ubicar los objetos que está manejando en tiempo de ejecución, monitorizar su estado, reciclarlos cuando ya no son necesarios e, idealmente, compactar el espacio resultante para optimizar el rendimiento.

La gestión de dicha memoria, dependiendo del lenguaje, puede ser de dos tipos:

  • Manual: se asignan y liberan los recursos de memoria de forma explícita. Esto significa que es el desarrollador quien debe administrar los registros asignando memoria a sus objetos mediante punteros y liberarlos cuando ya no sean necesarios.
  • Automática: las tareas de reserva, monitorización y reciclaje son llevadas a cabo por el propio sistema sin la intervención del programador. Es en este escenario donde el Recolector de Basura se encarga de identificar y eliminar la memoria ocupada por objetos que ya no están en uso por el programa (conociéndose a esta memoria residual como ‘basura’).

Ejemplo

let user = {
  name: "Pablo"
};

Si ejecutamos la siguiente línea de código…

user = null;

La propiedad name dejará de ser accesible, y por tanto será elegible por el recolector de basura.

Función callback

Una función de callback es una función que se pasa a otra función como un argumento.

function callback(){
	console.log('Llamada al callback');
}

function empezarTodo(a, b, myCallback){
	console.log(a,b);
	myCallback();
}

empezarTodo(3,4, callback);

Llamar a una función al cabo de un tiempo

Para esto, tenemos básicamente dos funciones:

setTimeout(miFuncion, 2000);

El código anterior llama a la función miFunción al cabo de dos segundos.

setInterval(miFuncion, 2000);

El código anterior llama a la función miFuncion cada dos segundos.

Ver preguntas de la certificación JSE-40-01

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.