Assignment Operator in JavaScript

An operator that is used to assign/update the value of a variable is called assignment operator in JavaScript. The most common assignment operator is equal operator “=”, which assigns the right-hand value to the left-hand variable.

The general syntax is as follows:

variable = value; // Here, a value can be a constant, a variable, or an expression.

We can assign a primitive type variable using an integer literal value or the result of an expression.

let x = 10; // Literal assignment. Here, x is assigned a value 10 by = operator.
let y = x + 2; // Assignment with an expression.
let z = x * y; // Assignment with an expression with literal.

Types of Assignment Operator in JavaScript

We can classify an assignment operator in JavaScript into three major categories. They are ​as follows:

• Simple assignment
• Compound assignment
• Assignment as expression

Simple Assignment

A simple assignment operator can be used to store or assign a value into a variable or to store a value of a variable into another variable. The general form to represent a simple assignment is given below:

variable = expression;

In the above syntax,

• variable: It is the name of a variable that represents a memory location where a value may be stored.
• expression: It may be a constant, variable, or a combination of constants, variables, and operators.
• = is an assignment operator.

Let’s understand it with the help of some examples.

1. var x = 20;
2. var y = x; // Here, the value of variable x is stored into y.

[blocksy-content-block id=”12371″]

Compound Assignment Operators

The compound assignment operators consist of a simple assignment operator with another binary operator. The compound assignment operator is also known as shorthand operator in JavaScript. The general syntax is as:

variable op = expression;

In this syntax, op denotes JavaScript binary operator. It may be + – * / % << >> etc. variable and expression are the same as explained in the simple assignment.
[blocksy-content-block id=”12121″]
Let’s understand all types of compound assignment operators with the help of some examples.

1. Addition assignment (+=):

x += 10; // It is equivalent to int x = x + 10;

2. Subtraction assignment (-=):

x -= 10; // It is equivalent to int x = x – 10;

3. Multiplication assignment (*=):

x *= 100; // It is equivalent to a = a * 100;

4. Division assignment (/=):

x /= 10; // It is equivalent to x = x/10;

5. Remainder assignment (%=):

a %= 10; // It is equivalent to a = a%10;

Let’s create a JavaScript program based on the compound assignment operators.

Example 1:

<script>
  let x = 20, y = 30, z = 50;
   x += y;
   y -= x + z;
   z *= x * y;
  document.write("x = " +x, "<br>" );
  document.write("y = " +y, "<br>" );
  document.write("z = " +z );
</script>

Output:
     x = 50
     y = -70
     z = -175000

[blocksy-content-block id=”12153″]
Explanation:

1. The expression x += y; will be evaluated in the following steps:

x += y; is equivalent to x = x + y;
x = 20 + 30;
x = 50;

2. The expression y -= x + z; is equivalent to y = y – (x + z);

y = y – ( 50 + 50);
y = 30 – 100;
y = -70;

3. The expression z *= x * y; is equivalent to z = z * (x * y);

z = z * (50 * (-70));
z = 50 * (-3500);
z = -175000;

Assignment as Expression

In JavaScript, we can also consider an assignment operation an expression because the operation has a result. The outcome (or result) of an expression is a value that is stored in a variable. For example:

int a = b – c + 4;

Here, the expression b – c + 4 is evaluated first, and then its result is stored into the variable a.

Example 2:

<script>
  let a = 19, b = 31, c = 50;
   a += 1;
   b -= 1;
   c *= 2;
  let x = (10 + a);
  let y = x + 100;
  let z = x + y + c;
    
  document.write("Value of a: " +a, "<br>");
  document.write("Value of b: " +b, "<br>");
  document.write("Value of c: " +c, "<br>");
  
  document.write("Value of x: " +x, "<br>");
  document.write("Value of y: " +y, "<br>");
  document.write("Value of z: " +z);
</script>

Output:
     Value of a: 20
     Value of b: 30
     Value of c: 100
     Value of x: 30
     Value of y: 130
     Value of z: 260

Explanation:

The following steps involved to evaluate the above expressions of the JavaScript program.

1. Evaluation of expression: a += 1;

a = a + 1;
a = 19 + 1;
a = 20;

2. Evaluation of expression: b -= 1;

b = b – 1;
b = 31 – 1;
b = 30;

3. Evaluation of expression: c *= 2;

c = c * 2;
c = 50 * 2;
c = 100;

4. Evaluation of x = (10 + a);

x = 10 + 20; // Here, the value of x will be 20, not 19.
x = 30;

5. Evaluation of y = x + 100;

y = 30 + 100; // Here, value of x will be 30.
y = 130;

6. Evaluation of z = x + y + c;

z = 30 + 130 +100; // Here, value of c will be 100.
z = 260;

Try It Yourself

Example 3:

<script>
  var a = 9, b = 21, c = 10;
   a += 1;
   b -= 1;
   c *= 2;
  var x = (10 + a)* 2 / 10;
  var y = (x + (11 * x))/12;
  var z = x + y + c;

  document.write("Value of x: " +x, "<br>");
  document.write("Value of y: " +y, "<br>");
  document.write("Value of z: " +z);
</script>

Example 4:

<script>
  var a = 20, b = 10, c = 5;
  var exp = (b += a) * c / 10;
  document.write("Value of exp: " +exp);
</script>

In this tutorial, you learned assignment operators in JavaScript and its types with example programs. Hope that you will have understood the basic points of assignment operators. In the next tutorial, we will learn comparison operators in JavaScript with different example programs.
Thanks for reading!!!