Teoría: Cadena de llamadas 🔗

Encadenar métodos y propiedades te permite transformar datos rápidamente, ahorrar tiempo y evitar errores al escribir menos código. Sirve mucho cuando quieres preparar un texto para mostrar, validar respuestas o hacer cálculos en tus programas.

¿Qué es encadenar métodos y propiedades?

En la vida real, a veces hacemos varias cosas seguidas con algo: por ejemplo, tomar una hoja, escribir tu nombre y luego contar cuántas letras tiene.

En JavaScript también podemos hacer varias operaciones una tras otra, uniéndolas con puntos (.) — ¡sin crear variables extra ni escribir muchas líneas!

Supongamos que tienes el texto 'Arya Stark' y quieres:

1. Convertirlo a mayúsculas,
2. Contar cuántos caracteres tiene ese texto.

Podrías hacerlo así, paso por paso:

const nombre = 'Arya Stark';
const nombreEnMayusculas = nombre.toUpperCase(); // 'ARYA STARK'
const cantidadLetras = nombreEnMayusculas.length; // 10
console.log(cantidadLetras); // 10

Pero también puedes escribir todo eso en una sola línea, usando encadenamiento:

console.log('Arya Stark'.toUpperCase().length); // 10

1. JavaScript primero toma el texto 'Arya Stark'.
2. Luego aplica .toUpperCase(), convirtiéndolo en 'ARYA STARK'.
3. Después usa .length sobre el resultado, y cuenta los caracteres.

Siempre va de izquierda a derecha: El resultado de un paso sirve como base para el siguiente.

Convertir un número a texto y ver su longitud

const cantidad = 123;
console.log(cantidad.toString().length); // 3

1. .toString() convierte el número 123 en texto: '123'.
2. .length cuenta cuántos caracteres tiene ese texto: 3.

Ver la última letra de un nombre, en mayúsculas

const nombre = 'Robb';
console.log(nombre.toUpperCase().at(-1)); // 'B'

1. Primero .toUpperCase() convierte 'Robb' en 'ROBB'.
2. Después .at(-1) te da la última letra: 'B'.

¡Cuidado con los errores!

• Siempre pon los paréntesis () después de cada método (como .toUpperCase()).
• Si olvidas los paréntesis, JavaScript no hará la acción: solo mostrará una descripción del método.

console.log(nombre.toUpperCase.toLowerCase()); // ❌ Falta el () después de toUpperCase

¿Y si la línea se hace muy larga?

Si tu encadenamiento se ve muy complicado o difícil de leer, puedes dividir los pasos usando variables:

const texto = 'Bienvenido';
const enMayusculas = texto.toUpperCase();
const ultimaLetra = enMayusculas.at(-1);
console.log(ultimaLetra); // 'O'

¿Se puede encadenar con funciones normales?

A veces usamos funciones “una dentro de otra” en vez de encadenar. Por ejemplo:

console.log(Math.round(parseFloat("3.14"))); // 3

1. parseFloat("3.14") convierte el texto en número: 3.14.
2. Math.round(3.14) redondea el número a 3.