Program Structure: Variables, Types, and Operators

Learn the fundamental building blocks of JavaScript: data types, variables, and how to work with them.

Introduction

Before you write a program, you need to understand what data is, how to store it, and how to use it. This lesson builds that foundation.

What You'll Learn Today

JavaScript's primitive data types: strings, numbers, booleans
What variables are and how to create them
The assignment operator (=)
Semantic naming: making your code readable
Template literals: combining variables and strings
Basic operators: arithmetic, comparison, logical

Pre-Work: Reading

Before diving into this lesson, read these specific sections from Eloquent JavaScript Chapter 2:

"Bindings" — Introduction to variables and how they store values
"Binding Names" — How to name variables meaningfully

These sections reinforce what you'll learn here. It should take 10-15 minutes. Stop there—don't read beyond "Binding Names" yet.

Pre-Work: Quick Reflection

After reading, write down your answers to these questions:

What is a variable in JavaScript? How does it work?
Why is it important to choose good variable names?
Can you give an example of a variable declaration using const?

As You Work Through This Lesson

Keep handwritten notes: Write down definitions of strings, numbers, and booleans in your own words as you learn them. Include 2-3 examples of each. These notes matter for the assessment.

Experiment actively: When you try code in the browser console, write down what you tried and what happened. Note what surprised you or confused you.

Answer the self-check questions in writing: Don't just think about answers—write them out with detailed explanations. One-word answers won't cut it.

Why This Matters

Everything in a program is data. Understanding types helps you know what operations are valid, what mistakes look like, and how to think about problems systematically.

Core Concept: Data Types

JavaScript has several primitive data types—basic building blocks that represent single values.

Strings

A string is text. Wrap it in quotes (single, double, or backticks):

"Hello, World!";
"JavaScript"`This is also a string`;

Key point: If it's in quotes, it's a string. Even if it looks like a number:

"25"; // String
25; // Number

Numbers

A number is any numeric value without quotes:

42;
3.14 - 7;
0;
2.998e8; // Scientific notation

JavaScript doesn't distinguish between integers and decimals. They're all just number type.

Edge cases:

Infinity - // A valid number (result of 1/0)
  Infinity; // Negative infinity
NaN; // "Not a Number" (but it's actually type number—confusing!)

If you see NaN, something went wrong with a calculation.

Booleans

A boolean is one of two values: true or false. No quotes.

true;
false;

Not a boolean:

"true"; // String
"false"; // String

Booleans are used to make decisions: "Is this condition true? Then do this."

Empty Values

JavaScript has two special values that mean "nothing":

undefined — The variable exists but has no value assigned yet.

let x;
console.log(x); // undefined

null — Intentional assignment of "nothing."

let y = null; // Deliberately saying "this is nothing"

For now, just know they exist. You'll rarely use them deliberately.

Creating Variables: `const` and `let`

A variable is a named storage location. You create one with const or let:

const name = "Alex";
const age = 25;
const isStudent = true;

`const` vs `let`

Use const by default. It means "this variable won't be reassigned."

const favoriteColor = "blue"; // ✅ Perfect

Use let only if you'll change the value later.

let counter = 0;
counter = counter + 1; // ✅ Changed, so `let` is correct

Don't use var. It's old syntax. Forget it exists.

The Assignment Operator: `=`

= does NOT mean "equals." It means "store the value on the right into the variable on the left."

const x = 5; // Store 5 in x
const y = x; // Store the VALUE of x (which is 5) in y

console.log(x); // 5
console.log(y); // 5

Later, you'll see === (triple equals), which means "are these values equal?"

console.log(5 === 5); // true
console.log(5 === "5"); // false (different types)

Semantic Naming: Write Readable Code

Bad variable names:

const x = "Alex";
const y = 25;
const z = true;

You have no idea what these are.

Good variable names:

const userName = "Alex";
const userAge = 25;
const isStudent = true;

Now it's obvious. This is semantic naming—names describe what they contain.

Naming Conventions

Use camelCase: first word lowercase, next words capitalized
- userName, isStudent, totalCost, hasPermission
Be specific: userName is better than user
For booleans, start with is or has: isActive, hasPermission
Avoid single letters except in loops (later)

Basic Operators

Arithmetic Operators

5 + 3; // 8 (addition)
5 - 3; // 2 (subtraction)
5 * 3; // 15 (multiplication)
5 / 3; // 1.666... (division)
5 % 3; // 2 (modulus—remainder)

Modulus (%) is useful for checking if something is even or odd:

5 % 2; // 1 (odd)
4 % 2; // 0 (even)

Comparison Operators

These return true or false:

5 === 5; // true (strict equal—same value, same type)
5 === "5"; // false (different types)
5 !== 5; // false (strict not equal)
5 > 3; // true
5 < 3; // false
5 >= 5; // true
5 <= 3; // false

Always use === and !==. Never use == or != (they have weird behavior).

Logical Operators

These combine boolean values:

true && true; // true (AND—both must be true)
true && false; // false
true || false; // true (OR—at least one must be true)
false || false; // false
!true; // false (NOT—reverses the value)
!false; // true

Template Literals: Combine Strings and Variables

You can insert variables into strings using backticks and ${}:

const name = "Alex";
const age = 25;

console.log(`My name is ${name} and I'm ${age} years old.`);

Output:

My name is Alex and I'm 25 years old.

Inside ${}, you can use expressions:

const x = 5;
const y = 3;

console.log(`${x} + ${y} = ${x + y}`); // 5 + 3 = 8

Old way (don't do this):

console.log("My name is " + name + " and I'm " + age + " years old.");

Template literals are cleaner and more readable.

Type Coercion: When JavaScript Changes Types

JavaScript is dynamically typed, meaning it tries to make sense of operations even when types don't match:

"5" + 5; // "55" (string concatenation—"5" forces addition to concat)
"5" * 2; // 10 (numeric multiplication—2 forces coercion to number)
"5" - 2; // 3 (subtraction requires numbers)
true + 1; // 2 (true is treated as 1)
false + 1; // 1 (false is treated as 0)

Key takeaway: + with strings concatenates. Other operators coerce to numbers.

If something unexpected happens, type coercion might be the culprit.

Hands-On: Explore in Your Browser Console

You've used DevTools to inspect HTML and CSS. The Console tab is different—it's a complete JavaScript runtime built into your browser. You can type JavaScript directly and see results instantly.

The console is a REPL (Read-Eval-Print-Loop):

Read your code
Evaluate it (run it)
Print the result
Loop (wait for the next line)

You'll see REPLs in many languages and tools. It's just a way to type code and get instant feedback.

Why use it?

Quick experimentation: Try code ideas without creating files
Immediate feedback: Type, press Enter, see output
No setup needed: Works in any browser, right now
Perfect for learning: Test concepts before writing real programs

Getting to the Console

Open your browser (Chrome, Firefox, Edge, Safari)
Press F12 (or right-click → "Inspect")
Click the Console tab (you'll see a > prompt)
Start typing JavaScript

Try These Examples

Type each line, press Enter, and see the result:

Strings

"Hello";
"Hello" + " " + "World"`Hello ${"World"}`;
("5");

Numbers

5;
5 + 3;
10 / 3;
10 % 3;
NaN;

Booleans

true;
false;
5 > 3;
5 === 5;
5 === "5";

Variables

const name = "Alex";
const age = 25;
name;
age`${name} is ${age} years old`;

Type Coercion

"5" + 5;
5 + 5;
"5" * 2;
true + 1;

Experiment. Try combinations that surprise you. Break things. That's how you learn what's valid.

Using Warp to Learn: If you get confused about why something works the way it does, open Warp and use the AI (type # followed by your question). Ask "Why does "5" + 5 equal "55"?" and let the AI explain it.

If you still have questions, ask the class in Teams or reach out to the instructor directly. Don't get stuck—that's what we're here for.

Common Mistakes

Forgetting Quotes on Strings

const name = Alex; // ❌ Error—JS looks for a variable named Alex
const name = "Alex"; // ✅ Correct

Mixing Up `=` and `===`

const x = 5; // ✅ Assignment
5 === 5; // ✅ Comparison (returns true)
if ((x = 5)) {
} // ❌ Assigns 5 to x (probably not what you meant)
if (x === 5) {
} // ✅ Compares x to 5

Using `==` Instead of `===`

5 == "5"; // true (weird—avoids type checking)
5 === "5"; // false (correct—checks type too)

Always use ===.

Treating Strings Like Numbers

"5" + 5; // "55" (concatenation, not addition)
Number("5") + 5; // 10 (explicitly convert to number first)

Forgetting `const` or `let`

x = 5; // ❌ Creates a global variable (bad)
const x = 5; // ✅ Correct

Key Takeaways

Primitives: strings (text), numbers (math), booleans (true/false)
Variables: use const by default, let only if reassigning
Assignment (=): stores value on right into variable on left
Comparison (===): checks if values are equal
Semantic naming: make variable names describe their content
Template literals: use backticks and ${} to combine strings and variables
Type coercion: JS tries to make sense of mixed types (be careful)

Self-Check: Do You Understand?

Try answering these without looking back:

What's the difference between "5" and 5?
When would you use let instead of const?
What does === do? How is it different from =?
Write a template literal that combines two variables into a sentence.
What does 5 % 2 return, and why is that useful?
What's the difference between 5 + 3 and "5" + 3? Why?
Why is semantic naming important?

If you can answer these, you're ready for the next lesson where you'll actually write and run code.

Next: Your First Program

In the next lesson, you'll apply these concepts. You'll create variables, use template literals, and run actual JavaScript code with Bun. But now you understand what's happening under the hood.