8

Estoy tratando de comprender los conceptos básicos para tener bases sólidas.

De momento estoy realizando un ejercicio para la recuperación de unos tweets ficticios. Estoy haciendo un esfuerzo por entender bien el por qué de todo el desarrollo del bucle y me queda algo sin entender.

Pongo aquí el código inicial, el funcional:

var tweets = ["Hi", "Bye", "See You"]

var dailyTweets = "";

for (var i = 0; i < tweets.length; i++) {

  dailyTweets = dailyTweets + "<p>" + tweets[i] + "</p>";
  
}
  
  document.getElementById("tweet").innerHTML = dailyTweets;
    
  console.log(dailyTweets); 
<div id = "tweet"></div>

Analizando el código me dije: Me parece que a la línea dailyTweets = dailyTweets + "<p>" + tweets[i] + "</p>"; pudiese ser dailyTweets = "<p>" + tweets[i] + "</p>"; y aún funcionar, incluso mejor porque sería más conciso. El resultado es el siguiente:

var tweets = ["Hi", "Bye", "See You"]

var dailyTweets = "";

for (var i = 0; i < tweets.length; i++) {

  dailyTweets = "<p>" + tweets[i] + "</p>";
  
}
  
  document.getElementById("tweet").innerHTML = dailyTweets;
    
  console.log(dailyTweets);    
<div id = "tweet"></div>

Este código no dio resultado, ya que la salida esperada es cada tweet por separado y en secuencia, como en el primer ejemplo.

Mi duda es: ¿Por qué debo colocar la variable debe ser igual a la variable más el índice del array para que funcione; ej. var = var + "<p> array[i] </p>"?

Por qué este sí: dailyTweets = dailyTweets + "<p>" + tweets[i] + "</p>";

y

Este no: dailyTweets = "<p>" + tweets[i] + "</p>";

2 respuestas 2

9
dailyTweets = dailyTweets + "<p>" + tweets[i] + "</p>";

Esta línea lo que significa es, "dailyTweets ahora es lo que ya tenía más este nuevo texto".

dailyTweets = "<p>" + tweets[i] + "</p>";

Y esta otra dice "dailyTweets ahora es este nuevo texto".

Esa es la diferencia, en la última estás sobreescribiendo el contenido de la variable, el operador = asigna al lado izquierdo lo que pases del lado derecho, no agrega.

Existe una manera más compacta de hacer lo que quieres, con el operador += que es la manera abreviada de la primera forma:

dailyTweets += "<p>" + tweets[i] + "</p>";
3

Si quieres hacerlo de otra forma, sin for, puedes hacer lo siguiente:

  • Usar map1 para agregar el prefijo <p> y el sufijo </p> a cada elemento del array.
  • Usar join2 sin ningún separador, para convertir el array con su nuevo contenido incluido (los prefijos y los sufijos agregados) en una cadena.

var tweets = ["Hi", "Bye", "See You"]
tweets = tweets.map(i => '<p>' + i + "</p>");
var dailyTweets=tweets.join('');
console.log(dailyTweets);


  1. El método map se puede aplicar a cualquier array, y crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. En este caso, para simplificar, en vez de aplicar una función, usamos un estilo de llamada conocido como expresión de función flecha, en el que se usa =>. Para más detalles sobre esta forma de programar puedes ver este enlace, y un ejemplo muy concreto aplicado a map en el apartado titulado Funciones reducidas.
  2. El método join() une todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena y devuelve esta cadena. Se le puede pasar como parámetro un separador para cada cadena. Si no se le pasa nada, toma por defecto la , como separador, por eso aquí he pasado explícitamente una cadena vacía como separador.
2
  • Hola, ¿igual estaría bien algo más de explicación? Lo digo porque si el OP está aprendiendo a programar el uso de map, join y las arrow functions puede ser chocante de primeras :). De todas formas mi voto por lo conciso del código.
    – Kiko_L
    el 29 nov. 2018 a las 10:54
  • 1
    Gracias @Kiko_L, he mejorado la respuesta con algunas explicaciones.
    – A. Cedano
    el 29 nov. 2018 a las 11:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.