Variable and Loop in JavaScript

Question

Variable and Loop in JavaScript

Navigation

#1 by (10 votes)
#2 by (2 votes)

8

I'm trying to understand the basics to have solid foundations.

At the moment I'm doing an exercise to recover some fictitious tweets. I am making an effort to understand well the reason of all the development of the loop and I have something left without understanding.

I put here the initial code, the functional one:

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>

Analyzing the code I said to myself: It seems to me that the line dailyTweets = dailyTweets + "" + tweets[i] + ""; could be dailyTweets = "" + tweets[i] + ""; and still work, even better because it would be more concise. The result is the following:

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>

This code did not work, since the expected output is each tweet separately and in sequence, as in the first example.

My question is: Why should I put the variable must be equal to the variable plus the index of the array to make it work; ex. var = var + " array[i] " ?

Why this yes: dailyTweets = dailyTweets + "" + tweets[i] + "";

and

This is not: dailyTweets = "" + tweets[i] + "";

javascript bucles variables bucle-for

asked by David Sanchez 29.11.2018 в 04:09

source

2 answers

Detect and destroy colliding objects Encrypt RSA in C # decrypt in java

score 10 · Answer 1

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

This line means, " dailyTweets is now what I already had plus this new text".

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

And this one says " dailyTweets now is this new text".

That is the difference, in the last one you are overwriting the content of the variable, the operator = assigns to the left side what you pass on the right side, does not add.

There is a more compact way of doing what you want, with the operator += which is the short form of the first form:

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

score 2 · Answer 2

If you want to do it in another way, without for , you can do the following:

Use map 1 to add the prefix  and the suffix  to each element of the array.
Use join 2 without any separator, to convert the array with its new content included (prefixes and suffixes added) into a string.

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

The map method can be applied to any array, and creates a new array with the results of the call to the indicated function applied to each of its elements. In this case, to simplify, instead of applying a function, we use a call style known as function expression arrow , where => is used. For more details on this form of programming, see this link , and an example very concrete applied to map in the section entitled Reduced Functions .

The join() method links all the elements of a matrix (or an object similar to an array) in a string and returns this string. You can pass as a parameter a separator for each chain. If nothing happens to him, he defaults to , as a separator, so here I have explicitly passed an empty string as a separator.