How to use assignment operators in JavaScript

Assignment operators are the bread and butter of variable manipulation in JavaScript. At the most basic level, the assignment operator = assigns the value on its right to the variable on its left. This might sound trivial, but understanding the nuances here lays the groundwork for mastering more complex operations.

Consider this:

let x = 5;
let y = 10;
x = y;

After the third line executes, x holds the value 10. Note that the assignment operator doesn’t create a link or reference back to y—it simply copies the value. This distinction matters deeply when dealing with objects or arrays where references come into play.

When you use = with primitive types like numbers, strings, or booleans, the value is copied. But with objects, the variable on the left points to the same object in memory as the variable on the right:

let obj1 = { a: 1 };
let obj2 = obj1;
obj2.a = 42;
console.log(obj1.a); // 42

Here, since obj2 is assigned the reference held by obj1, changes through either variable affect the same underlying object. So, assignment operators don’t clone objects by default; they just copy references.

Assignment expressions in JavaScript also return the assigned value. This subtlety allows chaining assignments:

let a, b, c;
a = b = c = 100;
console.log(a, b, c); // 100 100 100

While chaining can be concise, it can also reduce readability if overused. Always keep an eye on clarity.

Another subtlety: assignment operators always evaluate right-to-left. So the right-hand side expression is fully resolved before the assignment happens. This behavior becomes significant when the right side involves function calls or expressions with side effects.

For example:

let i = 0;
let j = i = i + 1;
console.log(i, j); // 1 1

Here, i + 1 evaluates first to 1. Then i is assigned 1. Finally, j is assigned the new value of i. The sequence ensures the most recent value is used for all assignments.

Understanding these fundamentals is important before diving into the many compound assignment operators JavaScript offers, which bundle operation and assignment into one concise statement. But before that, keep in mind that assignment itself is an expression with a value, not just a statement.

That means you can use assignments inside other expressions:

let x;
if ((x = getValue()) > 10) {
  console.log("x is greater than 10");
}

Here, x is assigned the result of getValue(), and then the comparison is made. This pattern is common but can lead to bugs if you mistake = for == or ===. Always be deliberate.

Finally, remember that JavaScript supports destructuring assignment, a powerful feature to unpack values from arrays or properties from objects into distinct variables:

const [first, second] = [10, 20];
const {name, age} = { name: "Alice", age: 30 };

This syntax is more than syntactic sugar—it helps write cleaner and more expressive code, reducing boilerplate and improving readability.

Getting comfortable with these basics makes it easier to leverage compound assignments effectively without falling into traps that often trip newcomers up. And speaking of compound assignments, we’ll see how operators like +=, *=, and &&= can make your code not just shorter, but clearer and more efficient—

Using compound assignment for cleaner code

Consider the += operator, which combines addition with assignment. Instead of writing:

x = x + 5;

you can write:

x += 5;

This not only reduces verbosity but also signals intent clearly: you intend to update x by adding something to it. The same pattern applies across a range of operators:

counter -= 2;    // decrement by 2
total *= 3;      // multiply by 3
value /= 4;      // divide by 4
flags &= mask;   // bitwise AND with mask
flags |= mask;   // bitwise OR with mask
flags ^= mask;   // bitwise XOR with mask

Compound assignment operators work by first evaluating the right-hand side expression, then applying the operation with the current value of the left-hand variable, and finally assigning the result back to that variable. This sequence ensures that any side effects from the right-hand side expression occur before the assignment.

For example, consider this snippet:

let a = 10;
let b = 2;
a += b * 3; // equivalent to a = a + (b * 3)
console.log(a); // 16

Notice how the multiplication b * 3 happens before adding to a. The operator precedence rules apply as expected, so compound assignments don’t change the evaluation order of expressions.

Compound assignments also work seamlessly with strings. The += operator concatenates strings:

let greeting = "Hello";
greeting += ", world!";
console.log(greeting); // "Hello, world!"

This makes building strings incrementally or appending suffixes concise and idiomatic.

In ES2021 and later, logical compound assignments were introduced, offering more expressive ways to combine logical operations with assignment:

let isActive = false;
isActive ||= true;  // equivalent to: isActive = isActive || true;
console.log(isActive); // true

let user = null;
user &&= { name: "Bob" }; // equivalent to: user = user && { name: "Bob" };
console.log(user); // null

These operators help write guarded assignments without repeating the variable name, reducing boilerplate and potential errors.

One useful pattern with logical assignment is providing default values:

let config = {};
config.timeout ??= 3000; // sets timeout to 3000 only if config.timeout is null or undefined
console.log(config.timeout); // 3000

That’s cleaner than writing explicit if checks for null or undefined.

Compound assignments can also be chained, but readability suffers quickly:

let x = 5;
x += 3 *= 2; // SyntaxError: Invalid left-hand side in assignment

Compound assignments cannot be nested directly like this because the left-hand side must be a simple variable or property reference. To achieve compound effects, break the operations into separate statements:

let y = 3;
y *= 2;
x += y;

This clarity prevents confusing side effects and ambiguous evaluation order.

When using compound assignments with objects or arrays, remember that the operation happens on the reference held by the variable, not on a copy. For instance:

let arr = [1, 2, 3];
arr[0] += 5; // arr[0] = arr[0] + 5
console.log(arr); // [6, 2, 3]

Here, the value at index 0 is directly updated, reflecting the mutable nature of arrays.

However, if you attempt compound assignment on a property that doesn’t exist, JavaScript will create it:

x += 5;

This behavior is a common pitfall. To avoid it, initialize properties before using compound assignments:

x += 5;

Alternatively, use the nullish coalescing operator to provide a default:

x += 5;

This ensures count starts at zero if it was previously null or undefined.

Compound assignments can also be used with destructured variables, although the syntax can be tricky:

x += 5;

Notice the parentheses around the destructuring assignment. Without them, JavaScript interprets the curly braces as a block, leading to syntax errors.

Lastly, while compound assignments make code concise, they can sometimes mask side effects or obscure intent, especially when used with complex expressions. For example:

x += 5;

Though concise, this expression involves multiple operations: computing the index and updating the element. When readability is paramount, splitting into multiple statements can aid understanding.

Compound assignment operators also interact with getters and setters on objects. If a property has a setter, using a compound assignment triggers the setter with the updated value:

x += 5;

This behavior is important when dealing with reactive frameworks or proxies, where setters may trigger side effects beyond simple assignment.

Compound assignment operators condense common patterns into succinct syntax, but they require an understanding of evaluation order, side effects, and the underlying data types to use them effectively. They shine brightest when they make code clearer and less error-prone, not just shorter. As always, clarity trumps brevity—

Avoiding common pitfalls with assignment operators

One of the most frequent pitfalls with assignment operators arises when developers confuse the equality operator (== or ===) with the assignment operator (=). This simple mistake can silently introduce bugs that are hard to trace:

let x = 5;
if (x = 10) {
  console.log("This always runs because x is assigned 10");
}

In the if condition above, x = 10 is an assignment expression, which evaluates to 10 (a truthy value), so the block always executes. To avoid this, always double-check your conditional expressions or use tools like linters that warn about assignments inside conditions.

Another common source of confusion is the behavior of assignment operators with non-primitive left-hand values, especially when working with objects and arrays. Since assignment copies references, mutations via one variable affect all references:

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]

If you intended to create a separate copy, you must explicitly clone the object or array, for example:

let arr3 = [...arr1]; // shallow copy
arr3.push(5);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr3); // [1, 2, 3, 4, 5]

Failing to clone can lead to unintended side effects that are especially tricky in large codebases.

When using compound assignment operators with properties of objects or elements of arrays, be mindful of the possibility that the property might not exist or might be undefined. For example:

let obj = {};
obj.count += 1; // NaN, because obj.count is undefined

Since undefined + 1 results in NaN, the value becomes corrupted. To avoid this, initialize properties before incrementing:

obj.count = (obj.count || 0) + 1;

Or use the logical nullish assignment operator introduced in ES2021:

obj.count ??= 0;
obj.count += 1;

This pattern safely handles null or undefined values while preserving existing numbers.

Beware of side effects in the right-hand side expressions of compound assignments. Since the right side is evaluated first, any function calls or expressions with side effects will execute every time the compound assignment runs:

function getIncrement() {
  console.log("Increment function called");
  return 2;
}

let total = 10;
total += getIncrement(); // Logs: Increment function called
total += getIncrement(); // Logs again

If performance or repeated side effects matter, cache the right-hand side result before the compound assignment:

const increment = getIncrement();
total += increment;
total += increment;

This prevents multiple calls and improves predictability.

In complex expressions, mixing assignment operators with other operations can lead to hard-to-read or error-prone code. For example, avoid writing:

let x = 10;
let y = 5;
x *= y += 2; // confusing and discouraged

Though syntactically valid, this nests assignments and operations, making it difficult to parse mentally. Instead, split into clear steps:

y += 2;
x *= y;

This explicitness aids debugging and maintenance.

Another subtlety arises with assignment operators and property accessors (getters and setters). For instance:

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]

The compound assignment obj.val += 2 triggers the getter to retrieve the current value, adds 2, then calls the setter with the new value. This sequence can invoke side effects defined in the getter or setter, which might not be obvious at first glance.

Finally, remember that assignment operators do not create new bindings. For example, assigning to a constant variable or a read-only property will throw an error:

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]

Such errors are runtime exceptions and must be handled or avoided by ensuring the target of assignment is mutable and writable.