Sometimes, when you stumble upon the += sign in JavaScript, you immediately think about positive and negative numbers. However, this sign is probably not what you think. In reality, the += sign is the addition assignment operator responsible for adding the value of the right operand to a variable.

Also, this operator assigns the final result of this process to a variable. The critical point here is that the type of operand you call is solely responsible for the outcome you'd get. So, get acquainted with this tutorial to learn more about the addition assignment operator in JavaScript and its functionality, as follows.

Overview of addition assignment

In the first place, one must know more about the essentials of the addition assignment operator in JavaScript. But first, take a closer look at how this operator is written syntax-wise:

result += expression

There is nothing complicated here as the addition assignment operator is solely responsible for adding the expression value of a variable then assigning the result to the same variable. For a better understanding of how the operator works, kindly review the most basic use case:

let x = 8;
x += 10;
console.log(x) // Output: 18

In this case, we assign the x variable, which equals 8. As for the second statement we make, the addition assignment operator is included with a number of 10. Subsequently, the expression value (10) is added to the variable value (8), resulting in the output of 18.

One more example of adding this operator to the text can be seen when working with characters. Let's take the good-old JavaScript word and see how the += sign can modify the input we consider using:

let a = 'Java'
console.log(a += 'Script'); // Output: JavaScript

In this case, we assign the word Java to the variable. When we use the console log this time, we add the addition assignment operator, including the word Script. When you run this code in your compiler, your output for this case would be JavaScript.

Adding Boolean to numbers

In JavaScript, adding a Boolean value depends on which of the two (true or false) you indicate. While the former adds one in the variable's existing value, the latter makes the number remain the same. When working with the += operator, the addition of a Boolean to numbers looks like this:

var bool = true;
bool += 10;
console.log("Example " + bool); // Output: Example 11 for the true value
 
bool = false;
bool += 10;
console.log("Example " + bool); // Output: Example 10 for the false value

We assign a Boolean variable to be true in the first instance, while the second emphasizes its false value. We also introduce the addition assignment operator for this particular case, which is += 10. Because of the uniqueness of the Boolean behavior, the output you get will look like this:

Example 11 for the true value
Example 10 for the false value

As you can see, changing the Boolean value impacts how you use the += operator for combining numbers.

Addition assignment operator, Boolean, and a String

But what if we go even further and combine the += operator, a true Boolean value, and a string? For this purpose, let's try adding a number data type with a String, which will result in a concatenated String:

var str = ' JavaScript';
var i =25;
var bool = true;
i += str;
console.log("JavaScript " + i);

In this case, we place a variable that a String is JavaScript, whereas the number data type = 25. Alongside these rules, we also indicate that the Boolean has a true value, and only after that specify that a number data type has to be added to a String. In the code example above, we get the following output:

JavaScript 25 JavaScript

As you can see, mixing a data number type with a String, including a Boolean, is also possible when operating with the addition assignment operator.

Adding string to a string

Another great benefit of the addition assignment operator is that it works perfectly well with adding a string to a string, eventually performing the concatenation. For that purpose, please review the code example we've prepared for you:

var str = 'Java';
var bool = true;
 
str += ' Script';
console.log("Example " + str); // Output: Example JavaScript

In this instance, we use similar statements as in the previous example. Yet, the last step we perform is adding a string text Example to a string itself, which is Java. However, we get a different result because of the addition assignment operator. Once you run this code through your compiler, you'll see that the return equals:

Example JavaScript
This case is quite representative since you can mix up values within a string, alongside adding the string itself to its counterpart. Because of how flexible this approach is, working with strings can be significantly more manageable with the += operator. And before jumping to conclusions, let us show you a few pieces of exercise we've prepared for you.

Test yourself

Because the addition assignment operator has varied functionality, it also possesses dozens of use cases. To apprehend this topic in detail, we've designed a few exercises you should complete to make the most of the += operator, such as:

  • Task 1. Use the += operator to add false to a string with the value "JavaScript".

var str = 'JavaScript ';
var bool = false;
str += bool;
console.log(str);

Solution:

JavaScript false

  • Task 2. Use the += operator to add 8 to a string with the value "JavaScript ".

var str = 'JavaScript ';
var i = 8;
str += i;
console.log(str);

Solution:

JavaScript 8

Summary

As a whole, the addition assignment operator (+=) is a shorthand approach to add or concatenate two variables and assign the result to another variable. The great news is that this method successfully operates for strings, Boolean, and regular numbers. We've intentionally left more exercise tasks for you to complete. Best of luck practicing!