Assignment Operator in JavaScript | Example Program

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


An assignment operator in JavaScript can be classified into three main 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.

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.

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.

Program code 8:

<html>
<body>
  <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>
</body>
</html>
Output:
     x = 50
     y = -70
     z = -175000

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, an assignment operation can also be considered 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.

Program code 9:

<html>
<body>
  <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>
</body>
</html>
Output of code:
     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

Program code 10:

<html>
<body>
  <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>
</body>
</html>

Program code 11:

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

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!!!