Types of Data | HAP's Learning Lab: JavaScript Foundations

What You'll Learn at This Station

HAP's Discovery: Not all data is created equal! JavaScript has different types of data, and they behave differently. I learned the hard way that "5" (a string) and 5 (a number) are NOT the same thing. Here are the three types I use most:

📝 Strings

"Text"

Any text wrapped in quotes. Single quotes, double quotes, or backticks. Used for names, messages, and any textual data.

🔢 Numbers

42

Numeric values for math. Integers like 100 or decimals like 3.14. No quotes around them!

✓✗ Booleans

true/false

Only two values: true or false. Perfect for yes/no questions and conditions.

HAP surrounded by tangled code with an 'oops' expression

HAP's Confession:

I assumed "5" was a number because it looked like a number. But typeof "5" showed me it was a string. The quotes matter!
I spent 20 minutes debugging why "5" + 1 gave me "51". Grace was right—I needed to verify my assumptions. 😳
I kept forgetting that booleans don't have quotes. "true" is a string, but true (no quotes) is a boolean.

The Three Main Types

Here's how I declare each type in my Robot ID Card. Notice how typeof reveals what type each value actually is:

Strings, numbers, and booleans:

// The three data types I use most
const robotName = "HyBit A. ProtoBot";   // string - text
const creationYear = 2024;                // number - numeric value
const isLearning = true;                  // boolean - true or false

// Check your types with typeof!
console.log(typeof robotName);     // "string"
console.log(typeof creationYear);  // "number"
console.log(typeof isLearning);    // "boolean"

The typeof operator is like asking JavaScript "What kind of data is this?" It always tells you the truth!

Strings for Text

Names, messages, labels—anything textual. Always wrapped in quotes (single, double, or backticks).

Numbers for Math

Quantities, counts, measurements. NO quotes. JavaScript handles both integers and decimals as "number" type.

Booleans for Logic

Yes/no, on/off, true/false. Only two possible values. Great for conditions and flags.

typeof for Checking

When confused, ask! typeof myVariable tells you exactly what type you're dealing with.

Strings and Quotes

Strings are text wrapped in quotes. JavaScript gives you three options, and they're (mostly) interchangeable:

Three ways to write strings:

// Strings can use single quotes, double quotes, or backticks
const name1 = 'HAP';           // single quotes
const name2 = "HAP";           // double quotes - same thing!
const name3 = `HAP`;           // backticks - special powers!

// All three produce the same result
console.log(name1 === name2);  // true
console.log(name2 === name3);  // true

Single and double quotes work the same way. Backticks have special powers we'll see next!

🟠 HAP's Tip:

Pick one style (I use double quotes for regular strings) and stick with it. Consistency makes your code easier to read. But save backticks for when you need their special powers!

Template Literals — My Favorite Discovery

Backticks (`) create "template literals" that let you embed variables directly in your text using ${}. This changed everything for me:

Old way vs. new way:

// The OLD way - awkward concatenation
const oldGreeting = "Hello! I am " + robotName + ", created in " + creationYear + ".";

// The NEW way - template literals (backticks + ${})
const newGreeting = `Hello! I am ${robotName}, created in ${creationYear}.`;

// Both produce: "Hello! I am HyBit A. ProtoBot, created in 2024."
// But the template literal is SO much easier to read!

Template literals are easier to write, easier to read, and less error-prone. No more forgetting spaces or plus signs!

Grace Hopper Interjects:

"The syntax is precise: dollar sign, opening brace, variable name, closing brace. ${variableName}. JavaScript will only use the variable's value when all four characters appear together, in that exact order. Precision matters."

🎬 Watch: Template Literals in Action

View Transcript

HAP: Look at all these plus signs. I wrote this to build a simple message, and it's already hard to read.

HAP: Then I discovered template literals. Instead of juggling quotes and plus signs, I wrap my variables in dollar curly braces.

GRACE: Hap. When composing template literals, it is a common beginner mistake to use quotes and not backticks. You will find the backtick is the key right below the escape key at the top left of your keyboard. Remember that.

HAP: Thanks, Grace. So it's backtick to start the template literal, then dollar sign, then open curly brace, then your variable name, then a close curly brace. And finally, another backtick to finish.

HAP: JavaScript will know to drop the value right into the string right where you want it to be. This is so much better than concatenation.

HAP: Same result, way easier to read, and no more quote juggling.

Breakthrough Moment!

Template literals changed everything for me. No more awkward 'Hello, ' + name + '!' concatenation. Just backticks and ${}. My code is SO much easier to read now!

🤖 See All Three Types in Action

The Robot ID Card Demo uses all three data types you just learned! robotName is a string, energyLevel is a number, and comparisons like energyLevel > 50 produce booleans. Watch how they work together!

The Type Trap I Fell Into

This is the bug that made Grace intervene. I thought I was doing math, but JavaScript thought I was combining text:

Why "5" + 1 = "51":

// The type trap I fell into
const userInput = "5";    // This LOOKS like a number...
const addedValue = 1;

console.log(userInput + addedValue);  // "51" - string concatenation!
console.log(typeof userInput);         // "string" - AH HA!

// To fix it, convert the string to a number first
console.log(Number(userInput) + addedValue);  // 6 - math!

When you use + with a string, JavaScript converts the other value to a string too! Use Number() to convert strings to numbers first.

The Problem

"5" looks like a number but it's a string. The quotes make all the difference!

The Diagnosis

typeof reveals the truth. Always check when math behaves strangely.

The Fix

Use Number() to convert strings to numbers before doing math.

The Lesson

Don't assume—verify! Types matter in JavaScript, even when the language doesn't enforce them.

Booleans — True or False

Booleans are the simplest type: just true or false. They're perfect for yes/no questions:

Using booleans:

// Booleans are yes/no, true/false questions
const isLearning = true;
const isExhausted = false;
const hasEnoughEnergy = energyLevel > 50;  // true or false based on comparison

console.log(typeof isLearning);      // "boolean"
console.log(typeof hasEnoughEnergy); // "boolean"

// Booleans help make decisions
// (We'll use these more in Station 5!)

Booleans often come from comparisons (like energyLevel > 50). We'll use these a lot more in Station 5!

🟠 Watch Out:

true (no quotes) is a boolean. "true" (with quotes) is a string! They're completely different types. When in doubt, use typeof.

🎓 Data Types Quick Reference

1

Strings are text

"Hello", 'World', or `Template`. Always in quotes. Use for names, messages, any text.

2

Numbers are for math

42, 3.14, -10. NO quotes. Use for quantities, calculations, counts.

3

Booleans are true/false

Only two values: true or false. NO quotes. Use for yes/no conditions.

4

typeof reveals the truth

typeof myVar tells you what type it is. Use it when behavior is unexpected.

5

Template literals rock

Use backticks and ${variable} to embed values in strings. Much cleaner than concatenation!