JavaScript Variables, Data Types and Functions Explained

Take a snack vending machine. A customer inserts 200 cents, the snack costs 175, and the machine must work out whether to vend and how much change to return. Two things go wrong in the first draft of almost every version of this program: the amounts are stored as strings because they came from a form, so "100" + "100" becomes "100100", and the price is stored as 1.75, so arithmetic produces numbers with tails like 0.30000000000000004. Both are questions about types, and that is where we start.

let, const and var: three ways to name a value

Use const by default. It stops you from rebinding the name, which makes code easier to follow because a const always means the same thing in its scope. Use let for values that genuinely change, such as a running total. Avoid var in new code: it ignores block boundaries and is initialised as undefined before its line runs, which hides mistakes.

// vending.js - one snack machine
const MACHINE_ID = "VM-204";
let coinsInserted = 0;           // changes as coins arrive
const priceCents = 175;

console.log(typeof MACHINE_ID, typeof coinsInserted, typeof true, typeof undefined, typeof null);
console.log(typeof {}, typeof [], typeof (() => 1), typeof 10n, typeof Symbol("s"));

coinsInserted += 100;
coinsInserted += 100;
console.log(`Inserted ${coinsInserted} cents, price ${priceCents}`);
console.log(`Change: ${coinsInserted - priceCents} cents`);

try {
  MACHINE_ID = "VM-999";
} catch (err) {
  console.log(err.name + ": " + err.message);
}

string number boolean undefined object
object object function bigint symbol
Inserted 200 cents, price 175
Change: 25 cents
TypeError: Assignment to constant variable.

Two of those typeof results are famous quirks. typeof null is "object", a historical mistake that cannot be fixed without breaking the web, so test for null with value === null. And arrays report "object", so use Array.isArray(value). Note that const stops reassignment only: a const array or object can still be mutated, which the next lesson covers.

Primitive types and the coercion that surprises people

JavaScript converts between types automatically in some situations, which is called coercion. The + operator prefers text if either side is a string, while - and * always do arithmetic. The loose equality operator == coerces before comparing, which is why most style guides say to use strict equality ===, which never converts. The one deliberate exception many teams allow is value == null, which is true for both null and undefined.

console.log(0.1 + 0.2);
console.log("5" + 3, "5" - 3, "5" * "2");
console.log(1 == "1", 1 === "1", null == undefined, null === undefined);
console.log(Number("12abc"), Number(""), Number(" 42 "), parseInt("12abc", 10));
console.log(NaN === NaN, Number.isNaN(NaN), typeof NaN);

for (const v of [0, "", "0", [], {}, null, undefined]) {
  console.log(String(JSON.stringify(v)).padEnd(10), Boolean(v));
}

console.log(0 || 5, 0 ?? 5);          // || replaces any falsy value, ?? only null/undefined
console.log("" || "n/a", ("" ?? "n/a").length);

0.30000000000000004
53 2 10
true false true false
NaN 0 42 12
false true number
0          false
""         false
"0"        true
[]         true
{}         true
null       false
undefined  false
5 0
n/a 0

Read the truthiness list carefully. The empty array and empty object are truthy, while 0, "", null, undefined and NaN are falsy. That is why qty || 10 is a bug when 0 is a legitimate quantity: it replaces the zero. The nullish operator ?? only replaces null and undefined, so qty ?? 10 keeps the zero. As for the money problem, the vending machine stores integer cents, which sidesteps floating-point drift entirely and converts to dollars only for display.

Functions, closures and scope

A function can be declared with the function keyword, or written as an arrow function and stored in a const. Declarations are hoisted, so you can call them above where they appear; const and let are hoisted too but sit in a "temporal dead zone" until their line runs, and touching them early throws a ReferenceError. Parameters can have defaults, which apply only when the argument is undefined.

const centsToText = (cents) => "$" + (cents / 100).toFixed(2);

function dispense(balance, price, stock = 5) {
  if (stock === 0) return { ok: false, reason: "sold out" };
  if (balance < price) return { ok: false, reason: `need ${centsToText(price - balance)} more` };
  return { ok: true, change: balance - price };
}

console.log(dispense(200, 175));
console.log(dispense(100, 175));
console.log(dispense(500, 175, 0));

function makeSlot(startStock) {
  let stock = startStock;            // hidden: only the two methods can reach it
  return {
    vend() {
      if (stock === 0) return false;
      stock -= 1;
      return true;
    },
    left: () => stock,
  };
}
const slot = makeSlot(2);
console.log(slot.vend(), slot.vend(), slot.vend(), slot.left());

console.log(label("early"));         // works: declarations are hoisted
function label(x) { return "slot " + x; }

try {
  console.log(total);
  let total = 1;
} catch (e) {
  console.log(e.name + ": " + e.message);
}

var handlers = [];
for (var i = 0; i < 3; i++) handlers.push(() => i);
console.log(handlers.map((h) => h()));
const handlers2 = [];
for (let j = 0; j < 3; j++) handlers2.push(() => j);
console.log(handlers2.map((h) => h()));

{ ok: true, change: 25 }
{ ok: false, reason: 'need $0.75 more' }
{ ok: false, reason: 'sold out' }
true true false 0
slot early
ReferenceError: Cannot access 'total' before initialization
[ 3, 3, 3 ]
[ 0, 1, 2 ]

makeSlot shows a closure: the returned vend and left functions keep access to stock even after makeSlot has finished, and nothing else can read or change it. That is how JavaScript does private state without classes. The last two loops show why var is discouraged. A var loop variable is one shared variable, so by the time the callbacks run it is already 3. A let loop variable is created fresh per iteration, so each callback remembers its own value.

Common mistakes and the errors they produce

• Reassigning a `const`. Throws TypeError: Assignment to constant variable. Use let if the value truly changes.
• Using a variable before its `let`/`const` line. Throws ReferenceError: Cannot access 'total' before initialization.
• Misspelling a variable. Reading an undeclared name throws ReferenceError: name is not defined, but assigning to one in sloppy mode silently creates a global. Add "use strict" or use modules, which are strict by default.
• Forgetting `return`. The function gives back undefined, and a later line fails with TypeError: Cannot read properties of undefined.
• Comparing with `==`. "0" == false is true. Use === unless you mean == null.
• Doing arithmetic on form values. input.value is always a string, so "100" + "100" is "100100". Convert with Number() first and check Number.isNaN.

How this shows up in real projects and interviews

In real code, const and strict equality are enforced by linters, and money is almost always kept in the smallest unit as an integer. Closures are everywhere: React hooks, event handlers and module patterns all rely on them. Interviewers love the var in a loop question, typeof null, the output of [] + {}-style coercions, and "what is a closure", so be ready to answer with a concrete example like the vending slot rather than a definition. Next, the structures that hold real data: objects, arrays and array methods.