JavaScript provides several assignment operators, each serving a specific purpose. Here are some common assignment operators:
- = (Assignment Operator): Assigns the value on the right-hand side to the variable on the left-hand side.
- += (Addition Assignment Operator): Adds the value on the right-hand side to the variable on the left-hand side and assigns the result to the variable.
- -= (Subtraction Assignment Operator): Subtracts the value on the right-hand side from the variable on the left-hand side and assigns the result to the variable.
- *= (Multiplication Assignment Operator): Multiplies the variable on the left-hand side by the value on the right-hand side and assigns the result to the variable.
- /= (Division Assignment Operator): Divides the variable on the left-hand side by the value on the right-hand side and assigns the result to the variable.
- %= (Modulus Assignment Operator): Calculates the modulus of the variable on the left-hand side with the value on the right-hand side and assigns the result to the variable.
Examples of JavaScript Assignment Operators in HTML
Let's illustrate each assignment operator with examples embedded in an HTML document.
1. Assignment Operator (=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment Operator Example</title>
</head>
<body>
<script>
// Assignment Operator Example
let x = 10; // Assigns the value 10 to the variable x
document.write("x = " + x); // Output: x = 10
</script>
</body>
</html>
2. Addition Assignment Operator (+=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Addition Assignment Operator Example</title>
</head>
<body>
<script>
// Addition Assignment Operator Example
let y = 5;
y += 3; // Equivalent to: y = y + 3
document.write("y = " + y); // Output: y = 8
</script>
</body>
</html>
3. Subtraction Assignment Operator (-=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subtraction Assignment Operator Example</title>
</head>
<body>
<script>
// Subtraction Assignment Operator Example
let z = 12;
z -= 4; // Equivalent to: z = z - 4
document.write("z = " + z); // Output: z = 8
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subtraction Assignment Operator Example</title>
</head>
<body>
<script>
// Subtraction Assignment Operator Example
let z = 12;
z -= 4; // Equivalent to: z = z - 4
document.write("z = " + z); // Output: z = 8
</script>
</body>
</html>
4. Multiplication Assignment Operator (*=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Assignment Operator Example</title>
</head>
<body>
<script>
// Multiplication Assignment Operator Example
let a = 6;
a *= 2; // Equivalent to: a = a * 2
document.write("a = " + a); // Output: a = 12
</script>
</body>
</html>
5. Division Assignment Operator (/=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Division Assignment Operator Example</title>
</head>
<body>
<script>
// Division Assignment Operator Example
let b = 20;
b /= 4; // Equivalent to: b = b / 4
document.write("b = " + b); // Output: b = 5
</script>
</body>
</html>
6. Modulus Assignment Operator (%=)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulus Assignment Operator Example</title>
</head>
<body>
<script>
// Modulus Assignment Operator Example
let c = 17;
c %= 5; // Equivalent to: c = c % 5
document.write("c = " + c); // Output: c = 2
</script>
</body>
</html>
Combining Assignment Operators
You can also combine assignment operators with other arithmetic operators for concise coding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Assignment Operators Example</title>
</head>
<body>
<script>
// Combined Assignment Operators Example
let d = 8;
// Combined addition and assignment
d += 4; // Equivalent to: d = d + 4
document.write("After addition: d = " + d + "<br>"); // Output: After addition: d = 12
// Combined subtraction and assignment
d -= 2; // Equivalent to: d = d - 2
document.write("After subtraction: d = " + d + "<br>"); // Output: After subtraction: d = 10
// Combined multiplication and assignment
d *= 3; // Equivalent to: d = d * 3
document.write("After multiplication: d = " + d + "<br>"); // Output: After multiplication: d = 30
// Combined division and assignment
d /= 5; // Equivalent to: d = d / 5
document.write("After division: d = " + d + "<br>"); // Output: After division: d = 6
// Combined modulus and assignment
d %= 4; // Equivalent to: d = d % 4
document.write("After modulus: d = " + d + "<br>"); // Output: After modulus: d = 2
</script>
</body>
</html>
Practice Excercise Practice now