Variable, Data, Types and Value are Four pillars of Programming

Every program you write manipulates data. Before you learn loops, functions, or frameworks, you need to understand the four concepts that sit beneath all of them: variables, data, types, and values.

Variables

A variable is a named reference to a location in memory. You create one, give it a name, and store something inside it.

let name = "Alice";
const age = 30;
var isActive = true;

let, const, and var all create variables. The difference is scope and reassignability — const cannot be reassigned, let can, and var function-scopes (avoid it).

Variables are containers, not the data itself. Changing a variable changes what it points to, not what it holds:

let count = 1;
count = 2; // the variable now references a different value

Values

A value is the actual content stored in memory. "Alice" is a value. 30 is a value. true is a value.

Values have no name. They exist independently of variables:

console.log("Alice"); // the string "Alice" is a value used directly

When you assign a value to a variable, you create a binding:

let greeting = "Hello"; // "Hello" is the value, greeting is the variable

Two variables can reference the same value:

let a = [1, 2, 3];
let b = a; // b references the same array as a

Data

Data is the broader concept — the raw information your program processes. A value is a specific instance of data. Data includes structure, not just content:

const user = {
  name: "Alice",
  age: 30,
  scores: [95, 87, 92],
};

The data here is the entire object: names, ages, scores. Each field holds a value. Together they represent something meaningful.

Data comes in different shapes:

• Primitives — single, immutable values (strings, numbers, booleans)
• Collections — groups of values (arrays, objects, maps)
• Structures — organized data with behavior (classes, functions)

Types

A type tells the program what a value is and what operations are valid on it. Adding two numbers works. Adding a number to a boolean does not.

let a = 5;
let b = "5";

console.log(a + a); // 10 (number addition)
console.log(b + b); // "55" (string concatenation)

Same syntax, different behavior — because the type determines the operation.

JavaScript has two categories of types:

Primitives (immutable, compared by value):

typeof "hello"; // "string"
typeof 42; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (a known bug in JavaScript)
typeof Symbol(); // "symbol"
typeof 10n; // "bigint"

Objects (mutable, compared by reference):

typeof {}; // "object"
typeof []; // "object"
typeof function () {}; // "function"

The typeof operator returns a string indicating the type. Use it when you need to know what you are working with.

How the Four Pillars Connect

A variable holds a value. A value has a type. Together they represent data.

let score = 95;
//   ^variable  ^value
//   score's type is "number"
//   this represents data: a test score

This distinction matters when values are passed between functions:

function double(n) {
  n = n * 2;
  return n;
}

let x = 10;
double(x);
console.log(x); // still 10 — primitives are copied by value

Primitives are copied. Objects are shared:

function addItem(list) {
  list.push(4);
}

let items = [1, 2, 3];
addItem(items);
console.log(items); // [1, 2, 3, 4] — arrays are passed by reference

Understanding whether you are working with a primitive or an object changes how you write functions, how you compare values, and how you avoid bugs.

Type Coercion

JavaScript automatically converts types in certain contexts. This is called type coercion, and it is a common source of bugs:

console.log("5" + 3); // "53" (number coerced to string)
console.log("5" - 3); // 2   (string coerced to number)
console.log(true + 1); // 2   (boolean coerced to number)
console.log(false + ""); // "false" (boolean coerced to string)

The rules are inconsistent. Use strict equality (===) to avoid coercion surprises:

console.log(0 == false); // true  (coercion)
console.log(0 === false); // false (no coercion, different types)

Rule: know the type of every value you work with. When in doubt, use typeof and ===.

Summary

• Variable — a named reference to a value in memory
• Value — the actual content stored (a string, number, object, etc.)
• Type — the category that determines what operations are valid
• Data — the broader concept: values organized into meaningful structures

Start here. Every bug you encounter as a beginner traces back to a misunderstanding of one of these four concepts. Master them first.

---

Next steps: once you are comfortable with variables and types, move on to functions — how to group logic into reusable blocks — and control flow — how to make decisions with conditionals.