Beginner45 minutesJavaScriptLevel 2

Variables and Data Types

Learn how to store and work with different types of data in JavaScript.

🎯 🍽️ Stocking the Digital Pantry

Before dinner service, chefs inventory every ingredient so the team knows exactly what's available, what's fresh, and what needs to be replenished. JavaScript variables work the same way—you label data so your app can grab the right "ingredient" the moment it's needed.

Quick Reflection:

What real-world information do you track every day (budgets, workouts, orders)?
When would you insist a value never change once set?
How could organized data make your next project easier to maintain?

In this lesson you will practice naming, storing, and organizing data so your future functions, components, and APIs always know where to find the right values.

Learning Objectives

By the end of this lesson, you'll be able to:

✓ Declare readable variables with let and const and explain when to use each
✓ Distinguish JavaScript primitive types such as string, number, boolean, null, and undefined
✓ Build and traverse arrays and objects to model grouped information
✓ Apply Apply template literals and type checks to avoid coercion surprises
✓ Use the browser console to inspect values as they change
✓ Organize small practice projects (like menus) using mixed data structures

Why This Matters:

Clear objectives keep you focused on building mental models for data, which unlocks everything from conditionals to APIs later in the series.

Interactive Learning: This tutorial includes live examples that you can try in your browser's console. Press F12 or right-click and select "Inspect" to open the Developer Tools.

Understanding Variables

Think of variables as labeled containers that store different types of information in your program. Just like a restaurant uses different containers to store ingredients, we use variables to store data.

Real-world Analogy

Imagine you're managing a restaurant:

let is like a whiteboard - you can erase and update the content
const is like a permanent sign - once written, it can't be changed
Variable names are like labels on containers - they should be descriptive

Best Practices

Use const by default
Use let when you need to reassign values
Avoid using var (it's outdated)
Choose descriptive variable names
Use camelCase for variable names

⏸️ Checkpoint: Name It & Store It

Before moving forward, can you answer these?

Can you explain the trade-offs between const and let to a teammate?
Which data type best represents menu availability or pricing in your practice project?
How would you restructure a long list of related variables into an object or array?

Tips to Remember:

Start with const, then switch to let only when reassignment is required.
Pair data with meaning—objects for labeled properties, arrays for ordered lists.
Log typeof checks in the console to verify assumptions before bugs grow.

How confident are you with this concept?

😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!

Variable Declaration Examples

Try It Yourself

Open your browser's console and try these examples:

Pro Tip: Watch the console output to see how variables behave!

JavaScript Data Types

JavaScript has several built-in data types that help us work with different kinds of information. Let's explore each one with practical examples from a restaurant management system.

1. Strings

Text data enclosed in quotes. Perfect for names, descriptions, and messages.

2. Numbers

Used for prices, quantities, calculations, and any numeric data.

3. Booleans

True/false values for tracking states and making decisions.

4. Arrays

Ordered lists of items, perfect for menus, orders, or any collection.

5. Objects

Complex data with properties, ideal for representing menu items, orders, etc.

Common Pitfalls to Avoid:

Don't forget to declare variables before using them
Be careful with type coercion (mixing different data types)
Remember that arrays are zero-indexed
Watch out for null vs undefined

Interactive Practice: Restaurant Menu System

Let's put everything together by creating a simple restaurant menu system:

Step 1: Create Menu Items

First, let's create variables for different menu items:

Step 2: Work with Arrays

Now, let's organize our menu items in an array:

Step 3: Create an Order Object

Finally, let's create an object to represent a customer's order:

Key Takeaways:

Variables are containers for storing data
Use the right data type for your needs
Arrays and objects help organize related data
Practice with real-world examples helps understanding

Lesson checkpoint

Test Your Knowledge

3 questions

Strengthen your understanding of Variables Data Types by answering the quiz below.

Variables Data Types Quiz

Test your understanding of Variables Data Types concepts.

Lesson Complete: What You Learned

Key Takeaways:

Variables declared with let can be reassigned; const variables cannot be reassigned
JavaScript has primitive types: strings, numbers, booleans, null, and undefined
Arrays store ordered collections of values accessed by index (zero-based)
Objects store key-value pairs for labeling and grouping related data
Template literals (backticks) allow embedding expressions inside strings
Using typeof helps verify data types and prevent coercion bugs

Learning Objectives Review:

Look back at what you set out to learn. Can you now:

✅ Declare readable variables with let and const and explain when to use each Check!
✅ Distinguish JavaScript primitive types such as string, number, boolean, null, and undefined Got it!
✅ Build and traverse arrays and objects to model grouped information Can explain it!
✅ Apply template literals and type checks to avoid coercion surprises Could teach this!
✅ Use the browser console to inspect values as they change Check!
✅ Organize small practice projects using mixed data structures Got it!

If you can confidently answer "yes" to most of these, you're ready to move on!

Think & Reflect:

Data Modelling

Thinking about data structure before writing code leads to cleaner, more maintainable programs. Arrays suit ordered lists; objects suit labelled records.

When would you choose an array over an object to store information?
How does picking the right data type early prevent bugs later?

Best Practices

Consistent use of const signals intent, reduces accidental mutations, and makes code easier for teammates to reason about.

Why should you default to const and only switch to let when needed?
How do naming conventions for variables improve code readability?

🤔 Real-World Test:

Every web application relies on variables and data types to manage information—from e-commerce shopping carts tracking item prices and quantities, to social media platforms storing user profiles as objects. Understanding how to choose the right data type and organize information with arrays and objects is essential for building any real-world application.

🎯 Looking Ahead:

Now that you can store and organize data, you're ready to learn about operators. In the next lesson, you'll discover how to perform calculations, make comparisons, and combine conditions—the building blocks of program logic.

Recommended Next Steps

Continue Learning

Ready to move forward? Continue with the next tutorial in this series:

Operators

Practice Projects

Apply what you've learned with these hands-on projects:

Temperature Converter

Create a temperature conversion tool

JavaScriptVariablesMath

Start Project

Message Board Data Planning

Plan and declare variables for a message board system, practicing with strings, arrays, objects, and different data types.

variablesdata typesplanning