Values, Variables, and Types

Values, Variables, and Types | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Values, Variables, and Types step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Distinguish primitive values from objects and references.
Choose const or let according to whether a binding changes.
Normalize external strings at a clear boundary.
Handle null, undefined, NaN, and invalid object shapes deliberately.

DEEP EXPLANATION

Build the complete mental model

A variable is a binding, not a box with a permanent type

JavaScript values have types; bindings point to values. const prevents reassignment of the binding, but it does not freeze an object. let is appropriate when the binding must later point to a different value. Prefer const until reassignment is part of the algorithm because it narrows the reader's possibilities. Primitive values such as strings and numbers are immutable, while objects and arrays can expose mutable properties through shared references.

External data needs conversion and validation

Form controls, URL parameters, storage, and many API fields arrive as strings or unknown data. Number converts the whole input, while parseInt and parseFloat accept a numeric prefix and may hide trailing mistakes. Conversion and validation are separate: Number('') is zero, and typeof NaN is number. Decide the accepted grammar, convert once, then use Number.isFinite, Number.isInteger, ranges, and object-shape checks to enforce the actual contract.

Absence has more than one representation

undefined usually means no value was supplied or found; null is an intentional empty value by convention. NaN is a numeric result representing an invalid number operation and is not equal to itself. Avoid broad truthiness checks when zero, false, or an empty string are valid. Use precise comparisons and defaults so the code documents which values mean missing, invalid, or deliberately empty.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Normalize a form quantity

Trim first, reject empty input, convert the entire string, and enforce the domain range.

function parseQuantity(raw) {
  const text = String(raw).trim();
  if (text === "") throw new TypeError("Quantity is required");
  const value = Number(text);
  if (!Number.isInteger(value) || value < 1 || value > 99) {
    throw new RangeError("Quantity must be an integer from 1 to 99");
  }
  return value;
}

Example 2: Observe shared references

The bindings are constant, but both point to the same object. A deliberate copy creates a distinct update.

const original = { title: "JS", progress: 20 };
const alias = original;
alias.progress = 40;

const updated = { ...original, progress: 60 };
console.log(original.progress, updated.progress); // 40, 60

How to trace this lesson

Write the type and exact value produced at every input boundary.
Mark whether each binding can be reassigned and whether its object can mutate.
Separate conversion failure from domain-validation failure.
Test missing, empty, zero, negative, fractional, and malformed values.

Common mistakes and corrections

Assuming const makes an object immutable.: Use immutable update patterns or Object.freeze when that is the intended contract.
Using parseInt for every numeric field.: Choose conversion behavior deliberately; reject trailing text when the whole input must be numeric.
Treating every falsy value as missing.: Check nullish or invalid values precisely so valid zero and false survive.

PRACTICE LADDER

Move from recognition to independent work

1
Predict typeof for eight primitive and object values.
2
Write a strict price-in-cents parser.
3
Demonstrate aliasing and a non-mutating object update.
4
Validate an unknown learner record without trusting its shape.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Types describe the operations a value supports

Strings, numbers, booleans, bigint, symbols, undefined, and null are primitive values. Objects group mutable properties and are accessed through references. Use typeof as one clue, but remember its historical edge cases, including typeof null returning object. Validate the actual contract you need instead of relying on one broad label.

Conversion belongs at system boundaries

Form fields, URL parameters, and storage values usually arrive as strings. Convert them once, check Number.isFinite or another precise condition, and let the rest of the program work with a stable type. Silent coercion deep inside a calculation makes both debugging and error messages harder.

RUNNABLE EXAMPLE

Change one assumption at a time

Run the conversion with empty text, whitespace, and a word. Compare Number(), parseFloat(), and Number.isFinite() before choosing a rule.

const priceText = "19.95";
const quantity = 2;
const price = Number(priceText);
const total = price * quantity;

console.log({
  total,
  valid: Number.isFinite(total),
  label: `$${total.toFixed(2)}`,
});

const priceText = "19.95";
const quantity = 2;
const price = Number(priceText);
const total = price * quantity;

console.log({
  total,
  valid: Number.isFinite(total),
  label: `$${total.toFixed(2)}`,
});

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const price = "12.50";
console.log(price + 2);

Reveal repair and explanation

const price = Number("12.50");
if (!Number.isFinite(price)) throw new TypeError("Invalid price");
console.log(price + 2);

The plus operator concatenates when one operand is a string. Convert and validate the boundary value before arithmetic.

INDEPENDENT LAB

Build without copying the example

Create a normalizeQuantity function that accepts unknown input and returns a positive integer or throws a useful error.

function normalizeQuantity(raw) {
  // Convert and validate raw.
}

function normalizeQuantity(raw) {
  // Convert and validate raw.
}

Press Run to execute your code.

Self-review checklist Valid numeric strings become integers. Empty, fractional, negative, and nonnumeric values are handled deliberately. Tests document both accepted and rejected examples.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which check rejects NaN and Infinity? Number.isFinite(value) Boolean(value) parseInt(value)

2. Why convert input near the boundary? The remaining program can rely on a stable type It makes every object immutable It prevents all runtime errors

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering