Additional menu

Code Leaks

Your go-to place for programming guides

How to use JavaScript Addition Assignment [+=] Operator
You are here: Home / JavaScript / How to Use JavaScript += Operator?

How to Use JavaScript += Operator?

Last Updated On By

The Addition Assignment Operator ( += ) is the shorthand way of adding or concatenating two variables and assigning the result to another variable in JavaScript.

It adds the operand’s value on the right side to the value of the variable on the left, and the result will be assigned to the variable on the left.

Generally, if the operands are not of the Number data type but String, then concatenation will be performed between the operands instead of addition.

There are many different scenarios on addition assignment operator plays around different data types, and we will be discussing all those scenarios in this article, so keep following.
Following is the syntax for the addition assignment operator:

Syntax

Operator Usage: a += b;
Operator Interpretation: a = a + b
Let’s now understand the working behavior of the addition assignment operator with different data types.

Scenario#01: When You Use += to Add Number with Number

Code

var str = 'hello';
var i =5;
var bool = true;

//Case#01: Number + Number
i += 5;
console.log("Result of Addition Assignment in Number + Number Case: " + i);

Output

When You Add Number with Number

Scenario#02: When You Use += to Add Boolean with Number

Before jumping to the coding, let us first understand how addition works with the Boolean type of data in JavaScript. There are two cases:

Case#01: When you add a number with a true Boolean value, it will add one in the variable’s existing value.
Case#02: When you add a number with a false Boolean value, it will remain the same.
To understand this behavior, see the coding example below.

Code

var bool = true;

//Case#02: Boolean + Number
bool += 5;
console.log("Result of Addition Assignment in Boolean + Number Case: " + bool);

bool = false;
bool += 5;
console.log("Result of Addition Assignment in Boolean + Number Case: " + bool);

Output

When You Add Boolean with Number
You can see in the output above that in the first output statement, the result is 6 because the Boolean value was true, so it added one to number 5.
In the next statement, the Boolean value adding up is false, so the variable’s actual value remained the same in the output as well (i.e., 5).

Scenario#03: When You Use += to Add Boolean with Boolean

Here again, the same mechanism will be followed, i.e.,
  • If we are adding two true values, they will add up together.
  • If we are adding a true value with a false one, the output will be only 1 because false does not change the value.

Code

var bool = true;

//Case#03: Boolean + Boolean
bool += true;
console.log("Result of Addition Assignment in Boolean + Boolean Case: " + bool);

bool = true;
bool += false;
console.log("Result of Addition Assignment in Boolean + Boolean Case: " + bool);

Output

When You Add Boolean with Boolean

Scenario#04: When You Use += to Add Number with String

When we try to add a Number type of data with a String in JavaScript, the result comes as a concatenated String.
Let us practice this with the example of a mini code snippet.

Code

var str = 'hello';
var i =5;
var bool = true;

//Case#04: Number + String
i += str;
console.log("Result of Addition Assignment in Number + String Case: " + i);

Output

When You Add Number with String

Scenario#05: When You Use += to Add String with Boolean

When we try to add a String value with a Boolean value, JavaScript performs concatenation in the resulting output. See the coding example below to understand the phenomena.

Code

var str = 'hello';
var i =5;
var bool = true;

//Case#05: String + Boolean
str += bool;
console.log("Result of Addition Assignment in String + Boolean Case: " + str);

Output

When You Add String with Boolean

Scenario#06: When You Use += to Add String with String

In this case, the shorthand assignment operator += will perform concatenation.

Code

var str = 'hello';
var i =5;
var bool = true;

//Case#06: String + String 
str += ' world';
console.log("Result of Addition Assignment in String + String Case: " + str);

Output

When You Add String with String

Conclusion

This article is a comprehensive guide on how to use the JavaScript Addition Assignment operator (+=) in different scenarios. We saw how it behaves when used with different types of data with the help of coding examples. If you are struggling with the JavaScript Addition Assignment operator, then this article is just right for you.

Suggested Read: How to Check Datatypes in JavaScript using typeOf?