Teach with us

What is Multiplication Assignment Operator (*=) in JavaScript?

JavascriptWeb DevelopmentFront End Technology

In this article, we will learn about the Multiplication assignment operator (*=) in JavaScript. In general, we use a = a * b this expression to update the value of a variable with the value returned after multiplying its original value with some other value, which is easy to understand, but it time taking to write again and again if we are using updating values of more variables like this. So, to overcome this problem, JavaScript introduces us to the multiplication assignment operator (*=) as it is the short form for using the above expression.

The multiplication Assignment operator (*=)

The multiplication assignment operator is a binary assignment operator which means it requires at least one pair of operands to perform the task or to assign the value to the operand. The multiplication assignment operator will multiply the value of the left operand with the value of the right operand and assigns it to the left operand to update its value.

Syntax

The following syntax will show you how you can use the multiplication assignment (*=) operator to update the value of the left operand −

operand1 *= operand2
//equivalent to operand1 = operand1 * operand2

Let us understand the use or the implementation of the Multiplication Assignment operator (*=) in detail with help of code examples.

Algorithm

Step 1 − In the first step, we will add two input elements with number type in the HTML documents to get numbers input from the user.

Step 2 − In this step, we will add a button with the onclick event which will later call a function when the event is triggered.

Step 3 − In the next step, we will define a JavaScript function and assign it to the onclick event of the button to call it later and display the results to the user.

Example 1

The below example will explain the use of the multiplication assignment operator (*=) to update the value of the left operand −

<!DOCTYPE html>
<html>
<body>
   <h2> Multiplication Assignment operator (*=) in JavaScript </h2>
   <p> Enter two numbers: </p>
   <input type="number" id="inp1"> <br> <br>
   <input type="number" id="inp2"> <br> <br>
   <p> Click to see the result of Multiplication Assignment operator (*=) of above inputs. </p>
   <p id="result"></p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var val1 = Number(inp1.value);
         var val2 = Number(inp2.value);
         val1 *= val2; // val1 = val1 * val2;
         result.innerHTML = "<b>Result: " + val1 + " </b> ";
      }
   </script>
</body>
</html>

In the above example, First, we grabbed both the input elements using their ids and then get their values using the value property and convert them to the number type using the Number() method after performing all these tasks we used the multiplication assignment operator on the val1 variable to update its value with the multiplication result of the two input values as val1 * val2, then display the result to the user.

Let us see one more example, where one input is of type number while another is of type string.

Algorithm

The algorithm of this example and the above example is the same, you just need to make some changes. You have to replace the input type of one of the input elements to the text, and the rest of the code will remain the same, as done in the below example.

Example 2

The example below will illustrate the behavior of the multiplication assignment operator when both the operands are of different data types −

<!DOCTYPE html>
<html>
<body>
   <h2> Multiplication Assignment operator (*=) in JavaScript</h2>
   <p> Enter two numbers: </p>
   <input type="number" id="inp1"> <br> <br>
   <input type="text" id="inp2"> <br>
   <p> Click to see the result of Multiplication Assignment operator (*=) of above inputs. </p>
   <p id="result"> </p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var val1 = Number(inp1.value);
         var num = val1; // val1 = val1 * val2;
         var val2 = Number(inp2.value);
         val1 *= val2;
         result.innerHTML += " Result: <b> " + val1 + " </b> <br> ";
      }
   </script>
</body>
</html>

In this example, we have used the multiplication assignment operator (*=) with the variables of different data types. In this case, if the value of the string variable is numerical, then the multiplication assignment operator will work similarly as it works in cases when both the variables are of type number. But if the value of the string variable is a word or any string, then it will return NaN as the multiplication result of a number and a string is NaN.

In this tutorial, we have seen what is the multiplication assignment operator in JavaScript and the working of this with help of two different code examples to understand the behavior of the multiplication assignment operator in different conditions. The first example we have taken is showing the behavior of the operator in the case of the number type variables while in the later one we used the multiplication assignment operator with different variables of different data types, where we come to know, that the multiplication assignment operator will not work as expected when a word is multiplied with a number.

raja
Abhishek
Updated on 08-Nov-2022 06:26:51

Previous Page Print Page Next Page  
Advertisements