JavaScript Assignment
JavaScript Assignment Operators
Assignment operators are like tools that give values to JavaScript variables.
Operator |
Example |
Same As |
= |
x = y |
x = y |
+= |
x += y |
x = x + y |
-= |
x -= y |
x = x - y |
*= |
x *= y |
x = x * y |
/= |
x /= y |
x = x / y |
%= |
x %= y |
x = x % y |
**= |
x **= y |
x = x ** y |
Shift Assignment Operators
Operator |
Example |
Same As |
<<= |
x <<= y |
x = x << y |
>>= |
x >>= y |
x = x >> y |
>>>= |
x >>>= y |
x = x >>> y |
Bitwise Assignment Operators
Operator |
Example |
Same As |
&= |
x &= y |
x = x & y |
^= |
x ^= y |
x = x ^ y |
|= |
x |= y |
x = x | y |
Logical Assignment Operators
Operator |
Example |
Same As |
&&= |
x &&= y |
x = x && (x = y) |
||= |
x ||= y |
x = x || (x = y) |
??= |
x ??= y |
x = x ?? (x = y) |
Note :
The ES2020 version of JavaScript introduced the Logical assignment operators.
The = Operator
The Basic Assignment Operator sets a value for a variable.
The += Operator
The Addition Assignment Operator is a way to increase the value of a variable.
The -= Operator
The Subtraction Assignment Operator takes away a number from a variable.
The *= Operator
The Multiplication Assignment Operator makes a variable bigger by multiplying it.
The **= Operator
The Exponentiation Assignment Operator is used to make a variable become a certain number when it's raised to the power of another number.
The /= Operator
The Division Assignment Operator is used to divide a variable.
The %= Operator
The Remainder Assignment Operator puts the leftover amount into a variable.
The <<= Operator
The Left Shift Assignment Operator makes a variable move to the left.
The >>= Operator
The Right Shift Assignment Operator does this: it moves a variable to the right (if it's a positive number).
The >>>= Operator
The Unsigned Right Shift Assignment Operator makes a variable shift to the right (in a way that doesn't consider negative numbers).
The &= Operator
The Bitwise AND Assignment Operator is a tool that performs AND operation on two operands and then puts the answer into a variable.
The |= Operator
The Bitwise OR Assignment Operator is a tool that performs OR operation on two numbers and then saves the answer in a variable.
The ^= Operator
The "Bitwise XOR Assignment Operator" does XOR operation on two numbers and then puts the answer into a variable.
The &&= Operator
The Logical AND assignment operator works with two values. If the first value is true, it assigns the second value.
The ||= Operator
The Logical OR assignment operator connects two values together.
If the initial value is not true, then the second value takes its place.
The ??= Operator
The Nullish coalescing assignment operator is placed between two values.
If the initial value isn't there or is empty, the second value takes its place.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Simple Assignment</h2>
<h3>The = Operator</h3>
<p id="demo"></p>
<script>
let y = 50
let x = 10 + y;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Addition Assignment</h2>
<h3>The += Operator</h3>
<p id="demo"></p>
<script>
let text = "Hello";
text += " World";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Subtraction Assignment</h2>
<h3>The -= Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
x -= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Multiplication Assignment</h2>
<h3>The *= Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
x *= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Exponentiation Assignment</h2>
<h3>The **= Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
x **= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Division Assignment</h2>
<h3>The /= Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
x /= 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Remainder Assignment</h2>
<h3>The %= Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
x %= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Left Shift Assignment</h2>
<h3>The <<= Operator </h3>
<p id="demo"></p>
<script>
let x = -100;
x <<= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Right Shift Assignment</h2>
<h3>The >>= Operator</h3>
<p id="demo"></p>
<script>
let x = -100;
x >>= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Right Shift Assignment</h2>
<h3>The >>>= Operator</h3>
<p id="demo"></p>
<script>
let x = -100;
x >>>= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Bitwise AND Assignment</h2>
<h3>The &= Operator</h3>
<p id="demo"></p>
<script>
let x = 100;
x &= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Bitwise OR Assignment</h2>
<h3>The |= Operator</h3>
<p id="demo"></p>
<script>
let x = 100;
x |= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Bitwise XOR Assignment</h2>
<h3>The ^= Operator</h3>
<p id="demo"></p>
<script>
let x = 100;
x ^= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &&= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>
<p id="demo"></p>
<script>
let x = 100;
x && = 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>
<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>
<script>
let x = undefined;
x || = 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is like a bridge between two values. If the first value doesn't exist or is empty, the second value takes its place.</p>
<p id="demo"></p>
<script>
let x;
document.getElementById("demo").innerHTML = x ?? = 5;
</script>
</body>
</html>