Getting started with javascript, got a questions

Question

I'm following w3school beginner tutorial for JS. There's something I don't understand from code below:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var cars = ["Saab","Volvo","BMW"];
var text = "";
for(var i = 0; i < cars.length; i++) {
text+=cars[i] + "<br>";
}


document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Can someone explain me the logic of text+=cars[i]? I understand that += means increment, but I can´t understand the logic behind adding the array element to variable text.

Thank you so much for your quick replies! I've got a follow up question: is there an alternative to display the same type of information with having to use the

var text = "";

and

text+=cars[i]

pieces of code? If so, how would the snippet of code look like and what should I insert into HTML if not

text

?

Thanks again!

+= means not incrementing value ? it means concatenate to the existing variable . — ngLover, Jul 12 '15 at 14:39
`+=` doesn't only mean increment. When given string values instead of two numbers, `+` will instead concatenate. [MDN: Addition Assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment) — Jonathan Lonowski, Jul 12 '15 at 14:39

score 0 · Accepted Answer · answered Jul 12 '15 at 14:38

0

a+=b is short for a=a+b. In your case you have text = text + cars[i] + "<br>".

text is a string, and you are using + to append a value from the array (that contains strings), and then append "<br>"

answered Jul 12 '15 at 14:38

mniip

796
7
16

thank you so much! I added a follow up question as an edit, but not sure this is visible to users that replied to my question, hence I'm following up with a comment to you, who answered first :) is there an alternative to display the same type of information without having to use the var text = ""; , text+=cars[i] and insertHTML = text ? Thanks, – Pere Jul 12 '15 at 15:07

score 0 · Answer 2 · answered Jul 12 '15 at 14:39

The value of text at the end of the loop is going to be

Saab<br>Volvo<br>BMW<br>

where br stands for line break. So that each of them gets printed on new line. And the last line of code

document.getElementById("demo").innerHTML = text;

changes the value of html element which has id of demo to that of text.

score 0 · Answer 3 · answered Jul 12 '15 at 14:39

0

text += cars[i] + '<br>';

Concatenates element i of the cars array to the text, separated by a <br> tag.

answered Jul 12 '15 at 14:39

user2182349

9,569
3
29
41

score 0 · Answer 4 · answered Jul 12 '15 at 14:40

Consider it like this,

text+=cars[i] + "<br>";

is actually

text=text+cars[i]+"<br>";

so that rather than deleting the old value it will concatenate the new word with existing string.(String Concatenation).

PS:As a fellow beginner a small piece of advice rather than following W3 Schools please go to site like codecademy which helps you to learn along with practice and proper explanation.

score 0 · Answer 5 · answered Jul 12 '15 at 14:40

Don't think of += as incrementing, that's ++.

a = a + b
a += b;

Those two statements are the same. The bottom one takes the variable on the left side (a) and appends the right side to it (b), and then assigns it all back to he left side (a). So it's just a shorthand.

So what you're doing in your code is appending the string from cars[i] to your variable text.

This would do the same thing:

text = text + cars[i] + "<br>";

Once the loop runs, you will have the following in text:

Saab<br>Volvo<br>BMW

score 0 · Answer 6 · answered Jul 12 '15 at 14:40

In javascript + is used for string concatenation

The code

for(var i = 0; i < cars.length; i++) {
   text+=cars[i] + "<br>";
}

is picking each element from the array and concatenating "
" to it.

If you console log the text before setting the innerHTML, it looks something like this -

"Saab<br>Volvo<br>BMW<br>"

score 0 · Answer 7 · answered Jul 12 '15 at 14:40

here they do it actually just to show theres no point of doing it this way they just wanna show to reach each individual inside an array and concatanate it into a string the very same thing you can do with Array.prototype.join() method dont think here that u must use as they show always concatanate into a string if you want you can simply use every single individual inside as u wish as well

score 0 · Answer 8 · answered Jul 12 '15 at 14:41

0

+= is not increment. It's adding (in this case concatenation) and saving result in the same variable.

var a +=b;

Is the same to:

var = a + b;

In your case script concatenates all array elements into one string and adding <br> tags between them.

answered Jul 12 '15 at 14:41

Olexander Yermakov

387
3
10

Getting started with javascript, got a questions

8 Answers8