From da2ef67f13412c7aab3e7b6d8595cd08c37e6fa9 Mon Sep 17 00:00:00 2001 From: Clarence Bakosi Date: Wed, 29 Oct 2025 19:23:37 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to What Are Compound Assignment Operators in JavaScript, and How Do They Work (#63242) --- .../673271b4213033d9b661c70e.md | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-operator-behavior/673271b4213033d9b661c70e.md b/curriculum/challenges/english/blocks/lecture-working-with-operator-behavior/673271b4213033d9b661c70e.md index 5f0babec4f0..59bd9e5e9bb 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-operator-behavior/673271b4213033d9b661c70e.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-operator-behavior/673271b4213033d9b661c70e.md @@ -5,10 +5,12 @@ challengeType: 19 dashedName: what-are-compound-assignment-operators-in-javascript-and-how-do-they-work --- -# --description-- +# --interactive-- In JavaScript, all arithmetic operators have a compound assignment form. Compound assignment operators allow you to perform a mathematical operation and reassign the result back to the variable in one line of code. Instead of writing something like this: +:::interactive_editor + ```js let num = 5; num = num + 2; @@ -16,8 +18,12 @@ num = num + 2; console.log(num); // 7 ``` +::: + You can write something like this: +:::interactive_editor + ```js let num = 5; num += 2; @@ -25,10 +31,14 @@ num += 2; console.log(num); // 7 ``` +::: + Notice how `num += 2` combines both the addition and assignment steps into one. This saves time and reduces clutter in your code. Let's dive deeper into the most common compound assignment operators in JavaScript. As you've already seen, the `+=` operator lets you add a value to an existing variable. It is known as the addition assignment operator. The addition assignment operator takes the current value of the variable, adds the specified number to it, and then assigns the result back to the variable: +:::interactive_editor + ```js let total = 10; total += 5; @@ -36,8 +46,12 @@ total += 5; console.log(total); // 15 ``` +::: + As you might guess, there's a subtraction assignment operator denoted by `-=`. The subtraction assignment operator subtracts the specified value from the current value of the variable and assigns the new value back to the variable: +:::interactive_editor + ```js let score = 20; score -= 7; @@ -45,8 +59,12 @@ score -= 7; console.log(score); // 13 ``` +::: + If you didn't use the subtraction assignment, you'd have done something like this: +:::interactive_editor + ```js let score = 20; score = score - 7; @@ -54,8 +72,12 @@ score = score - 7; console.log(score); // 13 ``` +::: + The multiplication assignment operator is represented by `*=`. It multiplies the current value of the variable by the specified number and reassigns it back to the variable: +:::interactive_editor + ```js let points = 5; points *= 3; @@ -63,8 +85,12 @@ points *= 3; console.log(points); // 15 ``` +::: + Lastly, there's a division assignment operator denoted by `/=`. Just like others before it, it lets you divide the current value of a variable by a number you specify, then assign the result back to the variable: +:::interactive_editor + ```js let balance = 100; balance /= 4; @@ -72,6 +98,8 @@ balance /= 4; console.log(balance); // 25 ``` +::: + Remember there's a compound assignment operator for every operator in JavaScript. So, apart from the four already mentioned, we also have: - Remainder assignment operator (`%=`), which divides a variable by the specified number and assigns the remainder to the variable.