Funciones flecha, ámbito y template literals

Domina la sintaxis flecha, el ámbito de bloque y los closures, y luego construye cadenas dinámicas con template literals.

8 min · 3 preguntas

Las funciones flecha están en todas partes en el código moderno: callbacks de map y filter, escuchadores de eventos, promesas. Su fuerza: una sintaxis compacta con un retorno implícito cuando el cuerpo cabe en una sola expresión. En cuanto abres llaves, el return vuelve a ser obligatorio.

const double = (n) => n * 2;

const isAdult = (user) => user.age >= 18;

const buildUser = (name) => ({ name, active: true });

const sum = (a, b) => {
  const total = a + b;
  return total;
};

console.log(double(21)); // 42
console.log(buildUser("Ana").active); // true

El ámbito determina dónde es visible una variable. Con let y const, una variable declarada dentro de un bloque (if, for, llaves) solo existe dentro de ese bloque. Otro mecanismo esencial: una función conserva el acceso a las variables del ámbito donde fue creada, incluso después de que ese ámbito haya terminado. Esto es un closure, y es lo que hace funcionar a los contadores, las cachés y los gestores de estado.

function createCounter() {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Los template literals, delimitados por acentos graves (backticks), son una alternativa mucho mejor que la concatenación. Inyectas una expresión con ${...}, y los saltos de línea se conservan tal cual, lo que es ideal para construir mensajes o fragmentos de HTML.

const user = { firstName: "Nadia", cartCount: 3 };

const message = `Hello ${user.firstName}, you
have ${user.cartCount} items in your cart.`;

console.log(message);

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué sintaxis devuelve correctamente un objeto desde una función flecha con retorno implícito?
   • (name) => { name: name }
   • (name) => ({ name })
   • (name) => return { name }
2. ¿Es accesible una variable declarada con let dentro de un bloque if después de ese bloque?
   • Sí, igual que con var
   • No, su ámbito se limita al bloque
   • Solo si fue inicializada
3. ¿Qué carácter delimita un template literal?
   • La comilla simple
   • La comilla doble
   • El acento grave (backtick)