JavaScript Assignment

JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript variables. The most basic is the simple assignment operator (=), but JavaScript offers several compound assignment operators for more concise code.

Common Assignment Operators

These operators perform an operation and then assign the result back to the variable.

Operator	Example	Description (Shorthand for)
=	x = y	Assigns the value of y to x.
+=	x += y	Equivalent to x = x + y. Adds y to x and assigns the result to x.
-=	x -= y	Equivalent to x = x - y. Subtracts y from x and assigns the result to x.
*=	x *= y	Equivalent to x = x * y. Multiplies x by y and assigns the result to x.
/=	x /= y	Equivalent to x = x / y. Divides x by y and assigns the result to x.
%=	x %= y	Equivalent to x = x % y. Assigns the remainder of x divided by y to x.
**=	x **= y	Equivalent to x = x ** y. Raises x to the power of y and assigns the result to x (ES2016).

Examples:

let x = 10;
let y = 5;

// Simple assignment
let z = 20;

// Addition assignment
let sum = 10;
sum += 5; // sum is now 15 (10 + 5)

// Subtraction assignment
let difference = 10;
difference -= 3; // difference is now 7 (10 - 3)

// Multiplication assignment
let product = 10;
product *= 2; // product is now 20 (10 * 2)

// Division assignment
let quotient = 10;
quotient /= 2; // quotient is now 5 (10 / 2)

// Remainder assignment
let remainder = 10;
remainder %= 3; // remainder is now 1 (10 % 3)

// Exponentiation assignment (ES2016)
let power = 2;
power **= 3; // power is now 8 (2 * 2 * 2)

Logical Assignment Operators (ES2021)

Modern JavaScript (ES2021+) introduced logical assignment operators, which combine logical operations with assignment. They assign a value to a variable only if a certain logical condition is met.

Operator	Example	Description
&&=	x &&= y	Logical AND assignment. Assigns y to x only if x is truthy. (Short-circuits: y is not evaluated if x is falsy). Equivalent to x = x && y or if (x) { x = y; }.
||=	x ||= y	Logical OR assignment. Assigns y to x only if x is falsy. (Short-circuits: y is not evaluated if x is truthy). Equivalent to x = x || y or if (!x) { x = y; }.
??=	x ??= y	Nullish coalescing assignment. Assigns y to x only if x is nullish (null or undefined). (Short-circuits: y is not evaluated if x is not nullish). Equivalent to x = x ?? y or if (x === null || x === undefined) { x = y; }.

Examples:

// Logical AND assignment (&&=)
let user = { name: "Alice" };
user.name &&= "Bob"; // user.name was truthy ("Alice"), so it's assigned "Bob". user is { name: "Bob" }

let settings = null;
settings &&= { theme: "dark" }; // settings was falsy (null), so no assignment. settings is still null.

// Logical OR assignment (||=)
let options = null;
options ||= { default: true }; // options was falsy (null), so it's assigned { default: true }.

let config = { mode: "prod" };
config ||= { default: true }; // config was truthy, so no assignment. config is still { mode: "prod" }.

// Nullish coalescing assignment (??=)
let gameSettings = { difficulty: null };
gameSettings.difficulty ??= "medium"; // gameSettings.difficulty was null (nullish), assigned "medium".
                                  // gameSettings is { difficulty: "medium" }

let score = 0; // 0 is not nullish
score ??= 100; // score was not nullish (0), so no assignment. score is still 0.

These logical assignment operators provide concise ways to conditionally assign values, often used for setting default values or updating properties based on their current state.