Introduction to JavaScript Assignment Operators
In this article, we will be learning about Javascript Assignment Operators.
JavaScript is a front end based development Language used in websites. It possesses the capability to modify and alter HTML as well as CSS styling. In addition, JavaScript functions can evaluate, modify and validate variable data as well. Javascript provides a variety of data types and operators to work with in order to build a website or a web app. Assignment operators are provided by almost all programming languages like JavaScript, Python, Ruby, Php, and Python. Assignment operators have 2 components, the left operand, and the right operand. They are used to assign values to their left operand depending on the value of their right operand. The left operand is usually a variable and the basic assignment operator is equal (=), which is used to assign the value of the operand on the right side to the operand on the left side. For example, if we look at the assignment a = b, it assigns variable “ a “ the value of variable b.
Commonly Used Assignment Operator
Other than the most commonly used assignment operator “=”, Javascript several other assignment operators suited for different needs and listed below:
| Shorthand Operator | Actual Expression |
| a +=b | a = a + b |
| a -= b | a = a – b |
| a *= b | a = a*b |
| a /=b | a = a/b |
| a %= b | a = a%b |
| a<<=b | a = a<<b |
| a>>=b | a = a>>b |
| a>>>=b | a = a>>>b |
| a&= b | a = a&b |
| a^= b | a = a^b |
| a |=b | a = a|b |
Understanding JavaScript Assignment Operators
Now let’s understand each of these assignment operators in details :
1. a +=b
This shorthand operator is same as a = a + b. What it does is it adds the values of the right-side variables and assigns them to the left side variable.
Code:
<!DOCTYPE html>
<html>
<body>
<h2> The + = Javascript Assignment Operator</h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a += b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
2. a – = b
This shorthand operator is the same as a = a – b. What it does is subtracts the values of the right-side variables and assigns them to the left side variable.
4.5 (4,793 ratings)
View Course
Code:
<!DOCTYPE html>
<html>
<body>
<h2>The -= Javascript Assignment Operator</h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a -= b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
3. a * = b
This shorthand operator is the same as a = a * b. What it does is it multiplies the values of the right-side variables and assigns them to the left side variable.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>The *= Javascript Assignment Operator</h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a *= b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
4. a / = b
This shorthand operator is the same as a = a / b. What it does is it divides the values of the right-side variables and assigns them to the left side variable.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>The /= Javascript Assignment Operator</h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a /= b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
5. a % = b
This shorthand operator is the same as a = a % b. What it does is it evaluates the modulus of the values of the right-side variables and assigns them to the left side variable.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>The %= Javascript Assignment Operator</h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a %= b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
6. a <<= b
This shorthand operator is the same as a = a << b. It does a left shift and assigns the values of the right-side variables and to the left side variable.
Code:
<!DOCTYPE html>
<html>
<body>
<h2> The <<= Javascript Assignment Operator </h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a <<= b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
7. a >>= b
This shorthand operator is the same as a = a >> b. It does a right shift and assigns the values of the right-side variables and to the right side variable.
Code:
<!DOCTYPE html>
<html>
<body>
<h2> The >> = Javascript Assignment Operator </h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a >>= b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
8. a >>>= b
This shorthand operator is the same as a = a >>> b. It does a zero-filled right shift and assigns the values of the right-side variables and to the right side variable.
Code:
<!DOCTYPE html>
<html>
<body>
<h2> The >>> = Javascript Assignment Operator </h2>
<p id="example"></p>
<script>
var b = 10;
var a = 10;
a >>>= b;
document.getElementById("example").innerHTML = a;
</script>
</body>
</html>
Output:
9. a &= b, a ^= b, a |= b
These 3 operators are bitwise operators and are shorthand expressions of bitwise AND operation, bitwise XOR and bitwise OR operations respectively.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>The Bitwise assignment Operator</h2>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var x = true;
var y = false;
x &= y
document.getElementById("demo").innerHTML = x;
var x1 = true;
var y1 = false;
x1 ^= y1
document.getElementById("demo1").innerHTML = x1;
var x2 = true;
var y2 = false;
x2 |= y2
document.getElementById("demo2").innerHTML = x2;
</script>
</body>
</html>
Output:
Conclusion
From the above example, we can conclude that Java script provides various assignment operators like other programming languages including Python, Ruby, Php and Python which can be either evaluated as shorthand expressions or normal expressions. The advantage of using short has expression would be that it allows us to perform complicated operations with just a few lines of code.
Recommended Articles
This is a guide to JavaScript Assignment Operators. Here we discuss the most commonly used assignment operator and understand each of these operators in detail with proper codes and outputs. You can also go through our other related articles to learn more –
