JavaScript Assignment Operators

The JavaScript Assignment operators are used to assign values to the declared variables. In general, it takes two operands to operate and assigns the result to the left operand. The left operand always remains as a variable, and the right side operand may or may not be a variable.

The equals (=) operator is one of the most commonly used assignment operators in the JavaScript language. We can divide the assignment operators into three sections: arithmetic, bitwise, and logical. T

For example:

let a = 5;
console.log(a);

JavaScript Assignment Operators list

The table below displays all the assignment operators.

Assignment Operators	Example	Equivalent to
= (assignment)	x = 15	Value 15 is assigned to x
+= (addition assignment)	x += 15	x = x + 15
-= (subtraction assignment)	x -= 15	x = x – 15
*= (multiplication assignment)	x *= 15	x = x * 15
/= (division assignment)	x /= 15	x = x / 15
%= (remainder assignment)	x %= 15	x = x % 15
**= (exponentiation assignment)	x **= 15	x = x ** 15

Arithmetic Assignment Operators in JavaScript

The Arithmetic Assignment Operators perform arithmetic operations and assign the result to the left operand value or variable.

Simple Assignment operator (=)

The equal to operator (=) is a basic or simple assignment operator that is useful for assigning a value to a variable.

Syntax: a = 10

Example: In the following example, we assigned 5 to the variable a. In the next two lines, we used the equal to assignment operator to assign an expression (mathematical calculation) to a variable.

let a = 5;
let b = a + 10;
let c = 20 + 30 - 5;
console.log(a);
console.log(b);
console.log(c);

5
15
45

Addition Assignment Operator (+=)

The addition assignment operators in JavaScript, denoted by the += symbol, perform addition on two operands and assign the result to the left side variable.

Syntax: a += b

In the following example, we declared two variables and assigned positive integer numbers. Next, we applied the addition assignment operator to add a and b and assign the result to a.

let a = 10;
let b = 25;
a += b;
console.log(a);
console.log(b);

35
25

Similar to the above, we can use the addition assignment operator (+=) to perform the string concatenation.

let s1 = "Tutorial ";
let s2 = "Gateway";
s1 += s2;
console.log(s1);

Tutorial Gateway

Subtraction Assignment Operator (-=)

The subtraction assignment operators in JavaScript subtract the right operand value from the left operand and assign the result to the left side variable.

Syntax: a -= b

Example: In the example below, it subtracts b (25) from a (100) and assigns the result to variable a, so a becomes 75.

let a = 100;
let b = 25;
a -= b;
console.log(a);

Multiplication Assignment Operator (*=)

The multiplication assignment operators in JavaScript multiply the values of both operands and assign the result to the left variable.

Syntax: a *= b

Example: In the example below, the *= operator multiples a (5) by b (8) and assigns the result 40 to variable a.

let a = 5;
let b = 8;
a *= b;
console.log(a);

Division Assignment Operator (/=)

The division assignment operators in JavaScript divide the left operand value by the right operand value and assign the result to the left variable.

Syntax: a /= b

Example: In the code below, the /= operator divides a (10) by b (2) and assigns the result 5 to variable a.

let a = 10;
let b = 2;
a /= b;
console.log(a);

Remainder Assignment Operator (%=)

The remainder assignment operator divides the left value by the right operand value and assigns the remainder to the left variable.

Syntax: a %= b

Example: In the code below, the %= operator divides a (10) by b (3) and assigns the result 1 (remainder) to variable a.

let a = 10;
let b = 3;
a %= b;
console.log(a);

Exponentiation Assignment Operator (**=)

The exponentiation assignment operators in JavaScript raise the left operand value to the power of the right operand value and assign the result to the left variable.

Syntax: a **= b

Example: In the example below, the **= operator raises a (2) to the power of b (3) and assigns the result 16 (2 * 2 * 2) to variable a.

let a = 2;
let b = 4;
a **= b;
console.log(a);

JavaScript Assignment Operators example

For this example, we are using two integer variables, a and Total, and their values are 7 and 21. We use these two variables to show you the working functionality of all the Assignment Operators.

<!DOCTYPE html>
<html>
<head>
    <title> JavascriptAssignmentOperators</title>
</head>
<body>
    <h1> AssignmentOperations </h1>
<script>
   var a = 7, Total = 21;

   document.write("Value of the Total = " + (Total += a) + "<br />");
   document.write("Value of the Total = " + (Total -= a) + "<br />");
   document.write("Value of the Total = " + (Total *= a) + "<br />");   
   document.write("Value of the Total = " + (Total /= a) + "<br />");
   document.write("Value of the Total = " + (Total %= a) + "<br />");
</script>
</body>
</html>

In this Assignment Operators program, we declared 2 integer values a, a and Total, and we assigned values 7 and 21, respectively. The following statements will perform Assignment operations on a and Total, and then write the output to the respective browsers.

Let us see the functionality of the JS Assignment Operators

document.write("Value of the Total = " + (Total += a) + "<br />");

Total += a means

Total = Total + a = 21 + 7 = 28

document.write("Value of the Total = " + (Total -= a) + "<br />");

Total -= a means

Total = Total – a = 28 – 7 = 21

document.write("Value of the Total = " + (Total *= a) + "<br />");

Total *= a means

Total = Total * a = 21 * 7 = 147

document.write("Value of the Total = " + (Total /= a) + "<br />");

Total /= a means

Total = Total / a = 147 / 7 = 21

document.write("Value of the Total = " + (Total %= a) + "<br />")

Total %= a means

Total = Total + a = 21 % 7 = 0 (Remainder of 21/7 is = 0)

JavaScript Assignment Operators program

For this JavaScript example, we are using two integer variables, a and Total, whose values are 7 and 21. We will use these variables to show you how to display the Assignment Operators output in Paragraphs.

<!DOCTYPE html>
<html>
<head>
    <title> Example 2</title>
</head>
<body>
    <h1> Assignment Operations </h1>
    <p id = 'add'> Plus Equal to </p>
    <p id = 'sub'> Subtraction Equal to </p>
    <p id = 'mul'> Multiplication Equal to </p>
    <p id = 'div'> Division Equal to </p>
    <p id = 'mod'> Modulus Equal to </p>
<script>
   var a = 3, Total = 12;

   document.getElementById("add").innerHTML = "Value of the Total = " + (Total += a);
   document.getElementById("sub").innerHTML = "Value of the Total = " + (Total -= a);
   document.getElementById("mul").innerHTML = "Value of the Total = " + (Total *= a);
   document.getElementById("div").innerHTML = "Value of the Total = " + (Total /= a);
   document.getElementById("mod").innerHTML = "Value of the Total = " + (Total %= a);

</script>
</body>
</html>

Value of the Total = 15
Value of the Total = 12
Value of the Total = 36
Value of the Total = 12
Value of the Total = 0

Bitwise Assignment Operators in JavaScript

The bitwise assignment operators perform the bitwise or bit operations on the given two operands and assign the result to the left variable. It performs the AND, OR, and XOR operations on the binary representation of the given values and assigns the result to the left operand.

Bitwise AND Assignment Operator (&=)

The bitwise AND assignment operator performs a bitwise AND operation on two operands and assigns the result to the left operand variable (value).

Syntax

a &= b (equivalent to a = a & b)

Example: 0101 (5) & 0100 (4) = 0100 (4)

let a = 5;
let b = 4;
a &= b
console.log(a);

Bitwise OR Assignment Operator (|=)

The bitwise OR assignment operators in JavaScript perform a bit OR operation on two operands and assign the result to the left operand variable (value).

Syntax

a |= b (equivalent to a = a | b)

Example: 0101 (5) | 0100 (4) = 0101 (5)

let a = 5;
let b = 4;
a |= b
console.log(a);

Bitwise XOR Assignment Operator (^=)

The bitwise XOR assignment operator performs a bitwise XOR operation on two operands and assigns the result to the left operand variable (value).

Syntax

a ^= b (equivalent to a = a ^ b)

Example: 0101 (5) ^ 0100 (4) = 0001 (1)

let a = 5;
let b = 4;
a ^= b
console.log(a);

Shift Assignment Operators in JavaScript

The shift assignment operators perform bitwise left and right shift operations and assign the result to the left side operands (variable).

Left Shift Assignment Operator (<<=)

The left shift assignment operator performs the left shift operation and assigns the result to the left variable.

Syntax: a <<= b

Example: In the example below, the <<= operator moves a (5) to the two bits to the left side and assigns the result 20 (0101 << 2 = 0001 0100) to variable a.

let a = 5;
a <<= 2;
console.log(a);

Right Shift Assignment Operator (>>=)

The right shift assignment operators in JavaScript perform the right shift operation and assign the result to the left variable.

Syntax: a >>= b

Example: In the example below, the >>= operator moves a (15) to the two bits to the right side and assigns the result 3 (1111 << 2 = 0011) to variable a.

let a = 15;
a >>= 2;
console.log(a);

Unsigned Right Shift Assignment Operator (>>>=)

The unsigned right shift assignment operator performs the unsigned right shift operation (without ignoring the sign) and assigns the result to the left variable.

Syntax: a >>>= b

Example

let a = -10;
a >>>= 2;
console.log(a);

1073741821

Logical Assignment Operators in JavaScript

The logical assignment operators perform the logical operations on the given operands and assign the result to the left operand (variable) value.

Logical AND Assignment Operator (&&=)

The logical AND assignment operator performs the logical AND operation on the two operands and assigns the result to the left variable. If any of the operands is zero, it returns 0.

Syntax: a &&= b

Example: In the second console statement, the &&= operator assigns 10 (string data type) to the variable a.

let a = 10;
let b = 20;
a &&= b
console.log(a);
console.log(a &&= '10');

20
10

Logical OR Assignment Operator (||=)

The logical OR assignment operator performs the logical OR operation on the two operands and assigns the result to the left variable.

Syntax: a ||= b

Example: As the left operand value is 0 (false), the ||= operator assigns the right operand value to the left variable.

let a = 0;
let b = 20;
a ||= b
console.log(a);
let c = 0
console.log(c ||= '10');

20
10

Nullish Coalescing Assignment Operator (??=)

The nullish coalescing assignment operators in JavaScript assign the right operand value to the left operand if the left operand is null.

Syntax: a ??= b

Example: The value of the variable a is not null, so the first statement keeps a value of 5. However, in the second statement, the left operand is a null value, so it assigns the value b to c, so c becomes 10.

let a = 5;
let b = 10;
let c = null;
a ??= b
console.log(a);
console.log(c ?? b);

5
10