Modern Variables and Objects: let, const, and Destructuring

let count = 0;      // reassignable, block-scoped
const MAX = 100;     // NOT reassignable, block-scoped
var oldStyle = 'x';  // function-scoped — avoid in modern code

let and const are block-scoped — confined to the nearest { }, unlike the older var, which is function-scoped and a real source of bugs inside loops and conditionals. Default to const; only reach for let when a variable genuinely needs to be reassigned later.

const record = { name: 'Acme' };
record.name = 'Globomantics'; // allowed — the object's contents can change
record = {};                   // NOT allowed — reassigning the variable itself fails

const only prevents the variable from being reassigned to point at something else — it does not freeze the object's internal properties. This distinction matters a lot once Module 4's reactivity and Lesson 7's immutability patterns come into play.

An object is a way of grouping related information together under one name, as a set of key: value pairs:

const account = {
    name: 'ABC Trading',
    industry: 'Banking',
};

Reading a specific piece of that information back out uses dot notation — the object's name, a dot, then the key you want:

account.name     // 'ABC Trading'
account.industry // 'Banking'

An object is genuinely just a labeled bundle of values — name and industry here are no different in kind from the plain let/const variables from the previous lesson, just grouped together because they describe the same thing (one Account).

Every key written so far has been a fixed, literal name (name, industry). Sometimes the key itself needs to come from a variable instead — wrapping the key in square brackets tells JavaScript "use this variable's value as the key, not its name":

const fieldName = 'industry';
const filters = { [fieldName]: 'Banking' };
// identical to writing { industry: 'Banking' } directly —
// [fieldName] is replaced with whatever string fieldName holds

This is called a computed property name. It matters specifically for LWC because imported field references (Module 6) are variables holding a field's API name — so { [ACCOUNT_INDUSTRY_FIELD.fieldApiName]: 'Banking' } builds an object keyed by whatever that field actually is, without hardcoding the field name as a literal string.

Destructuring is a shortcut for pulling one or more values out of an object (or array) in a single statement, instead of writing account.name, account.industry on separate lines:

const account = { name: 'ABC Trading', industry: 'Banking' };

// Without destructuring:
const name = account.name;
const industry = account.industry;

// The same result, with object destructuring:
const { name, industry } = account;

Both versions produce identical name and industry variables — destructuring is purely a more concise way to write the same dot-notation extraction, not a different concept.

// Array destructuring works the same way, but by position instead of key:
const [first, second] = ['ABC Trading', 'XYZ Consulting'];

Destructuring is used constantly in LWC — most commonly to pull data and error out of a @wire result (const { data, error } = wireResult;), a pattern Module 6 relies on directly.

LWC class fields and Apex/wire responses are almost always objects. Destructuring lets you extract exactly what you need in one clean line, instead of repeatedly writing wireResult.data, wireResult.error throughout a method.