Values and Data Types — The Stuff Your JavaScript Program Is Made Of

"If a variable falls in a forest and no one logs it, does it still have a type?" — Probably. Also, 100% yes, it does.

You just finished getting your environment battle-ready: saving sketches, managing assets folders, and wrestling with setup gremlins. Good job! Now let’s turn the machine into something that actually understands what you mean when you say "x = 5" and doesn't angrily throw a TypeError because you tried to add a string and a number like it’s no big deal.

This lesson builds on those setup habits: knowing how values behave will help you debug faster (remember troubleshooting!), keep your saved sketches working across browsers, and prevent broken assets when you accidentally pass a function where an image path was expected.

---

Quick roadmap (because clarity is sexy)

1. What is a value and what is a type?
2. The important built-in types in JavaScript (with examples)
3. Primitives vs. objects: copies vs. references
4. Quirks you'll trip over (null, NaN, typeof, == vs ===)
5. Small exercises to practice in your sketch file

---

1) What's a value? What's a type?

• Value: the actual thing stored (like 42, "hello", [1,2,3]).
• Type: the label that describes what kind of thing that value is (Number, String, Boolean, Object...).

Think of values as luggage and types as the luggage tags. If you hand the airport a fragile package (a string pretending to be a number), security will not be impressed.

---

2) The important built-in types (cheat-sheet + examples)

Primitives (immutable, copied by value):

• Number — numeric values (integers, floats)
• String — text in quotes
• Boolean — true / false
• null — explicit “no value”
• undefined — variable exists but has no assigned value
• BigInt — very large integers (append n: 123n)
• Symbol — unique identifiers (rare in basic CS30 work)

Objects (mutable, copied by reference):

• Object — { key: value }
• Array — [1, 2, 3]
• Function — function() { ... } (yes, functions are objects too)

Code demo (try this in your console or a p5.js sketch):

console.log(typeof 3);            // "number"
console.log(typeof "hello");    // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object"  <-- historic JS bug
console.log(typeof [1,2,3]);      // "object"  (Array is an object)
console.log(Array.isArray([1,2])) // true

Expert take: typeof null === 'object' is a historical mistake we live with. Don’t let it haunt you.

---

3) Primitives vs Objects — the postcard vs suitcase analogy

• Primitives = postcards. When you hand someone the postcard, they get their own copy; changing yours does not change their copy.
• Objects = suitcases. When you hand someone the suitcase, they have the same suitcase — if they add clothes, you’ll see the changes.

Demo:

let a = 10;
let b = a;   // copy by value
b = 20;
console.log(a); // 10 — original unchanged

let arr1 = [1,2,3];
let arr2 = arr1;  // copy reference
arr2.push(4);
console.log(arr1); // [1,2,3,4] — mutated!

Why this matters: when you pass objects into functions (e.g., passing an image object, or a settings object in your sketch), the function can mutate your original unless you intentionally clone it.

---

4) Quirks and gotchas (the stuff people google at 2 AM)

• null vs undefined

  • undefined: the variable exists but you didn’t assign anything.
  • null: you explicitly assigned "no value".

• NaN (Not-a-Number)

  • typeof NaN === "number" (another party trick). NaN results from invalid numeric operations.
  • Use Number.isNaN(x) to test properly.

• Equality: == vs ===

  • == does type coercion (tries to be friendly and convert types).
  • === is strict equality — checks type and value. Prefer ===.

Examples:

console.log(0 == false);   // true  (coerces)
console.log(0 === false);  // false (different types)
console.log(null == undefined);   // true
console.log(null === undefined);  // false

• typeof function returns "function" (a special case), but arrays are objects: use Array.isArray.

---

5) Practical mini-examples you’ll actually use in CS30

• Checking a value type before using it (defensive programming):

function drawImageIfLoaded(img) {
  if (img && typeof img === 'object') {
    image(img, 0, 0);
  } else {
    console.warn('Expected an image object — found:', img);
  }
}

• Clone an array to avoid surprise mutations:

let copy = originalArray.slice(); // or [...originalArray]

• Avoid saving functions in your sketch's JSON when sharing assets; functions don’t serialize. Remember when we talked about saving/sharing sketches? This is why: only data (values) serialize cleanly.

---

Quick reference table

Type	typeof	Mutable?	Example
Number	"number"	No	3.14
String	"string"	No	"hi"
Boolean	"boolean"	No	true
null	"object"	N/A	null
undefined	"undefined"	N/A	undefined
Array	"object"	Yes	[1,2,3]
Object	"object"	Yes	{x:1}
Function	"function"	Yes	() => {}

---

Exercises (try them in your p5.js sketch)

1. Create an array and a copy, mutate the copy, and log both arrays to see references in action.
2. Write a function that accepts either a number or a string. Use typeof to branch: if number, square it; if string, uppercase it.
3. Intentionally create a NaN (e.g., 0/0), then test it correctly with Number.isNaN.

Try these while saving your sketch and assets — watch what gets serialized and what throws errors. That first setup troubleshooting knowledge will save you from false positives.

---

Final verdict (the takeaways you should tattoo somewhere)

• Know your types. Mistakes often come from passing the wrong kind of value.
• Prefer ===. Less magic, fewer midnight bugs.
• Objects are references. Clone when you need isolation.
• null !== undefined. They may look similar but behave differently.

Pro tip: When in doubt, console.log(value, typeof value). The console doesn’t judge. It just shows receipts of your mistakes.

Go experiment — write tiny functions, intentionally break things, and then fix them. The best way to learn JS types is to see how they fail in real sketches. Bring that curiosity, and your future self (and graders) will thank you.