Funciones en JavaScript

Problema

Un cambio, tres lugares

Estás escribiendo el programa de la caja de una tienda pequeña. Cada recibo empieza con el nombre de la tienda y su teléfono. Por eso has copiado esas dos líneas en todos los lugares donde se imprime un recibo.

La tienda cambia de teléfono. Lo corriges en dos lugares y se te pasa el tercero:

console.log("Tienda del barrio");
console.log("tel. 02 123 4567");
console.log("Pan       1,20 €");

console.log("Tienda del barrio");
console.log("tel. 02 123 4567");
console.log("Leche     2,10 €");

console.log("Tienda del barrio");
console.log("tel. 02 765 4321");
console.log("Café      3,50 €");

Tienda del barrio
tel. 02 123 4567
Pan       1,20 €
Tienda del barrio
tel. 02 123 4567
Leche     2,10 €
Tienda del barrio
tel. 02 765 4321
Café      3,50 €

El tercer cliente recibe un recibo con el número viejo. Cuantas más copias hay, más fácil es que se te pase una.

La idea

Escríbelo una vez, llámalo por su nombre

Pon la parte que se repite en un solo lugar y dale un nombre. Eso es una función: un bloque de código con nombre que hace un solo trabajo.

Escribes la función una vez. Después, donde la necesites, escribes solo su nombre con paréntesis: printHeader();. Esto se llama llamar a la función.

Si la tienda vuelve a cambiar de teléfono, corriges una línea en la función, y todos los recibos quedan bien.

Míralo

Qué pasa en una llamada

El programa avanza línea por línea. Cuando llega a una llamada, entra en la función, ejecuta su cuerpo y vuelve justo después de la llamada. Sigue la bolita: es el punto al que ha llegado el programa.

function printHeader() {
  console.log("Tienda del barrio");
  console.log("tel. 02 123 4567");
}

printHeader();
console.log("Pan       1,20 €");
printHeader();
console.log("Leche     2,10 €");

Paso a paso, en palabras

function solo guarda la función. La primera línea que hace algo es printHeader().
Una llamada: la ejecución entra en la función.
La función imprime la parte de arriba del recibo.
La función ha terminado: la ejecución vuelve justo después de la llamada.
El programa sigue: imprime el pan.
Una segunda llamada: el mismo código, sin escribirlo otra vez.
La parte de arriba se imprime otra vez.
De vuelta en el programa, a la línea siguiente.

La segunda vez no escribes otra vez la parte de arriba. Llamas a la misma función, y esta imprime las mismas dos líneas.

La idea

Cómo se escribe una función

Aquí está el programa entero, para que veas dónde va la función:

function printHeader() {
  console.log("Tienda del barrio");
  console.log("tel. 02 123 4567");
}

printHeader();
console.log("Pan       1,20 €");

Tienda del barrio
tel. 02 123 4567
Pan       1,20 €

function«aquí hay una función»printHeadernombre()no recibe nadael cuerpo

function dice que sigue una función. Solo se guarda con un nombre; no se ejecuta.
El nombre dice qué hace la función. Por eso es un verbo: printHeader, printFooter. En JavaScript los nombres empiezan con minúscula, y cada palabra siguiente empieza con mayúscula.
Los paréntesis vacíos significan que la función no recibe nada de fuera. Los llenaremos en la próxima lección.
El cuerpo está entre { y }.
Aquí la función va encima de las líneas que la llaman, porque así se lee más fácil.

Más precisamente, para curiosos

Una función escrita con function también se puede llamar desde una línea que está encima de ella: antes de ejecutar el archivo, JavaScript reúne todas esas funciones. Esto no vale para las formas que verás más adelante (const printHeader = () => { … }), así que es un buen hábito que la función esté encima de la llamada.

Pruébalo

¿En qué orden?

¿Qué imprimirá el programa?

function printThanks() {
  console.log("¡Gracias!");
}

console.log("Pedido n.º 1024");
printThanks();
console.log("Pedido n.º 1025");
printThanks();

Respuesta

Pedido n.º 1024
Pedido n.º 1025
¡Gracias!

¡Gracias!
Pedido n.º 1024
Pedido n.º 1025

Pedido n.º 1024
¡Gracias!
Pedido n.º 1025
¡Gracias!

Pruébalo

¿Qué falta?

Esta función imprime la parte de abajo del recibo. ¿Qué va en el hueco?

 printFooter() {
  console.log("Esperamos verte pronto de nuevo.");
}

function: así empieza la función.

Pruébalo

Encuentra el error

El programa arranca, pero imprime solo «Pedido n.º 1024», sin «¡Gracias!». ¿En qué línea está el error?

Elige la línea con el error.

Una llamada necesita paréntesis: printThanks();. Sin ellos solo mencionas la función, y no se ejecuta. No hay ningún error, por eso este descuido cuesta de ver: fíjate en la salida.

Ejercicio

El recibo y el triángulo

Resuelve estas tareas en tu editor. Cada una tiene una salida de ejemplo para comparar con la tuya.

1. Recibo. Escribe tres funciones:

printLine() imprime una línea de 20 guiones con un bucle;
printHeader() imprime el nombre de la tienda, el teléfono y la línea;
printFooter() imprime la línea y «¡Gracias!».

Debajo de ellas, imprime dos recibos: la parte de arriba, una línea con una compra y la parte de abajo.

Tienda del barrio
tel. 02 123 4567
--------------------
Pan       1,20 €
--------------------
¡Gracias!
Tienda del barrio
tel. 02 123 4567
--------------------
Leche     2,10 €
--------------------
¡Gracias!

2. Triángulo. Escribe una función printTriangle() que, con bucles anidados, imprima un triángulo de asteriscos de 4 filas de alto:

   *
  ***
 *****
*******

En la próxima lección la altura será un parámetro: una sola función para un triángulo de la altura que quieras.

Test

Ponte a prueba

1. ¿Cuándo se ejecuta el código del cuerpo de una función?Cuando se llama a la funciónCuando el programa llega al lugar donde está escrito la funciónUna vez, al arrancar el programa

2. ¿Qué hace function printThanks() { … }?Crea la función y la ejecuta enseguidaGuarda la función con un nombre, sin ejecutarlaEjecuta la función una vez, al arrancar el programa

3. Una función se llama en tres lugares. ¿Cuántas veces está escrito su código?Depende dla funciónTres vecesUna vez

4. ¿Qué hace printThanks; sin paréntesis?Nada: solo menciona su nombreLlama a la funciónEl programa no arranca

Funciones

Cookies