Recorriendo cadenas en un bucle — Fundamentos de JavaScript

• Mostrar una palabra letra por letra
• Invertir una palabra

Cuando pensamos en bucles, normalmente imaginamos números. Pero los bucles también son muy útiles cuando queremos procesar texto, letra por letra. Esto es algo que pasa todo el tiempo: mostrar nombres, verificar contraseñas, editar mensajes, etc.

En JavaScript, podemos acceder a cada letra de una palabra usando su índice (posición). Por ejemplo, la letra en la posición 0 de 'Arya' es 'A'.

Mostrar una palabra letra por letra

Imagina que estás desarrollando una app para niños que muestra una letra por pantalla cada segundo.
Necesitamos separar las letras para mostrarlas una por una.

Así lo haríamos con un bucle:

const printNameBySymbol = (name) => {
  let i = 0;

  while (i < name.length) {
    console.log(name[i]); // Imprime la letra actual
    i = i + 1;            // Pasa a la siguiente letra
  }
};

printNameBySymbol('Arya');

Salida:

A
r
y
a

❓ ¿Por qué i < name.length?

La palabra 'Arya' tiene 4 letras. Sus índices son: 0, 1, 2, 3. Por eso usamos < name.length, que en este caso es 4.

Si usáramos <=, llegaríamos a name[4], que no existe.

Invertir una palabra

Ahora imaginemos otra situación real: Estás programando un campo donde el usuario escribe algo, y quieres mostrarle su texto al revés por diversión o validación.

reverse('Bran'); // → 'narB'

Vamos construyendo una nueva palabra, pero agregando cada letra al principio en lugar de al final.

const reverse = (text) => {
  let i = 0;
  let result = ''; // Empezamos con una cadena vacía

  while (i < text.length) {
    result = text[i] + result; // Agrega cada letra adelante
    i = i + 1;
  }

  return result;
};

console.log(reverse('Bran'));   // 'narB'
console.log(reverse('Códica')); // 'acidoC'

Paso a paso con 'Bran'

result = ''
result = 'B' + ''      // 'B'
result = 'r' + 'B'     // 'rB'
result = 'a' + 'rB'    // 'arB'
result = 'n' + 'arB'   // 'narB'

¡Listo! Ya está invertida.