JavaScript Assignment Operators: Complete Guide and Examples
JavaScript Assignment Operators
Learn about JavaScript assignment operators, including their usage, syntax, and examples. Explore addition, subtraction, multiplication, division, remainder, exponentiation, left shift, right shift, unsigned right shift, bitwise AND, bitwise OR, and bitwise XOR assignment operators. Complete with code examples in HTML.
JavaScript Assignment Operators
JavaScript assignment operators are used to assign values to variables.
They combine the assignment operation with other mathematical or logical operations.
Here are some commonly used JavaScript assignment operators:
These are all the assignment operators available in JavaScript.
You can use them to perform various operations and update the value of a variable.
Let me know if you need further assistance or if you would like to see a complete code example using these assignment operators in an HTML file.
Addition Assignment Operator (+=):
Assignment Operator (=): Assigns a value to a variable.
Adds a value to the variable and assigns the result back to the variable.
The assignment operator (=) is used to assign a value to a variable.
For example:
Javascript code
let x = 5; // assigns the value 5 to the variable x
Assignment Operator (=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the assignment operator (=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Assignment Operator (=) Example</title>
</head>
<body>
<h1>Assignment Operator (=) Example</h1>
<script>
// Assigning a value to a variable using the assignment operator (=)
let x = 5;
// Displaying the value of the variable on the web page
document.write("The value of x is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we define a JavaScript variable x and assign the value 5 to it using the assignment operator (=).
2-Then, we use document.write() to display the value of x on the web page.
3-When you run this HTML code in a browser, it will display the following output:
Addition Assignment Operator (+=):
The addition assignment operator (+=) adds a value to the variable and assigns the result back to the variable.
For example:
let x = 10; x += 5; // equivalent to x = x + 5, assigns the value 15 to x
Addition Assignment Operator (+=): complete code in html
Here’s a complete HTML code example that demonstrates the usage of the addition assignment operator (+=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Addition Assignment Operator (+=) Example</title>
</head>
<body>
<h1>Addition Assignment Operator (+=) Example</h1>
<script>
// Initializing a variable
let x = 10;
// Using the addition assignment operator (+=) to add a value to the variable
x += 5; // Equivalent to: x = x + 5;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 10.
2-Then, we use the addition assignment operator (+=) to add 5 to the value of x and assign the updated value back to x.
3-This is equivalent to the statement x = x + 5;. Finally, we display the updated value of x on the web page using document.write().
4-When you run this HTML code in a browser, it will display the following output:
Subtraction Assignment Operator (-=):
Subtracts a value from the variable and assigns the result back to the variable.
The subtraction assignment operator (-=) subtracts a value from the variable and assigns the result back to the variable.
For example:
javascript
let x = 10; x -= 3; // equivalent to x = x - 3, assigns the value 7 to x
Subtraction Assignment Operator (-=): complete code html
Here’s a complete HTML code example that demonstrates the usage of the subtraction assignment operator (-=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Subtraction Assignment Operator (-=) Example</title>
</head>
<body>
<h1>Subtraction Assignment Operator (-=) Example</h1>
<script>
// Initializing a variable
let x = 20;
// Using the subtraction assignment operator (-=) to subtract a value from the variable
x -= 7; // Equivalent to: x = x - 7;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 20.
2-Then, we use the subtraction assignment operator (-=) to subtract 7 from the value of x and assign the updated value back to x.
3-This is equivalent to the statement x = x – 7;.
4-Finally, we display the updated value of x on the web page using document.write().
5-When you run this HTML code in a browser, it will display the following output:
Multiplication Assignment Operator (*=):
The multiplication assignment operator (*=) multiplies the variable by a value and assigns the result back to the variable.
For example:
let x = 5; x *= 2; // equivalent to x = x * 2, assigns the value 10 to x
Multiplication Assignment Operator (*=): complete code in html
Here’s a complete HTML code example that demonstrates the usage of the multiplication assignment operator (*=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Assignment Operator (*=) Example</title>
</head>
<body>
<h1>Multiplication Assignment Operator (*=) Example</h1>
<script>
// Initializing a variable
let x = 5;
// Using the multiplication assignment operator (*=) to multiply the variable by a value
x *= 3; // Equivalent to: x = x * 3;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 5.
2-Then, we use the multiplication assignment operator (*=) to multiply the value of x by 3 and assign the updated value back to x.
3-This is equivalent to the statement x = x * 3;.
4-Finally, we display the updated value of x on the web page using document.write().
5-When you run this HTML code in a browser, it will display the following output:
Division Assignment Operator (/=):
Divides the variable by a value and assigns the result back to the variable.
The division assignment operator (/=) divides the variable by a value and assigns the result back to the variable.
For example:
javascript
let x = 10; x /= 2; // equivalent to x = x / 2, assigns the value 5 to x
Division Assignment Operator (/=): complete code in html
Here’s a complete HTML code example that demonstrates the usage of the division assignment operator (/=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Division Assignment Operator (/=) Example</title>
</head>
<body>
<h1>Division Assignment Operator (/=) Example</h1>
<script>
// Initializing a variable
let x = 20;
// Using the division assignment operator (/=) to divide the variable by a value
x /= 4; // Equivalent to: x = x / 4;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 20.
2-Then, we use the division assignment operator (/=) to divide the value of x by 4 and assign the updated value back to x.
3-This is equivalent to the statement x = x / 4;.
4-Finally, we display the updated value of x on the web page using document.write().
5-When you run this HTML code in a browser, it will display the following output:
Remainder Assignment Operator (%=):
The remainder assignment operator (%=) divides the variable by a value and assigns the remainder back to the variable.
For example:
javascript
let x = 10; x %= 3; // equivalent to x = x % 3, assigns the value 1 to x
Remainder Assignment Operator (%=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the remainder assignment operator (%=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Remainder Assignment Operator (%=) Example</title>
</head>
<body>
<h1>Remainder Assignment Operator (%=) Example</h1>
<script>
// Initializing a variable
let x = 17;
// Using the remainder assignment operator (%=) to calculate the remainder of division
x %= 5; // Equivalent to: x = x % 5;
// Displaying the updated value of the variable on the web page
document.write("The remainder of x divided by 5 is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 17.
2-Then, we use the remainder assignment operator (%=) to calculate the remainder of x divided by 5 and assign the result back to x.
3-This is equivalent to the statement x = x % 5;.
4-Finally, we display the calculated remainder of x on the web page using document.write().
5-When you run this HTML code in a browser, it will display the following output:
Exponentiation Assignment Operator (**=):
The exponentiation assignment operator (=) raises the variable to the power of a value and assigns the result back to the variable. For example:
javascript
let x = 2; x **= 3; // equivalent to x = x ** 3, assigns the value 8 to x
Raises the variable to the power of a value and assigns the result back to the variable.
Exponentiation Assignment Operator (**=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the exponentiation assignment operator (**=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Exponentiation Assignment Operator (**=) Example</title>
</head>
<body>
<h1>Exponentiation Assignment Operator (**=) Example</h1>
<script>
// Initializing a variable
let x = 2;
// Using the exponentiation assignment operator (**=) to raise the variable to a power
x **= 3; // Equivalent to: x = x ** 3;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x raised to the power of 3 is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 2.
2-Then, we use the exponentiation assignment operator (**=) to raise the value of x to the power of 3 and assign the updated value back to x.
3-This is equivalent to the statement x = x ** 3;.
4-Finally, we display the updated value of x on the web page using document.write().
5-When you run this HTML code in a browser, it will display the following output:
Left Shift Assignment Operator (<<=):
Shifts the bits of the variable to the left by a specified number of positions and assigns the result back to the variable.
Left Shift Assignment Operator (<<=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the left shift assignment operator (<<=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Left Shift Assignment Operator (<<=) Example</title>
</head>
<body>
<h1>Left Shift Assignment Operator (<<=) Example</h1>
<script>
// Initializing a variable
let x = 10;
// Using the left shift assignment operator (<<=) to shift the bits to the left
x <<= 2; // Equivalent to: x = x << 2;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x after left shifting 2 bits is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 10.
2-Then, we use the left shift assignment operator (<<=) to shift the bits of x to the left by 2 positions and assign the updated value back to x.
3-This is equivalent to the statement x = x << 2;. Finally, we display the updated value of x on the web page using document.write().
5-When you run this HTML code in a browser, it will display the following output:
Right Shift Assignment Operator (>>=):
Shifts the bits of the variable to the right by a specified number of positions and assigns the result back to the variable.
Right Shift Assignment Operator (>>=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the right shift assignment operator (>>=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Right Shift Assignment Operator (>>=) Example</title>
</head>
<body>
<h1>Right Shift Assignment Operator (>>=) Example</h1>
<script>
// Initializing a variable
let x = 20;
// Using the right shift assignment operator (>>=) to shift the bits to the right
x >>= 2; // Equivalent to: x = x >> 2;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x after right shifting 2 bits is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value 20.
2-Then, we use the right shift assignment operator (>>=) to shift the bits of x to the right by 2 positions and assign the updated value back to x.
3-This is equivalent to the statement x = x >> 2;. Finally, we display the updated value of x on the web page using document.write().
When you run this HTML code in a browser, it will display the following output:
Unsigned Right Shift Assignment Operator (>>>=):
Shifts the bits of the variable to the right by a specified number of positions, filling the leftmost positions with zeros, and assigns the result back to the variable.
Unsigned Right Shift Assignment Operator (>>>=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the unsigned right shift assignment operator (>>>=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Unsigned Right Shift Assignment Operator (>>>=) Example</title>
</head>
<body>
<h1>Unsigned Right Shift Assignment Operator (>>>=) Example</h1>
<script>
// Initializing a variable
let x = -10;
// Using the unsigned right shift assignment operator (>>>=) to shift the bits to the right
x >>>= 2; // Equivalent to: x = x >>> 2;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x after unsigned right shifting 2 bits is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing a JavaScript variable x with the value -10.
2-Then, we use the unsigned right shift assignment operator (>>>=) to shift the bits of x to the right by 2 positions, filling the leftmost positions with zeros, and assign the updated value back to x.
3-This is equivalent to the statement x = x >>> 2;.
4-Finally, we display the updated value of x on the web page using document.write().
5-When you run this HTML code in a browser, it will display the following output:
Bitwise AND Assignment Operator (&=):
Performs a bitwise AND operation between the variable and a value, and assigns the result back to the variable.
Bitwise AND Assignment Operator (&=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the bitwise AND assignment operator (&=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Bitwise AND Assignment Operator (&=) Example</title>
</head>
<body>
<h1>Bitwise AND Assignment Operator (&=) Example</h1>
<script>
// Initializing variables
let x = 12;
let y = 7;
// Using the bitwise AND assignment operator (&=) to perform a bitwise AND operation
x &= y; // Equivalent to: x = x & y;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x after bitwise AND operation is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing two JavaScript variables x and y with the values 12 and 7, respectively.
2-Then, we use the bitwise AND assignment operator (&=) to perform a bitwise AND operation between x and y, and assign the result back to x.
3-This is equivalent to the statement x = x & y;. Finally, we display the updated value of x on the web page using document.write().
When you run this HTML code in a browser, it will display the following output:
Bitwise OR Assignment Operator (|=):
Performs a bitwise OR operation between the variable and a value, and assigns the result back to the variable.
Bitwise OR Assignment Operator (|=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the bitwise OR assignment operator (|=) in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Bitwise OR Assignment Operator (|=) Example</title>
</head>
<body>
<h1>Bitwise OR Assignment Operator (|=) Example</h1>
<script>
// Initializing variables
let x = 12;
let y = 7;
// Using the bitwise OR assignment operator (|=) to perform a bitwise OR operation
x |= y; // Equivalent to: x = x | y;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x after bitwise OR operation is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing two JavaScript variables x and y with the values 12 and 7, respectively.
2-Then, we use the bitwise OR assignment operator (|=) to perform a bitwise OR operation between x and y, and assign the result back to x.
3-This is equivalent to the statement x = x | y;. Finally, we display the updated value of x on the web page using document.write().
When you run this HTML code in a browser, it will display the following output:
Bitwise XOR Assignment Operator (^=):
Performs a bitwise XOR (exclusive OR) operation between the variable and a value, and assigns the result back to the variable.
Bitwise XOR Assignment Operator (^=):complete code in html
Here’s a complete HTML code example that demonstrates the usage of the bitwise XOR assignment operator (^=) in JavaScript:
DOCTYPE html>
<html>
<head>
<title>Bitwise XOR Assignment Operator (^=) Example</title>
</head>
<body>
<h1>Bitwise XOR Assignment Operator (^=) Example</h1>
<script>
// Initializing variables
let x = 12;
let y = 7;
// Using the bitwise XOR assignment operator (^=) to perform a bitwise XOR operation
x ^= y; // Equivalent to: x = x ^ y;
// Displaying the updated value of the variable on the web page
document.write("The updated value of x after bitwise XOR operation is: " + x);
</script>
</body>
</html>
Explanation:
1-In this example, we start by initializing two JavaScript variables x and y with the values 12 and 7, respectively.
2-Then, we use the bitwise XOR assignment operator (^=) to perform a bitwise XOR operation between x and y, and assign the result back to x.
3-This is equivalent to the statement x = x ^ y;.
4-Finally, we display the updated value of x on the web page using document.write().
When you run this HTML code in a browser, it will display the following output:
Application
Here’s a complete HTML code example of an application that demonstrates the usage of various assignment operators in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Assignment Operators Application</title>
</head>
<body>
<h1>JavaScript Assignment Operators Application</h1>
<script>
// Initializing variables
let x = 10;
let y = 5;
// Using different assignment operators to perform operations
x += y; // Addition assignment operator
document.write("The value of x after addition: " + x + "<br>");
x -= 3; // Subtraction assignment operator
document.write("The value of x after subtraction: " + x + "<br>");
x *= 2; // Multiplication assignment operator
document.write("The value of x after multiplication: " + x + "<br>");
x /= 4; // Division assignment operator
document.write("The value of x after division: " + x + "<br>");
x %= 3; // Remainder assignment operator
document.write("The value of x after remainder: " + x + "<br>");
x **= 2; // Exponentiation assignment operator
document.write("The value of x after exponentiation: " + x + "<br>");
x <<= 2; // Left shift assignment operator
document.write("The value of x after left shift: " + x + "<br>");
x >>= 1; // Right shift assignment operator
document.write("The value of x after right shift: " + x + "<br>");
x >>>= 1; // Unsigned right shift assignment operator
document.write("The value of x after unsigned right shift: " + x + "<br>");
x &= 3; // Bitwise AND assignment operator
document.write("The value of x after bitwise AND: " + x + "<br>");
x |= 6; // Bitwise OR assignment operator
document.write("The value of x after bitwise OR: " + x + "<br>");
x ^= 1; // Bitwise XOR assignment operator
document.write("The value of x after bitwise XOR: " + x + "<br>");
</script>
</body>
</html>
Explanation:
1-In this example, we have created a JavaScript application within an HTML file.
2-We have initialized a variable x with an initial value of 10 and y with a value of 5.
3-We then demonstrate the usage of various assignment operators, performing different operations on x and displaying the updated value using document.write().
When you run this HTML code in a browser, it will display the following output:
multichoice quiz with answers
Here’s a multichoice quiz about JavaScript assignment operators along with the correct answers:
1-What is the assignment operator in JavaScript?
a) ==
b) =
c) ===
d) +=
Answer: b) =
2-Which assignment operator is used for addition and assignment?
a) +=
b) -=
c) *=
d) /=
Answer: a) +=
3-Which assignment operator is used for subtraction and assignment?
a) +=
b) -=
c) *=
d) /=
Answer: b) -=
4-Which assignment operator is used for multiplication and assignment?
a) +=
b) -=
c) *=
d) /=
Answer: c) *=
5-Which assignment operator is used for division and assignment?
a) +=
b) -=
c) *=
d) /=
Answer: d) /=
6-Which assignment operator is used for calculating the remainder of division and assignment?
a) +=
b) -=
c) *=
d) %=
Answer: d) %=
7-Which assignment operator is used for exponentiation and assignment?
a) +=
b) -=
c) *=
d) **=
Answer: d) **=
8-Which assignment operator is used for left shift and assignment?
a) <<=
b) >>=
c) >>>=
d) &=
Answer: a) <<=
9-Which assignment operator is used for right shift and assignment?
a) <<=
b) >>=
c) >>>=
d) &=
Answer: b) >>=
10-Which assignment operator is used for unsigned right shift and assignment?
a) <<=
b) >>=
c) >>>=
d) &=
Answer: c) >>>=
11-Which assignment operator is used for bitwise AND and assignment?
a) &=
b) |=
c) ^=
d) &&=
Answer: a) &=
12-Which assignment operator is used for bitwise OR and assignment?
a) &=
b) |=
c) ^=
d) ||=
Answer: b) |=
13-Which assignment operator is used for bitwise XOR and assignment?
a) &=
b) |=
c) ^=
d) ^^=
Answer: c) ^=
14-Which assignment operator is used for logical AND and assignment?
a) &=
b) |=
c) ^=
d) &&=
Answer: d) &&=
15-Which assignment operator is used for logical OR and assignment?
a) &=
b) |=
c) ^=
d) ||=
Answer: d) ||=
16-Which assignment operator is used for nullish coalescing and assignment?
a) &=
b) |=
c) ^=
d) ??=
Answer: d) ??=
17-Which assignment operator is used for evaluating the left-hand side and assigning a value if it is nullish?
a) ?=
b) :=
c) ??
d) ==
Answer: c) ??
18-Which assignment operator is used for performing a bitwise OR and assignment on multiple variables?
a) &=
b) |=
c) ^=
d) ||=
Answer: b) |=
19-Which assignment operator is used for exponentiation and assignment to the power of a value?
a) +=
b) -=
c) *=
d) **=
Answer: d) **=
20-Which assignment operator is used for shifting the bits of a variable to the right and assigning the result?
a) <<=
b) >>=
c) >>>=
d) &=
Answer: b) >>=
21-Which assignment operator is used for shifting the bits of a variable to the left and assigning the result?
a) <<=
b) >>=
c) >>>=
d) &=
Answer: a) <<=
22-Which assignment operator is used for performing a bitwise XOR and assignment on multiple variables?
a) &=
b) |=
c) ^=
d) ||=
Answer: c) ^=
23-Which assignment operator is used for performing a logical AND and assignment on multiple variables?
a) &=
b) |=
c) ^=
d) &&=
Answer: a) &=
24-Which assignment operator is used for performing a logical OR and assignment on multiple variables?
a) &=
b) |=
c) ^=
d) ||=
Answer: b) |=
25-Which assignment operator is used for performing a division and assignment, taking the floor of the result?
a) +=
b) -=
c) *=
d) //=
Answer: d) //=
26-Which assignment operator is used for performing a division and assignment, rounding the result to the nearest integer?
a) +=
b) -=
c) *=
d) /=
Answer: d) /=
27-Which assignment operator is used for performing a bitwise OR and assignment on multiple variables?
a) &=
b) |=
c) ^=
d) ||=
Answer: b) |=
28-Which assignment operator is used for performing a bitwise AND and assignment on multiple variables?
a) &=
b) |=
c) ^=
d) &&=
Answer: a) &=
29-Which assignment operator is used for performing a remainder operation and assignment?
a) +=
b) -=
c) *=
d) %=
Answer: d) %=
30-Which assignment operator is used for performing a compound assignment with multiple operations?
a) ==
b) &&
c) +=
d) =
Answer: c) +=