JavaScript Assignment

Assignment operators store values in variables. The basic one is =, which you have used since the first lesson. The rest are shortcuts for the most common thing programs do: take a variable, change it a bit, and store the result back in the same variable.

// The Assignment Operators

Given x = 10 and y = 5, here is what each operator leaves in x:

The first seven are the everyday ones. The last three are newer and need the idea of "truthy" and "falsy", explained further down.

// Simple Assignment: =

= works out the value on its right and stores it in the variable on its left. The right side can be any expression:

let y = 4;
let x = 10 + y;
console.log(x);

An assignment is itself an expression: it produces the value that was assigned. That is what makes a chained assignment work, where the value is passed right to left:

let a, b;
a = b = 5;          // b = 5 happens first and produces 5, then a = 5
console.log(a, b);

You will rarely need to write that yourself, but you will see it, and the same idea explains let y = x &&= 10 further down.

// Compound Assignment

Each compound operator does its math using the variable's current value, then stores the result back in the same variable. Follow n through each line:

let n = 10;
n += 5;    // n = 10 + 5   → 15
n -= 3;    // n = 15 - 3   → 12
n *= 2;    // n = 12 * 2   → 24
n /= 4;    // n = 24 / 4   → 6
n %= 4;    // n = 6 % 4    → 2
n **= 3;   // n = 2 ** 3   → 8
console.log(n);

These show up everywhere in real programs:

// A running total, like a shopping cart
let total = 0;
total += 25.00;
total += 14.99;
total += 8.50;
console.log(total);

// Losing health in a game
let health = 100;
health -= 15;
health -= 15;
console.log(health);

// Doubling a score with a power-up
let score = 340;
score *= 2;
console.log(score);

// String Assignment

Two assignment operators work on strings: = stores a string, and += adds text onto the end of one. Building text up piece by piece is very common:

let text = "Hello";
text += ", ";
text += "World";
text += "!";
console.log(text);

The other compound operators (-=, *= and so on) have no meaning for text. On a string like "Hello" they give NaN.

// Truthy and Falsy

The last three assignment operators decide whether to assign based on whether a value is truthy or falsy. When JavaScript needs a true/false answer from a value that is not a boolean, it treats a few special values as false. These are the falsy values, and there are exactly eight:

Everything else is truthy. That includes some values people often assume are falsy:

• "0": a string containing a zero is not empty, so it is truthy
• "false": a string with letters in it is truthy
• []: an empty array is truthy
• {}: an empty object is truthy

Truthy and falsy come up again and again: in if statements, logical operators, and loops. JS Booleans covers them in depth.

// Logical Assignment (ES2021)

These three operators only assign under a condition. They are handy for setting default values without writing an if.

&&= : assign if truthy

x &&= 10 means "if x is truthy, replace it with 10; otherwise leave it alone":

Because an assignment produces a value, you can also capture the result: let y = x &&= 10; puts the final value of x into y as well.

||= : assign if falsy

x ||= 10 is the opposite: "if x is falsy, replace it with 10". Truthy values are left alone:

let a = false;     a ||= 10;    // 10
let b = null;      b ||= 10;    // 10
let c = undefined; c ||= 10;    // 10
let d = true;      d ||= 10;    // stays true
let e = 5;         e ||= 10;    // stays 5
console.log(a, b, c, d, e);

??= : assign if null or undefined

x ??= 10 is stricter: it only replaces null or undefined, meaning "there is no value here yet". Every other value, including 0, "", and false, is kept:

let a;             a ??= 10;    // undefined, so 10
let b = null;      b ??= 10;    // null, so 10
let c = 0;         c ??= 10;    // stays 0
let d = 7;         d ??= 10;    // stays 7
console.log(a, b, c, d);

// Two More You Will See

Two more symbols often get listed alongside the assignment operators. You will learn each properly later, but here is what they look like so they do not surprise you.

The colon in objects. Inside an object's curly braces, a colon assigns a value to a property: {x: 45} creates an object whose x property holds 45. It is not a standalone operator; it only works in object syntax.

The spread operator ... splits something with many parts (an array, or a string's characters) into separate values:

let text = "12345";
console.log(Math.min(...text));   // like Math.min("1","2","3","4","5")
console.log(Math.max(...text));

// Quick Check

let msg = "Level";
msg += " ";
msg += 3;
console.log(msg);

// Try It

▶ Open Playground

1. Click Open Playground. Make score -= 10; run three times in all. Predict the result, then click Run
2. Build a sentence: declare an empty string and add words to it with +=, remembering the spaces. Log it
3. Add let x = 5; x =+ 3; and log x. Explain what happened
4. Declare let lives = 0; Try lives ||= 3 and log it. Reset to 0, try lives ??= 3, and compare