An assignment operator will assign the value of its right-side operand to its left-side operand and will return the newly assigned value. The left-side operand of an assignment operation must always be an assignable and valid identifier or property. Examples of this would include the following:
value = 1;
value.property = 1;
value['property'] = 1;
You can additionally use destructuring assignment, which enables you to declare your left-side operand as either an object-literal-like or array-like structure that designates the identifiers you wish to assign and the values you wish to be assigned:
[name, hobby] = ['Pikachu', 'Eating Ketchup'];
name; // => "Pikachu"
hobby: // => "Eating Ketchup"
We will explore destructuring assignment further in a little bit. For now, it's only important to know that it, along with regular identifiers (foo=...) and property accessors (foo.baz = ..., foo[baz] = ...), can be used as the left-side operand to an assignment operator.
There are technically a large number of assignment operators because JavaScript combines regular operators with the basic assignment operator to create more succinct assignment operations in the common case of needing to mutate the value referred to by an existing variable or property. The assignment operators in JavaScript are as follows:
- Direct assignment: =
- Additive assignment: +=
- Subtractive assignment: -=
- Multiplicative assignment: *=
- Divisive assignment: /=
- Remainder assignment: %=
- Bitwise left-shift assignment: <<=
- Bitwise right-shift assignment: >>=
- Bitwise unsigned right-shift assignment: >>>=
- Bitwise AND assignment: &=
- Bitwise XOR assignment: ^=
- Bitwise OR assignment: |=
All assignment operators, apart from the direct assignment = operator, will conduct the operation that is indicated by the operator preceding =. So, in the case of +=, the + operator will be applied to the left-and right-side operands, the result of which will then be assigned to the left-side operand. So, consider the following statement:
value += 5
It would be equivalent to:
value = value + 5
The same follows for all other assignment operators that are of the combined type. The addition operator, as we know, will concatenate its operands if either is a string. And the exponentiation operator (**) will always evaluate to 1 if the exponent operand is zero (2 ** 0 === 1). We can rely on this and other existing knowledge to know how such operators will work when combined with assignment. We, therefore, don't need to individually explore all of these assignment operator variants.
Assignment conventionally occurs in the context of a singular line. It's typical to see an assignment statement on its own terminated by a semicolon:
someValue = someOtherValue;
But there's nothing implicit in the assignment operator that requires this. In fact, you can embed an assignment anywhere where you would be able to embed any expression within the language. The following syntax would be entirely legal, for example:
processStep(nextValue += currentValue);
This is carrying out an addition combined with an assignment, and then passing the resulting value to the processStep function. It is exactly equivalent to the following code:
nextValue += currentValue;
processStep(nextValue);
Note here how it is nextValue that is passed to processStep. The result of an assignment operation expression is always the value being assigned:
let a;
(a = 1); // => 1
(a += 2); // => 3
(a *= 2); // => 6
It is common to see assignment in contexts of for and while loops:
for (let i = 0, l = arr.length; i < l; i += 1) { }
// \___/ \____________/ \____/
// | | |
// Assignment Assignment Additive Assignment
This and other patterns of assignment are totally fine as they are so widely used they have become idiomatic of JavaScript. But in most other situations, it is preferable not to embed assignment within other language constructs. Code such as fn(a += b) is potentially unintuitive to some, as it may not be clear what value is actually passed to fn().