Effective compound assignments in JavaScript

When programming with JavaScript, you often encounter various ways to assign and change values. A particularly practical concept is the so-called "Compound Assignments" or composite assignments. They help make the code clearer, shorter, and more concise. In this guide, you will learn what compound assignments are, how to use them successfully, and what advantages they offer.

Key Insights

Each assignment operator can be replaced by its combined operator to make the code more readable and efficient. The most common operators are addition, subtraction, multiplication, division, and modulo. Recognizing and using these operators reduces the scope of the code and avoids redundancies.

Step-by-Step Guide

First, we want to clarify what compound assignments actually are. Essentially, they are a combination of an operator and an assignment that allows you to change a value while simultaneously storing it.

Step 1: Initial Assignment First, we create a variable x and set it to 5. This represents the initial value we will work with. You can insert this code into your JavaScript environment:

let x = 5;

Step 2: First Increase of the Value Assuming you want to increase the value of x by 10. The obvious code for this would be:

x = x + 10; This line assigns the result of adding 10 to the original x variable back to x. You can test this result in the browser.

Step 3: Using Compound Assignment for Addition Instead of using this longer syntax, you can use the compound assignment:

x += 10; This shorthand is not only shorter but also improves the readability of your code. If you now update the code and check in the browser, you will see that the variable now has the value 15.

Step 4: Applying Subtraction The principle of compound assignments also works with other mathematical operators like subtraction. Imagine you want to decrease the variable by 5. Instead of using x = x - 5;, you can write:

x -= 5; Check the new value of x.

Step 5: Multiplication and Division The same applies to multiplication and division. Instead of getting a new value:

x = x * 2; you simply use:

x *= 2; or for division:

x /= 2;

Use the compound assignments again here and pay attention to the results.

Step 6: Modulo Calculation Another sophisticated tool is the modulo operator. For example, to check if a number is even or odd, you can do the following:

let isEven = x % 2; To use this with an assignment:

isEven %= 2; Check the result of the expression where isEven could be 0 or 1.

Step 7: Increment Operator A common use case is the increment operator. You can also directly increase x by 1 with:

x++; or you could also use x += 1; for example.

Summary — Basics of Compound Assignments in JavaScript

Using compound assignments in JavaScript allows you to significantly simplify and structure your code. You learned that these principles apply not just to addition, but also to other mathematical operations like subtraction, multiplication, division, and modulo. By using these assignment operators, your code becomes not only shorter but also more readable.