Lección 11 · 11 de 20

Funciones y funciones flecha · JavaScript

Reutilice código con funciones en JavaScript: declaraciones con function, valores con return, funciones flecha y funciones como valores.

JavaScript · Funciones y funciones flecha en DMarlon Studio: el código del ejemplo y su salida en la terminal

Una función es un bloque de código con nombre que se puede usar tantas veces como haga falta. function greet(name) declara una que recibe un parámetro, name, y se llama escribiendo su nombre con el valor entre paréntesis: greet("Laura").

Con `return` la función devuelve un resultado a quien la llama. celsiusToFahrenheit(20) vale 68, y ese valor se puede escribir, guardar en una variable o usar en otra cuenta.

Las funciones flecha son una forma más corta: const double = (n) => n * 2. Si el cuerpo es una sola expresión, se devuelve sin escribir return; si tiene varias líneas, como shippingCost, necesita llaves y return.

En JavaScript las funciones son valores como cualquier otro: se guardan en constantes y se pasan a otras funciones. applyTwice(double, 5) recibe double y la aplica dos veces: 5, 10, 20. Esta idea es la base de las lecciones siguientes y de los componentes de React, que en DMarlon Studio usan los destinos React, Next.js y React Native.

Una declaración con function se puede llamar antes de la línea en la que aparece, como square(9); una función flecha guardada en const, no.

Código · main.js

// A function declaration: a named block of code you can reuse.function greet(name) {  console.log(`Hello, ${name}! Welcome to the shop.`);}greet("Laura");greet("Pedro");// A function can calculate a value and return it.function celsiusToFahrenheit(celsius) {  return celsius * 9 / 5 + 32;}console.log("20 C =", celsiusToFahrenheit(20), "F");console.log("-5 C =", celsiusToFahrenheit(-5), "F");// Arrow functions: a shorter way to write a function.const double = (n) => n * 2;const isEven = (n) => n % 2 === 0;console.log("double(21):", double(21), "| isEven(7):", isEven(7));// With several lines, an arrow function needs { } and return.const shippingCost = (total) => {  if (total >= 50) return 0;  return 4.95;};console.log("Shipping for 30 euros:", shippingCost(30));console.log("Shipping for 75 euros:", shippingCost(75));// Functions are values: you can pass them to other functions.const applyTwice = (fn, value) => fn(fn(value));console.log("applyTwice(double, 5):", applyTwice(double, 5));// Declarations can be called before they appear in the file.console.log("square(9):", square(9));function square(n) { return n * n; }

Salida · node main.js

Hello, Laura! Welcome to the shop.
Hello, Pedro! Welcome to the shop.
20 C = 68 F
-5 C = 23 F
double(21): 42 | isEven(7): false
Shipping for 30 euros: 4.95
Shipping for 75 euros: 0
applyTwice(double, 5): 20
square(9): 81

Para recordar

function nombre(parámetros) { ... } declara una función.
return devuelve un valor y termina la función.
(x) => x * 2 es una función flecha que devuelve x * 2.
Las funciones son valores: se guardan y se pasan a otras funciones.

Ejercicio

Escriba una función flecha vatPrice que sume el 21 % de IVA a un precio y otra isAdult que diga si una edad llega a 18, y pruébelas con tres valores cada una.