x = 7 is an example of the first type.= operator to assign the value seven to the variable x. The expression itself evaluates to 7. The expression 3 + 4 is an example of the second type. This expression uses the + operator to add 3 and 4 together and produces a value, 7.const z = 3 + 4), its result will be immediately discarded — this is usually a programmer mistake because the evaluation doesn’t produce any effects.= and +.An assignment operator assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = f() is an assignment expression that assigns the value of f() to x.
There are also compound assignment operators that are shorthand for the operations listed in the following table.
| Name | Shorthand operator | Meaning |
|---|---|---|
| Assignment | x = f() |
x = f() |
| Addition assignment | x += f() |
x = x + f() |
| Subtraction assignment | x -= f() |
x = x - f() |
| Multiplication assignment | x *= f() |
x = x * f() |
| Division assignment | x /= f() |
x = x / f() |
| Remainder assignment | x %= f() |
x = x % f() |
| Exponentiation assignment | x **= f() |
x = x ** f() |
| Left shift assignment | x <<= f() |
x = x << f() |
| Right shift assignment | x >>= f() |
x = x >> f() |
| Unsigned right shift assignment | x >>>= f() |
x = x >>> f() |
| Bitwise AND assignment | x &= f() |
x = x & f() |
| Bitwise XOR assignment | x ^= f() |
x = x ^ f() |
| Bitwise OR assignment | `x | = f()` |
| Logical AND assignment | x &&= f() |
x && (x = f()) |
| Logical OR assignment | `x | |
| Nullish coalescing assignment | x ??= f() |
x ?? (x = f()) |
If an expression evaluates to an object, then the left-hand side of an assignment expression may make assignments to properties of that expression. For example
const obj = {};
obj.x = 3;
console.log(obj.x); // Prints 3.
console.log(obj); // Prints { x: 3 }.
const key = "y";
obj[key] = 5;
console.log(obj[key]); // Prints 5.
console.log(obj); // Prints { x: 3, y: 5 }.
If an expression does not evaluate to an object, then assignments to properties of that expression do not assign.
const val = 0;
val.x = 3;
// In strict mode, the code above throws, because one cannot assign properties to primitives.
console.log(val.x); // Prints undefined.
console.log(val); // Prints 0.
For more complex assignments, the destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.
Without destructuring, it takes multiple statements to extract values from arrays and objects
const foo = ["one", "two", "three"];
const one = foo[0];
const two = foo[1];
const three = foo[2];
With destructuring, you can extract multiple values into distinct variables using a single statement.
const [one, two, three] = "foo";
In general, assignments are used within a variable declaration (i.e., with const, let, or var) or as standalone statements.
// Declares a variable x and initializes it to the result of f().
// The result of the x = f() assignment expression is discarded.
let x = f();
x = g(); // Reassigns the variable x to the result of g().
However, like other expressions, assignment expressions like x = f() evaluate into a result value. Although this result value is usually not used, it can then be used by another expression.
Chaining assignments or nesting assignments in other expressions can result in surprising behavior. For this reason, some JavaScript style guides discourage chaining or nesting assignments. Nevertheless, assignment chaining and nesting may occur sometimes, so it is important to be able to understand how they work.
By chaining or nesting an assignment expression, its result can itself be assigned to another variable. It can be logged, it can be put inside an array literal or function call, and so on.
let x;
const y = (x = f()); // Or equivalently: const y = x = f();
console.log(y); // Logs the return value of the assignment x = f().
console.log(x = f()); // Logs the return value directly.
// An assignment expression can be nested in any place
// where expressions are generally allowed,
// such as array literals' elements or as function calls' arguments.
console.log([0, x = f(), 0]);
console.log(f(0, x = f(), 0));
The evaluation result matches the expression to the right of the = sign in the "Meaning" column of the table above. That means that x = f() evaluates into whatever f()'s result is, x += f() evaluates into the resulting sum x + f(), x **= f() evaluates into the resulting power x ** f(), and so on.
In the case of logical assignments, x &&= f(), x ||= f(), and x ??= f(), the return value is that of the logical operation without the assignment, so x && f(), x || f(), and x ?? f(), respectively.
When chaining these expressions without parentheses or other grouping operators like array literals, the assignment expressions are grouped right to left (they are right-associative), but they are evaluated left to right.
Note: That, for all assignment operators other than = itself, the resulting values are always based on the operands' values before the operation.
function f() {
console.log("F!");
return 2;
}
function g() {
console.log("G!");
return 3;
}
let x, y;
y = x = f();
y = [f(), x = g()];
x[f()] = g();