JavaScript / Basic: values and browser foundations / Lesson 1

JavaScript values and execution environments

Build a reliable model of values, bindings, and host APIs before adding page behavior. Use small invoice examples to distinguish language rules from browser and Node facilities.

About 4 min readContent reviewed 2026-10-25

On this page

Lesson goals

Identify primitive and object values.
Explain bindings and explicit conversion.
Separate ECMAScript from host APIs.

The language runs inside a host

JavaScript is a language implemented by an engine and embedded in an environment. ECMAScript defines values, operators, functions, and standard objects. A browser supplies documents, user events, rendering, and many web APIs; Node supplies its own process and file-system interfaces. A shared name such as fetch does not mean every surrounding capability is identical. Before copying an example, identify its assumed host and version. This course uses Node only to validate portable language examples, while browser examples explain page behavior. It does not teach server deployment or treat document as a universal language global.

Classify a value before operating on it

The primitive types include undefined, null, Boolean, Number, BigInt, String, and Symbol. Objects include arrays and functions, although typeof reports functions specially. A missing property commonly evaluates to undefined; null often represents an intentionally absent value by application convention. typeof null returns "object", a historical behavior that does not make null an object you can read properties from. Inspect actual values at boundaries rather than inferring type from a variable name. A field called quantity may still contain a string because form controls and JSON producers follow their own contracts.

javascript An explicit input conversion

const invoice = { quantity: "3", unitCents: 250 };
const quantity = Number(invoice.quantity);
console.log(typeof invoice.quantity, typeof quantity);
console.log(quantity * invoice.unitCents);

Expected output

string number
750

The original property stays a string. The separate numeric binding makes multiplication intent visible and produces 750 cents.

Bindings are names, not boxes with fixed types

A binding associates a name with a value. Prefer const when the binding will not be reassigned and let when reassignment is part of the algorithm. const prevents rebinding, not mutation of an object reached through that binding. Values have types; a let binding can later refer to a different type, though unnecessary type changes make reasoning harder. Treat names as part of the contract: quantityText and quantity communicate a boundary more clearly than reusing data for both. Keep parsing separate from business calculations so invalid input cannot silently acquire a plausible total.

Primitive copies and shared object identity

Assigning an object to another binding does not clone its properties. Both bindings can refer to the same object, so a mutation through either is observable through both. Assigning a primitive gives another binding that can change independently when reassigned. This distinction matters when a UI edits a draft invoice: an alias can modify the original before Save is pressed. Use an intentional copy strategy for the required depth and document which object owns a change. A shallow spread copy separates top-level properties but still shares nested objects, a topic revisited in the collection chapter.

javascript Identity and a shallow copy

const original = { seats: 2 };
const alias = original;
alias.seats = 1;
const copy = { ...original };
copy.seats = 0;
console.log(original.seats, alias === original, copy === original);

Expected output

1 true false

The alias changes the original. The new top-level object has independent seats, but this example contains no nested state.

Validate the boundary and state the outcome

Conversion is not validation. Number("") is zero, and Number("three") is NaN, so a numeric result must still be checked against the domain. An invoice quantity might require an integer from one through twenty. Decide how whitespace, empty input, and missing input are handled before computing. Log compact diagnostic facts such as type and a synthetic example, not personal invoices. Build a habit of predicting the output before running each example, then explain any discrepancy in terms of a language rule or host assumption. That habit scales better than memorizing console surprises.

Common errors and fixes

Reading document in a portable language example

Why it happens: A browser API is mistaken for a language global.
How to fix it: Run DOM code in a browser and isolate portable calculation code.
Prevent it next time: Label every example with its host assumptions.

Assuming const freezes an object

Why it happens: Binding assignment and object mutation are conflated.
How to fix it: Define ownership and copy state at the necessary depth.
Prevent it next time: Review shared references before editing drafts.

Treating conversion as proof of valid input

Why it happens: Empty strings and NaN are not considered.
How to fix it: Check emptiness, finiteness, integer status, and domain limits.
Prevent it next time: Test missing, empty, ordinary, and boundary values.

Check your understanding

1. A quantity field contains "4" and the price is 125 cents. What should cross into the calculator?

Show worked solution

Validate the nonempty text, convert to Number, require a valid integer quantity, and pass numeric 4 and 125. The expected total is 500 cents. Keeping text out of the calculator prevents accidental concatenation and makes an invalid-input path explicit.

2. Two variables refer to one basket object. One changes its count. What does the other see?