Prev Next

JavaScript Assignment

Assignment operators in JavaScript are used to assign values to variables. They can also combine assignment with arithmetic operations, allowing you to update variable values efficiently.

Key Topics

Basic Assignment

The basic assignment operator = assigns the value on the right to the variable on the left.

let x;
x = 10;
console.log("Value of x: ", x);

Output

> Value of x: 10

Explanation: The variable x is declared and then assigned the value 10. The value is logged to the console.

Compound Assignment Operators

Compound assignment operators such as +=, -=, *=, and /= let you perform an operation and assignment in one step.

let y = 5;
y += 3;  // y = y + 3
console.log("After += 3: ", y);
y *= 2;  // y = y * 2
console.log("After *= 2: ", y);

Output

> After += 3: 8

> After *= 2: 16

Explanation: The variable y is first increased by 3, then multiplied by 2 using compound assignment operators. Each updated value is logged to the console.

Combining Variables and Assignment

You can also use assignment operators to combine the values of multiple variables.

let a = 10;
let b = 4;
a += b; // a = a + b
console.log("a after += b: ", a);

Output

> a after += b: 14

Explanation: The variable a is updated by adding the value of b to it in a single step, demonstrating how assignment operators streamline code.

JavaScript Usage in DOM

This DOM-based example uses assignment operators to update an element's text content dynamically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment in DOM</title>
</head>
<body>
    <h1>Assignment Operators</h1>
    <p>Click the button to update the value:</p>
    <button onclick="updateValue()">Update</button>
    <p id="result"></p>

    <script>
        function updateValue() {
            let val = 10;
            val += 5;
            document.getElementById("result").textContent = "Updated Value: " + val;
        }
    </script>
</body>
</html>

Key Takeaways

  • Basic Assignment: The = operator sets a variable's value.
  • Compound Assignment: Operators like += simplify updating values.
  • Streamlining Code: Assignment operators make it easy to combine variables and values.
  • DOM Usage: Dynamically update webpage content using assignment operations.
Prev Next