JavaScript Assignment

= : Assigns the value on the right to the variable on the left.
- Example: x = y means x is assigned the value of y.
+= : Adds the right operand to the left operand and assigns the result to the left operand.
- Example: x += y is the same as x = x + y.
-= : Subtracts the right operand from the left operand and assigns the result to the left operand.
- Example: x -= y is the same as x = x - y.
*= : Multiplies the left operand by the right operand and assigns the result to the left operand.
- Example: x *= y is the same as x = x * y.
/= : Divides the left operand by the right operand and assigns the result to the left operand.
- Example: x /= y is the same as x = x / y.
%= : Calculates the remainder of dividing the left operand by the right operand and assigns the result to the left operand.
- Example: x %= y is the same as x = x % y.
**= : Raises the left operand to the power of the right operand and assigns the result to the left operand.
- Example: x **= y is the same as x = x ** y

Shift Assignment Operators

JavaScript also includes bitwise shift assignment operators, which are used to shift the bits of the first operand, then assign the result back to that operand. Here's how each works:

<<= (Left Shift Assignment): Shifts the bits of the variable on the left operand to the left by the number of positions specified by the right operand, then assigns the result back to the left operand.
- Example: x <<= y is the same as x = x << y.
>>= (Right Shift Assignment): Shifts the bits of the variable on the left operand to the right by the number of positions specified by the right operand, preserving the sign, then assigns the result back to the left operand.
- Example: x >>= y is the same as x = x >> y.
>>>= (Unsigned Right Shift Assignment): Shifts the bits of the variable on the left operand to the right by the number of positions specified by the right operand, filling the new positions with zeros, then assigns the result back to the left operand.
- Example: x >>>= y is the same as x = x >>> y.

Bitwise Assignment Operators

&= (Bitwise AND Assignment): Applies the bitwise AND operation to both operands and assigns the result back to the left operand.
- Example: x &= y is the same as x = x & y.
^= (Bitwise XOR Assignment): Applies the bitwise XOR operation to both operands and assigns the result back to the left operand.
- Example: x ^= y is the same as x = x ^ y.
|= (Bitwise OR Assignment): Applies the bitwise OR operation to both operands and assigns the result back to the left operand.
- Example: x |= y is the same as x = x | y.

Logical Assignment Operators

&&= (Logical AND Assignment): Assigns the right operand to the left operand only if the left operand is truthy.
- Example: x &&= y effectively means x = x && (x = y). It will assign y to x if x is truthy; otherwise, x retains its original value.
||= (Logical OR Assignment): Assigns the right operand to the left operand if the left operand is falsy.
- Example: x ||= y translates to x = x || (x = y). It will assign y to x if x is falsy; otherwise, x retains its value.
??= (Nullish Coalescing Assignment): Assigns the right operand to the left operand only if the left operand is null or undefined.
- Example: x ??= y means x = x ?? (x = y). This operator will assign y to x if x is null or undefined; otherwise, x remains unchanged.

The = Operator

The Simple Assignment Operator (=) in JavaScript is used to assign values directly to variables. This operator can assign both straightforward values and results of expressions.

Simple Assignment Examples:

let x = 10; assigns the value 10 directly to the variable x.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Simple Assignment</h2>
<h3>The = Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

let x = 10 + y; assigns the result of the expression 10 + y to the variable x, where y needs to be previously defined or declared

<!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>

The += Operator

The Addition Assignment Operator (+=) in JavaScript is used to add a value to a variable and then update the variable with the new sum. This operator simplifies adding a value to a variable and reassigning the result to the same variable in one step.

Addition Assignment Examples:

let x = 10; sets the initial value of x to 10.
- x += 5; adds 5 to the current value of x, resulting in x becoming 15

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Addition 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>

let text = "Hello"; text += " World";

‍

<!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>

The -= Operator

The Subtraction Assignment Operator (-=) in JavaScript is used to subtract a value from a variable and then automatically update the variable with the new result. This operator efficiently combines a subtraction and an assignment into one operation.

Subtraction Assignment Example:

let x = 10; initializes the variable x with the value 10.
x -= 5; then subtracts 5 from the current value of x, resulting in x becoming 5.

<!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>

The *= Operator

The Multiplication Assignment Operator (*=) in JavaScript multiplies a variable by a value and then updates the variable with the resulting product.

Multiplication Assignment Example:

let x = 10; sets the initial value of x to 10.
x *= 5; multiplies the current value of x by 5, resulting in x becoming 50.

<!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>

The **= Operator

The Exponentiation Assignment Operator (**=) in JavaScript raises a variable to the power of a specified operand and then updates the variable with the resulting value.

Exponentiation Assignment Example:

let x = 10; initializes x with the value 10.
x **= 5; raises x to the power of 5, effectively computing 105105, which results in x becoming 100000.

<!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>

The /= Operator

The Division Assignment Operator (/=) in JavaScript divides a variable by a specified value and then updates the variable with the resulting quotient.

Division Assignment Example:

let x = 10; initializes x with the value 10.
x /= 5; divides x by 5, resulting in x becoming 2.

<!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>

‍

The %= Operator

The Remainder Assignment Operator (%=) in JavaScript calculates the remainder of the division of a variable by a specified value and then updates the variable with that remainder.

Remainder Assignment Example:

let x = 10; initializes x with the value 10.
x %= 5; divides x by 5 and assigns the remainder of this division to x, which results in x becoming 0, because 10 divided by 5 leaves no remainder.

<!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>

The <<= Operator

The Left Shift Assignment Operator (<<=) in JavaScript shifts the bits of a variable to the left by a specified number of positions and assigns the result back to the variable. This bitwise operation effectively multiplies the number by 2 raised to the power of the number of shifts.

Left Shift Assignment Example:

let x = -100; initializes x with the value -100.
x <<= 5; shifts the bits of x five positions to the left. In binary, left-shifting a number by one position is equivalent to multiplying it by 2, so shifting by 5 positions multiplies it by 2525 or 32. This operation changes the value of x to -3200 (since -100 multiplied by 32 equals -3200).

<!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>

The Right Shift Assignment Operator (>>=) in JavaScript shifts the bits of a variable to the right by a specified number of positions and assigns the result back to the variable.

Right Shift Assignment Example:

let x = -100; initializes x with the value -100.
x >>= 5; shifts the bits of x five positions to the right. This operation divides the number by 2525 or 32, while preserving the sign of the number. Thus, -100 divided by 32 roughly equals -3 when rounded towards zero, resulting in x becoming -3.

The >>>= Operator

The Unsigned Right Shift Assignment Operator (>>>=) in JavaScript shifts the bits of a variable to the right by a specified number of positions and assigns the result back to the variable.

Unsigned Right Shift Assignment Example:

let x = -100; initializes x with the value -100.
x >>>= 5; shifts the bits of x five positions to the right.

<!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>

The &= Operator

The Bitwise AND Assignment Operator (&=) in JavaScript performs a bitwise AND operation between two operands and then assigns the result back to the variable. This operator compares each bit of the first operand to the corresponding bit of the second operand. If both bits are 1, the resulting bit is set to 1; otherwise, it is set to 0.

Bitwise AND Assignment Example:

let x = 10; initializes x with the value 10, which in binary is 1010.
x &= 5; performs a bitwise AND operation with 5, which in binary is 0101.
The operation 1010 & 0101 results in 0000 because none of the corresponding bits in both numbers are 1 at the same position.
Thus, after the operation, x becomes 0.

<!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>

The |= Operator

The Bitwise OR Assignment Operator (|=) in JavaScript performs a bitwise OR on two operands and assigns the result to the variable.

Example:

let x = 10;
x |= 5; changes x to 15.

<!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>

The ^= Operator

The Bitwise XOR Assignment Operator (^=) performs a bitwise XOR operation between two operands and assigns the resulting value back to the variable.

Example:

let x = 10;
x ^= 5; changes x to 15.

<!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>

The &&= Operator

The Logical AND Assignment Operator (&&=) assigns the second value to the variable if the first value is truthy.

Example:

let x = 10;
x &&= 5; results in x being set to 5, because 10 is truthy.

<!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>

The ||= Operator

The Logical OR Assignment Operator (||=) assigns the second value to the variable if the first value is falsy.

Example:

let x = 10;
Since x is truthy, x ||= 5; does not change x, and it remains 10.

<!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>

The ??= Operator

The Nullish Coalescing Assignment Operator (??=) assigns the second value to the variable if the first value is either undefined or null.

Example:

let x; initializes x without a value, so it's undefined.
x ??= 5; assigns 5 to x because x was undefined. Now, x equals 5.

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

‍

Take a look into your desired course

Students

Hire from us

Partners