Teoría: Generación de cadenas en bucle

En programación, es común tener que generar cadenas dinámicas en un bucle. Un caso muy frecuente es la construcción de listas en HTML a partir de un conjunto de elementos.

Supongamos que queremos convertir una colección de elementos en una lista HTML:

const coll = ['milk', 'butter'];

buildHTMLList(coll);
// <ul><li>milk</li><li>butter</li></ul>

Vamos a ver dos formas de hacer esto: una que funciona pero no es eficiente, y otra más optimizada utilizando arrays y el método join().

Primera solución: Usar concatenación de cadenas

Una opción sencilla para construir la lista es utilizar una variable de tipo cadena e ir agregando los elementos li dentro de un bucle.

Paso a paso:

1. Crear una variable result y asignarle '<ul>' para comenzar la lista.
2. Recorrer cada elemento y agregarlo dentro de un li con concatenación de cadenas.
3. Terminar la lista agregando '</ul>' y devolver el resultado.

Aquí está nuestro código:

const buildHTMLList = (coll) => {
  let result = '<ul>';
  for (const item of coll) {
    result = `${result}<li>${item}</li>`;
    // También podríamos escribir: result += `<li>${item}</li>`;
  }
  result = `${result}</ul>`;

  return result;
}

✅ Este código funciona, pero tiene un problema: es ineficiente.
Cada vez que concatenamos algo a result, en realidad se está creando una nueva cadena, porque en JavaScript las cadenas son inmutables (no pueden modificarse directamente). Si la lista es muy grande, estas copias pueden afectar el rendimiento.

Segunda solución: Usar un array y join()

En lugar de concatenar directamente, es mejor construir un array con los elementos y luego unirlos en una sola cadena de manera eficiente.

Paso a paso:

1. Crear un array vacío parts.
2. Recorrer los elementos y agregarlos como '<li>elemento</li>' dentro del array.
3. Usar join('') para unir todos los elementos en una sola cadena sin separador.
4. Construir la lista con el resultado final.

const buildHTMLList = (coll) => {
  const parts = [];
  for (const item of coll) {
    parts.push(`<li>${item}</li>`);
  }

  // Unimos las partes en una sola cadena
  const innerValue = parts.join('');
  const result = `<ul>${innerValue}</ul>`;
  return result;
}

✅ Este método es mejor porque:

• Se evitan múltiples copias innecesarias de las cadenas.
• Es más fácil de depurar: los datos en un array son más manejables.
• Podemos modificar el array antes de unirlo si es necesario.

Explorando join()

El método join() nos permite unir elementos de un array en una sola cadena con un separador opcional.

const parts = ['JavaScript', 'PHP', 'Python'];
const result = parts.join(', '); // Unimos con coma y espacio

console.log(result); // "JavaScript, PHP, Python"

Si queremos que cada elemento esté en una nueva línea, usamos '\n':

const parts = ['JavaScript', 'PHP', 'Python'];
const result = parts.join('\n');

console.log(result); 
// JavaScript
// PHP
// Python

El segundo caso es muy útil para formatear texto correctamente, por ejemplo, al generar listas o imprimir reportes.

Un error común con join()

A veces se comete el error de agregar saltos de línea dentro del array en lugar de hacerlo en join(). Veamos la diferencia:

// INCORRECTO: Agregar saltos de línea dentro del array
const parts = [];
for (const item of coll) {
  parts.push(`\n<li>${item}</li>`); // ❌ No recomendado
}
const innerValue = parts.join(''); // Sin separador incorrecto

// CORRECTO: Usar el separador en `join()`
const parts = [];
for (const item of coll) {
  parts.push(`<li>${item}</li>`); 
}
const innerValue = parts.join('\n'); // ✅ Separador en join()

💡 Es mejor dejar el formato final para join(), así podemos cambiarlo sin modificar todo el código.

Este método de trabajar con cadenas es muy útil en programación, ¡así que vale la pena dominarlo desde ahora!