Compound assignment operators can be thought of as simple shortcuts to mathematical expressions. An assignment operator assigns a value to its left operand as the result of operating on its right operand.

The simplest possible operand is the = operator:

var x = y;

…which assigns the value of y to x. It’s also possible to chain = operators together. If we have several variables a, b and c:

var a = 5,
b = 10,
c = 15;

We can create the expression:

a = b = c;

…which will set the value of both a and b to 15. (You could read the expression as “a is equal to b which is equal to c”).

More complex combined assignment operators include:

Name	Shorthand Operator	Equivalent To
Addition	x += y	x = x + y
Subtraction	x -= y	x = x - y
Multiplication	x *= y	x = x * y
Division	x /= y	x = x / y
Remainder	x %= y	x = x % y

Because addition is also concatenation in JavaScript, the += assignment operator is often used to merge strings:

var welcome = "Good ";
var time = "morning";
welcome += time;
console.log(welcome);

> Good morning

Note that these operators always alter the value of the left operand (the x variable, in this case). If you wanted to preserve the original value of the variable for future reference, you’d have to assign the result to a new variable:

var z = x + y;

Additional Quirks

As with the ordinary addition operator, there are a few oddities, due to the fact that addition also works to concatenate:

If we have a variable named boo that has a Boolean true value:

var boo = true; 

Then adding a boolean or a number to it will result in numerical addition:

boo += true
> 2
boo += 2
> 4

boo now contains a numerical value; adding a string to it will result in concatenation:

boo += "scary"
> "4scary"

Adding a string to a boolean value also results in concatenation.

Do you have to use assignment operators?

Compound assignment operators can appear confusing at first. It’s important to remember that they’re just JavaScript shorthand: a more compact way of writing things. Feel free to use the more traditional “longhand” methods if you want to; just know that an alternative exists, and try them out once in a while to see if they fit your coding style.

There are also more complex assignment operators, some of them introduced in the most recent version of JavaScript, which I’ll cover in the next article.

Image by fdecomite, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.