GullyBoy GullyBoy - 2 months ago 14
Javascript Question

Addition Assignment confusion, again JavaScript

OK...Still trying to figure this addition assignment thing out
its still frustrating me

According to Mozilla,

The Addition Assignment operator ....

ADDS the VALUE of the RIGHT OPERAND To a VARIABLE...

and ASSIGNS the RESULT to the VARIABLE. ...

The types of the two operands determine the behavior of the addition.
here's the behavior of the ADDITION.

"IF" Both expressions are NUMERIC - THEN ADD

"IF" Both expressions are STRINGS - THEN CONCATENATE

"IF" expression is NUMERIC and the other is STRING - THEN CONCATENATE

Basically,

text+=i
is the SAME as
text = text + i
that is a FACT.
OK, If the above is true, then why in Code Version 2 below when I variable-ize the string
"The number is "
to the variable
text
,
it doesn't work the same way as it does in the below code if the above explanation of the addition assignment operator is true?
When I say work the same, I mean code version 2 write the string each time with the new number as code version 1 does.

And for the answer I don't want another way to write it. I need to figure out WHY it doesn't work the same if
text+=i
is same as
text = text + i
is true.

I'm getting better at JavaScript everyday but believe it or not this simple
+=
is holding me back from further understanding it because too many examples are using
+=
.

Here is the Code Version 1



<h1>JavaScript Loops</h1>
<p id="demo"></p>

<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>





Here is the Code Version 2 with var
text
variable-ized with the
"The number is "
STRING



<h1>JavaScript Loops</h1>
<p id="demo"></p>

<script>
var text ="The number is ";
var i;
for (i = 0; i < 5; i++) {
text = text + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>




Answer

Your getting a different result because

a += b

is not the same as writing

a = a + b

Your using two different operators and expecting the same result. This is most likely due to the unpredictable nature of Javascript type coercion. In your case different operators are coercing your types in different ways. There are two reasons for this.

First Javascript does not have a different operator for concatenation as it does for addition. In the case of PHP we use . to concatenate and + to add. This is a design flaw within javascript.

Second javascript has kept a lot of this unpredictable behaviour to stay backwards compatible. There has been debate in ECMA circles to remove some of the type corrosion issues but ultimately much of it has been kept to ensure backwards compatibility.

An example of this is the == operator. In javascript == does comparison after coercing your types. You almost never want to do this. ECMA had a chance to fix this operator and stop it coercing types. In fact Brendon Eich fought to change this however ECMA decided that === operator would be introduced so that == kept it's current behaviour.