JavaScript Assignment Operators - Assignment Operators in JavaScript



JavaScript Assignment Operators

  • Assignment operators assign 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)

The = Operator

  • The Simple Assignment Operator assigns a value to a variable.
let x = 10;
arithmetic_assignment_increment

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Simple Assignment
The = Operator
Value of x is: 10

The += Operator

  • The Addition Assignment Operator adds a value to a variable.
let x = 10;
x += 5;
let text = "Hello"; text += " World";
arithmetic_addition_assignment_increment

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignments
Addition Assignment
The += Operator
Value of x is: 15

The -= Operator

  • The Subtraction Assignment Operator subtracts a value from a variable.
let x = 10;
x -= 5;
arithmetic_subraction_assignment_increment

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignments
Subtraction Assignment
The -= Operator
Value of x is: 5

The *= Operator

  • The Multiplication Assignment Operator multiplies a variable.
let x = 10;
x *= 5;
arithmetic_multiplication_assignment_increment

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignments
Multiplication Assignment
The *= Operator
Value of x is: 50

The **= Operator

  • The Exponentiation Assignment Operator raises a varable to the power of the operand.
arithmetic_exponentiation_assignment_increment

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignments
Exponentiation Assignment
The **= Operator
Value of x is: 100000

The /= Operator

  • The Division Assignment Operator divides a variable.
arithmetic_division_assignment_increment

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </h1>
    <h2>Division 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>

Output

JavaScript Assignment
Division Assignment
The /= Operator
Value of x is: 2

The %= Operator

  • The Remainder Assignment Operator assigns a remainder to a variable.
arithmetic_remainder_assignment_increment

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Remainder Assignment
The %= Operator
Value of x is: 0

The <<= Operator

  • The Left Shift Assignment Operator left shifts a variable.

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Left Shift Assignment
The <<= Operator
Value of x is: -3200

The >>= Operator

  • The Right Shift Assignment Operator right shifts a variable (signed).

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Right Shift Assignment
The >>= Operator
Value of x is: -4

The >>>= Operator

  • The Unsigned Right Shift Assignment Operator right shifts a variable (unsigned).

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </h1>
    <h2>Unsigned 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>

Output

JavaScript Assignment
Unsigned Shift Assignment
The >>>= Operator 
Value of x is: 134217724

The &= Operator

  • The Bitwise AND Assignment Operator does a bitwise AND operation on two operands and assigns the result to the the variable.

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Bitwise AND Assignment
The &= Operator
Value of x is: 4

The |= Operator

  • The Bitwise OR Assignment Operator does a bitwise OR operation on two operands and assigns the result to the variable.

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Bitwise OR Assignment
The |= Operator
Value of x is: 101

The ^= Operator

  • The Bitwise XOR Assignment Operator does a bitwise XOR operation on two operands and assigns the result to the variable.

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Bitwise XOR Assignment
The ^= Operator
Value of x is: 97

The &&= Operator

  • The Logical AND assignment operator is used between two values.
  • If the first value is true, the second value is assigned.

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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>

Output

JavaScript Assignment
Logical AND Assignment
The &&= Operator
If the first value is true, the second value is assigned.
Value of x is: 5

The ||= Operator

  • The Logical OR assignment operator is used between two values.
  • If the first value is false, the second value is assigned.

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </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 = 100;
        x ||= 5;
        document.getElementById("demo").innerHTML = "Value of x is: " + x;
    </script>

</body>
</html>

Output

JavaScript Assignment
Logical OR Assignment
The ||= Operator
If the first value is false, the second value is assigned.
Value of x is: 100

The ??= Operator

  • The Nullish coalescing assignment operator is used between two values.
  • If the first value is undefined or null, the second value is assigned.

Sample Code

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>JavaScript Assignment </h1>
    <h2>Nullish coalescing Assignment </h2>
    <h3>The ??= Operator</h3>
    <p>If the first value is undefined or null, 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>

Output

JavaScript Assignment
Nullish coalescing Assignment
The ??= Operator
If the first value is undefined or null, the second value is assigned.
Value of x is: 100

Related Searches to JavaScript Assignment Operators - Assignment Operators in JavaScript