🧠 Variables, Data Types & Operators

Why JavaScript?

JavaScript is the only programming language that runs natively in every web browser. It's what makes a page react: a button that responds to a click, a form that validates as you type, a feed that loads more posts as you scroll. Since the arrival of Node.js, the same language also runs on servers — which is exactly why this bootcamp can take you across the entire stack without switching languages.

Today we stay on the ground floor: how JavaScript stores and manipulates data. Every interactive feature you'll ever build rests on the fundamentals in this lesson.

Adding JavaScript to HTML

Before code can run, the browser has to find it. There are three ways to attach JavaScript to a page — in rough order from "avoid" to "do this."

1. Inline (avoid)

<button onclick="alert('Hello!')">Click me</button>

👎 Mixes behavior into your markup and can't be reused. Fine for a throwaway demo, wrong for real projects.

2. Internal

<script>
    console.log('Hello, JavaScript!');
</script>

👍 Acceptable for small, page-specific snippets.

3. External (best)

<script src="script.js" defer></script>
<script type="module" src="app.js"></script>

👍👍 Reusable, cacheable, and keeps logic out of your HTML.

Variables: let, const & var

A variable is a labeled box you put a value in so you can refer to it by name later. JavaScript gives you three keywords to create one — but in modern code you'll use only two.

const — your default

const PI = 3.14159;
// PI = 3; // ❌ TypeError: Assignment to constant variable

// "const" locks the binding, not the contents:
const user = { name: "Ada" };
user.name = "Grace";  // ✅ allowed — same object, new property value
// user = {};          // ❌ not allowed — that's a new binding

💡 Rule of thumb: Declare everything const until the code forces you to reassign it. Then, and only then, switch it to let.

let — when a value changes

let score = 0;
score = score + 10;   // ✅ reassignment is the whole point

// Both let and const are block-scoped:
let x = 1;
if (true) {
    let x = 2;         // a different x, living only inside these braces
    console.log(x);    // 2
}
console.log(x);        // 1

var — the one to avoid

var x = 1;
if (true) {
    var x = 2;         // SAME x — var ignores block scope
}
console.log(x);        // 2  ← leaked out of the block

Data Types

Every value in JavaScript has a type. There are two families: primitives (simple, immutable values) and objects (collections that can hold many values).

The seven primitives

Strings & template literals

const firstName = "Ada";
const lastName  = "Lovelace";

// Template literals use backticks and ${ } to embed values:
const fullName = `${firstName} ${lastName}`;   // "Ada Lovelace"
const greeting = `Hello, ${fullName}! You have ${2 + 3} messages.`;

// Handy string methods:
"JavaScript".length;         // 10
"JavaScript".toUpperCase();  // "JAVASCRIPT"
"JavaScript".includes("Scr");// true
"JavaScript".slice(0, 4);    // "Java"

Object types

const person  = { name: "Ada", age: 36 };  // object
const numbers = [1, 2, 3, 4, 5];            // array (a kind of object)
const now     = new Date();                 // date object
function greet(name) { return `Hi ${name}`; } // functions are objects too

Type Conversion & Coercion

Conversion is when you change a type on purpose. Coercion is when JavaScript changes it for you, quietly, to make an operation work. Understanding both prevents a whole category of "why is this a string?!" bugs.

Explicit conversion (you're in control)

Number("123");   // 123
Number("abc");   // NaN  ("Not a Number")
String(123);     // "123"
Boolean("");     // false
Boolean("hi");   // true

Implicit coercion (JavaScript decides)

"5" + 3;   // "53"  ← + with a string means concatenation
"5" - 3;   // 2     ← - has no string meaning, so "5" becomes 5
true + 1;  // 2     ← true becomes 1

Operators

Arithmetic

10 + 3;   // 13   addition
10 - 3;   // 7    subtraction
10 * 3;   // 30   multiplication
10 / 3;   // 3.333…  division
10 % 3;   // 1    remainder (modulo) — great for "is it even?"
10 ** 3;  // 1000 exponentiation

Comparison — always use ===

5 == "5";   // true   loose equality coerces types (avoid)
5 === "5";  // false  strict equality checks type AND value (use this)
5 !== "5";  // true   strict inequality
7 > 3;      // true

⚠️ Important: Prefer === and !==. The loose == triggers coercion and produces surprises like 0 == "" being true.

Logical & nullish

true && false;   // false   AND — both must be true
true || false;   // true    OR  — at least one true
!true;           // false   NOT — flips the boolean

// Default values:
const name = userInput || "Guest";  // "" and 0 fall through to default
const count = value ?? 0;           // ?? only defaults on null/undefined

Ternary — a compact if/else

const age = 20;
const status = age >= 18 ? "adult" : "minor";   // "adult"

Checking Types

Use typeof to inspect a value's type — with two famous quirks to memorize.

typeof 42;          // "number"
typeof "hi";        // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"
typeof null;        // "object"   ← a historical bug, kept for compatibility
typeof [];          // "object"   ← arrays report as objects
typeof function(){};// "function"

// For the two quirks, use purpose-built checks:
Array.isArray([]);        // true
value === null;           // reliable null check

typeof null → "object"   // yes, really
Array.isArray([1,2]) → true

Practice & Quiz

function describeType(value) {
    // TODO: return "array", "null", or the typeof for everything else
}
console.log(describeType([1, 2]));   // should log: "array"
console.log(describeType(null));     // should log: "null"
console.log(describeType(42));       // should log: "number"

function describeType(value) {
    if (Array.isArray(value)) return "array";
    if (value === null) return "null";
    return typeof value;
}

function cToF(celsius) {
    const f = celsius * 9 / 5 + 32;
    return `${f.toFixed(2)}°F`;
}
console.log(cToF(100));  // "212.00°F"
console.log(cToF(37));   // "98.60°F"

Best Practices & Pitfalls

✅ Do

• Default to const; use let only when reassigning
• Always compare with === / !==
• Name variables clearly: isActive, userCount, MAX_SIZE
• Convert types explicitly when it matters

❌ Don't

• Write new code with var
• Rely on == and hope the coercion works out
• Compare with NaN using === — NaN === NaN is false; use Number.isNaN()

0.1 + 0.2;            // 0.30000000000000004
0.1 + 0.2 === 0.3;    // false!

Naming conventions

let firstName = "Ada";        // camelCase for variables & functions
const MAX_SIZE = 100;         // UPPER_SNAKE_CASE for fixed constants
class UserProfile {}          // PascalCase for classes
let isActive = true;          // is/has prefix for booleans

Summary

📚 Additional Resources

• MDN — JavaScript data types and structures
• MDN — Expressions and operators

🚀 What's Next?

Now that you can store and compare data, the next lesson gives your programs the power to make decisions and repeat work: Control Structures — Conditionals and Loops.