What does += mean?

I’m reading on W3 Schools and I can’ figure out what that text+= stands for?

I see that txt is a variable that is used for .html but the plus sign is throwing me off. What is it there for?

$(“button”).click(function(){
var txt=“”;
txt+=“Outer width: " + $(”#div1").outerWidth() + “
”;
txt+=“Outer height: " + $(”#div1").outerHeight();
$(“#div1”).html(txt);
});

It depends on its usability, we can use it

  1. As short form of + (addition) operation.
    e.g. http://www.w3schools.com/js/tryit.asp?filename=tryjs_oper_plusequal

  2. As string concatenation
    e.g. http://www.w3schools.com/js/tryit.asp?filename=tryjs_operators6

Ah yes. It has been awhile. I knew that looked familiar.

So, the examples you referenced make sense, but I still don’t get the original example that I posted. In the 2 examples that you showed the variables had already been declared with the part of the value.

In the example I posted the value is declared after txt+=

Why couldn’t they just do this and leave the plus out?

$(“button”).click(function(){
var txt=“”;
txt=“Outer width: " + $(”#div1").outerWidth() + “”;
txt=“Outer height: " + $(”#div1").outerHeight();
$(“#div1”).html(txt);
});

In your “why couldn’t” example the second assignment would overwrite the first - not wat you want.

I usually assign empty strings outside of a loop like.

var text_output = "":
if (condition === "met") {
    text_output += "something";
}
if (text_output !== "") {
   // do something with it
}
txt+="Outer width: " + $("#div1").outerWidth() + "";
txt+="Outer height: " + $("#div1").outerHeight();

according to above code the ‘txt’ value will be something like

Outer width: 50
Outer height: 50

but, according to this code

txt="Outer width: " + $("#div1").outerWidth() + "";
txt="Outer height: " + $("#div1").outerHeight();

the ‘txt’ value will be just

Outer height: 50

it will not concat “Outer width”

It does make sense that the last txt = would override the previous ones.

It doesn’t make sense that txt+= wouldn’t though.

txt += "Outer height: " + $("#div1").outerHeight(); is just a shorter version of txt = txt + "Outer height: " + $("#div1").outerHeight();

Yea. I get what it means at this point, but it is funny to me that the last one doesn’t override the previous ones since it still means txt = a + b. I’d be interested to know the rule that makes it so that it doesn’t override like this one does

$(“button”).click(function(){
var txt=“”;
txt=“Outer width: " + $(”#div1").outerWidth() + “”;
txt=“Outer height: " + $(”#div1").outerHeight();
$(“#div1”).html(txt);
});

No it doesn’t. The += essentially means (in your parlance) txt = txt + a + b. When dealing with a string, it takes the value currently in the string and APPENDS the value after the += symbol. It’s the javascript equivalent of .= in php

I get it, but the fact that it doesn’t overwrite when using += doesn’t make sense to me.

It is not a big deal because I know what to do when I don’t want to overwrite another one, but it would be nice to understand it.

Look at +=. + traditionallly means ADD in the mathematical sense.

If you wanted it to be overwriting, you’d just not put the + on there, so it only has =. Since the + is there (making it +=) you add it.

What part of :

txt = txt + 'something';

not losing the prior value of txt is it that doesn’t make sense?

txt += 'something';

is just a short way of stating the same thing whereas without the + is is just

txt = 'something';

Since it is setting txt equal to something each time.

It is setting txt equal to txt PLUS something each time.

for example:

txt = 'a';
txt += 'b';

so after the first statement txt contains ‘a’.

Since the second statement is equivalent to txt = txt + 'b' and txt contains ‘a’ the second statement is equivalent to txt = 'a' + 'b' and so now txt contains ‘ab’ and not just ‘b’.

If the second statement were txt = 'b' instead of txt += ‘b’` then txt would contain ‘b’ instead of ‘ab’.

Yes it is setting txt to something each time but the += retains the value already there and concatenates the new value to it (for strings - with numbers it would add the new value to the existing one).

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.