Algocademy Logo

Augmented Assignment Operators in JavaScript


In programming, it is common to use assignments to modify the contents of a variable.

Remember that everything to the right of the equals sign (=) is evaluated first, so we can say:

myVar = myVar + 5;

to add 5 to myVar.

Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step.

One such operator is the += operator:

let myVar = 10;
myVar += 5;
console.log(myVar);

This code would print 15 to the console. We call myVar += 5 an augmented assignment.

There is one such operator for every other arithmetic operator we've learned:

For subtraction: -=

let myVar = 10;
myVar -= 5; // short for myVar = myVar - 5;
console.log(myVar); // Prints 5

For multiplication: *=

let myVar = 3;
myVar *= 5; // short for myVar = myVar * 5;
console.log(myVar); // Prints 15

For division: /=

let myVar = 20;
myVar /= 4; // short for myVar = myVar / 4;
console.log(myVar); // Prints 5

For remainder: %=

let myVar = 11;
myVar %= 3; // short for myVar = myVar % 3;
console.log(myVar); // Prints 2

For exponentiation: **=

let myVar = 3;
myVar **= 3; // short for myVar = myVar ** 3;
console.log(myVar); // Prints 27

Assignment
Follow the Coding Tutorial and let's do some augmented assignments.

Hint
Look at the examples above if you get stuck.

Introduction

In this lesson, we will explore augmented assignment operators in JavaScript. These operators are a shorthand way to perform arithmetic operations and assignment in a single step. Understanding these operators can make your code more concise and readable. They are particularly useful in scenarios where you need to update the value of a variable based on its current value.

Understanding the Basics

Before diving into augmented assignment operators, it's essential to understand basic assignment and arithmetic operations. For example, to add 5 to a variable myVar, you would write:

myVar = myVar + 5;

This statement takes the current value of myVar, adds 5 to it, and then assigns the result back to myVar. Augmented assignment operators simplify this pattern.

Main Concepts

Augmented assignment operators combine arithmetic operations with assignment. Here are the key operators:

  • +=: Addition
  • -=: Subtraction
  • *=: Multiplication
  • /=: Division
  • %=: Remainder
  • **=: Exponentiation

For example, myVar += 5; is equivalent to myVar = myVar + 5;. This shorthand makes the code cleaner and easier to read.

Examples and Use Cases

Let's look at some examples to see how these operators work in practice:

let myVar = 10;
myVar += 5; // myVar is now 15
myVar -= 3; // myVar is now 12
myVar *= 2; // myVar is now 24
myVar /= 4; // myVar is now 6
myVar %= 5; // myVar is now 1
myVar **= 3; // myVar is now 1 (1 to the power of 3)

These operators are useful in loops, counters, and scenarios where you need to update a variable's value repeatedly.

Common Pitfalls and Best Practices

Here are some common mistakes to avoid:

  • Forgetting that augmented assignment operators modify the original variable.
  • Using the wrong operator, leading to unexpected results.

Best practices include:

  • Using augmented assignment operators to make code more concise.
  • Ensuring the variable is initialized before using an augmented assignment operator.

Advanced Techniques

Advanced use cases might involve combining multiple augmented assignments in complex calculations. For example:

let a = 5, b = 10;
a += b -= a *= b /= 2; // Complex chain of operations

While this is possible, it's often better to break down complex expressions for readability.

Code Implementation

Here is a well-commented code snippet demonstrating the use of augmented assignment operators:

// Initialize a variable
let myVar = 10;

// Add 5 to myVar
myVar += 5; // Equivalent to myVar = myVar + 5
console.log(myVar); // Prints 15

// Subtract 3 from myVar
myVar -= 3; // Equivalent to myVar = myVar - 3
console.log(myVar); // Prints 12

// Multiply myVar by 2
myVar *= 2; // Equivalent to myVar = myVar * 2
console.log(myVar); // Prints 24

// Divide myVar by 4
myVar /= 4; // Equivalent to myVar = myVar / 4
console.log(myVar); // Prints 6

// Get the remainder of myVar divided by 5
myVar %= 5; // Equivalent to myVar = myVar % 5
console.log(myVar); // Prints 1

// Raise myVar to the power of 3
myVar **= 3; // Equivalent to myVar = myVar ** 3
console.log(myVar); // Prints 1

Debugging and Testing

When debugging code that uses augmented assignment operators, ensure that the variable is initialized correctly. Use console.log statements to track the variable's value at different stages. For testing, write test cases that cover various scenarios, including edge cases.

// Example test case
function testAugmentedAssignment() {
  let myVar = 10;
  myVar += 5;
  if (myVar !== 15) {
    console.error('Test failed: Expected 15, got ' + myVar);
  } else {
    console.log('Test passed');
  }
}

testAugmentedAssignment();

Thinking and Problem-Solving Tips

When approaching problems involving augmented assignment operators:

  • Break down the problem into smaller steps.
  • Use augmented assignment operators to simplify repetitive arithmetic operations.
  • Practice with coding exercises to become more comfortable with these operators.

Conclusion

In this lesson, we covered augmented assignment operators in JavaScript. These operators provide a concise way to perform arithmetic operations and assignment in one step. By mastering these operators, you can write cleaner and more efficient code. Practice using them in different scenarios to become proficient.

Additional Resources