Updated March 23, 2023
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 various data types and operators to work with 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. The basic assignment operator is equal (=), which is used to assign the operand’s value on the right side to the operand on the left side. For example, if we look at 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 the same as a = a + b. 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.
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. 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. 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. 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 right-side variables’ values 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 right-side variables’ values 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 right-side variables’ values 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 shorthand expressions of bitwise AND operation, bitwise XOR, and bitwise OR operations.
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 –
