Courses/JavaScript/Variables and Data Types

    Lesson 2 • Beginner

    Variables and Data Types in JavaScript 💡

    Learn how to store, use, and manage all kinds of information inside your programs.

    What You'll Learn in This Lesson

    • ✓Declare variables with let, const, and var
    • ✓When to use const vs let
    • ✓All 7 JavaScript data types
    • ✓Template literals for string building
    • ✓Dynamic typing and typeof operator
    • ✓Naming rules and best practices

    💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

    • Download Node.js to run JavaScript on your computer
    • Use your browser's Developer Console (Press F12) to test code snippets
    • Create a .html file with <script> tags and open it in your browser

    📦 Real-World Analogy: Variables are like labeled storage boxes:

    • • The label (variable name) tells you what's inside
    • • The contents (value) is what's actually stored
    • • You can open the box anytime to use what's inside
    • • With let, you can swap the contents; with const, the box is sealed!

    🧠 What Are Variables?

    A variable is like a box with a label — you can store data inside it and use it later in your program. Imagine needing to remember a user's name, score, or age — instead of retyping the number or word every time, you store it in a variable.

    let name = "Alice";
let age = 25;

console.log(name);
console.log(age);

    🟢 Output:

    Alice
25

    ⚙️ How Variables Work

    When you create (declare) a variable, you're telling the computer:

    "Hey, save this piece of information for me so I can use it later."

    There are three main ways to declare variables in JavaScript:

    1️⃣ let

    Modern and flexible

    let age = 25;
age = 26;  // Can change

    2️⃣ const

    Constant (never changes)

    const name = "Alice";
name = "Bob"; // ❌ Error!

    3️⃣ var

    Old and outdated

    Avoid using var. It still works but can cause bugs due to outdated behavior. Always use let or const in modern JavaScript.

    ⚖️ Comparison Table

    KeywordReassignable?ScopeRecommended?
    let✅ YesBlock✅ Best for most variables
    const❌ NoBlock✅ Use when value never changes
    var✅ YesFunction❌ Avoid (legacy only)

    🧩 Example: Managing Variables

    let score = 0;         // Player's starting score
const player = "Boopie";  // Fixed player name

score = score + 10;     // Increase score
console.log(`${player} scored ${score} points!`);

    🟢 Output:

    Boopie scored 10 points!

    🟨 Data Types in JavaScript

    A data type defines what kind of data a variable holds — text, number, true/false, etc.

    JavaScript has seven main primitive types you'll use daily:

    1. String — Text (words or sentences)
    2. Number — Any numerical value
    3. Boolean — True or False
    4. Undefined — Declared but not assigned
    5. Null — Empty or intentionally nothing
    6. Symbol — Unique identifier (advanced)
    7. BigInt — Very large integers

    Let's explore the common ones for beginners 👇

    🔤 Strings

    Text values

    let name = "Alice";
let city = 'New York';
let message = `Welcome!`;

    💡 You can use: "Double quotes", 'Single quotes', or `Backticks`

    🔢 Numbers

    Integers and decimals

    let age = 16;
let price = 19.99;
let temperature = -5;

    💡 JavaScript treats both integers and decimals as the same number type.

    ⚖️ Booleans

    True or false values

    let isStudent = true;
let hasLicense = false;
let isAdult = age >= 18;

    You'll use booleans for decisions and conditions, like checking if a user is logged in.

    🕳️ Null & Undefined

    Special empty values

    let empty = null;
let notDefined;
console.log(notDefined); // undefined

    • undefined — variable exists but has no value yet
    • null — means "nothing", used intentionally

    🎯 Template Literals

    Template literals (with backticks) let you embed variables directly into strings:

    let user = "Brayan";
let points = 250;

console.log(`User ${user} has ${points} points.`);

    🟢 Output:

    User Brayan has 250 points.

    This is easier to read and write than concatenation like:

    console.log("User " + user + " has " + points + " points.");

    🧠 Type Checking

    To check what type of data a variable holds, use the typeof operator:

    let name = "Alice";
let age = 25;

console.log(typeof name);  // string
console.log(typeof age);   // number

    🧮 Mixing Data Types

    JavaScript is flexible — you can combine strings and numbers easily:

    let apples = 5;
console.log("I have " + apples + " apples.");

    🟢 Output:

    I have 5 apples.

    Or better yet, with template literals:

    console.log(`I have ${apples} apples.`);

    ⚙️ Dynamic Typing

    In JavaScript, you can change a variable's data type anytime:

    let value = 100;       // number
value = "One hundred"; // string
console.log(value);

    🟢 Output:

    One hundred

    That's because JavaScript is a dynamically typed language — it decides the type automatically at runtime.

    Variables & Data Types Practice

    Experiment with let, const, and different data types!

    Try it Yourself »
    JavaScript
    // Declaring variables with let
let name = "Alice";
let age = 25;
let isStudent = true;

console.log("Name:", name);
console.log("Age:", age);
console.log("Is Student:", isStudent);

// Declaring constants with const
const PI = 3.14159;
const birthYear = 1998;

console.log("PI:", PI);

// You can change let variables
age = 26;
console.log("New age:", age);

// Template literals (backticks)
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);

// Check types with typ
...

    🧱 Variable Naming Rules

    When naming variables, follow these simple rules and conventions:

    ✅ Must start with a letter, $, or _:

    let myVar = 10;
let $price = 5.99;
let _count = 42;

    ✅ Can contain letters, numbers, $, and _:

    let user123 = "John";

    ✅ Are case-sensitive:

    let name = "Alice";
let Name = "Bob"; // Different variable

    ✅ Use camelCase for readability:

    let firstName = "Alice";
let totalPrice = 49.99;

    ❌ Cannot start with a number:

    let 2name = "Error"; // ❌ Invalid

    ❌ Cannot use reserved keywords:

    let let = "Nope";  // ❌
let if = "Nope";   // ❌
let const = "Nope"; // ❌

    🧩 Best Practices

    ✅ Use meaningful names:

    let score = 100;
let playerName = "Boopie";

    ❌ Avoid short or unclear names:

    let x = 100; // What does x mean?

    ✅ Use const for values that never change, like API keys or settings.

    ✅ Use let for values that change often, like scores or totals.

    🧮 Common Mistakes to Avoid

    1. 1️⃣ Forgetting to declare with let or const
      score = 10; // ❌ Creates global variable accidentally
    2. 2️⃣ Mixing cases
      playerScore vs playerscore // ❌ Not the same
    3. 3️⃣ Redeclaring a const variable
      const name = "Alice";
const name = "Bob"; // ❌ Not allowed
    4. 4️⃣ Using reserved words (like if, for, return) as variable names.

    🧠 Fun Example — Real-World Simulation

    Let's simulate a small "profile card" using variables:

    const firstName = "Boopie";
const lastName = "Plays";
let followers = 1000;
let verified = true;

console.log(`User: ${firstName} ${lastName}`);
console.log(`Followers: ${followers}`);
console.log(`Verified: ${verified}`);

    🟢 Output:

    User: Boopie Plays
Followers: 1000
Verified: true

    Now imagine this is part of your social app (like Flick 😉) — variables store dynamic data that updates automatically when a user gets new followers.

    🧩 Example: Mini Calculator

    let a = 10;
let b = 5;

console.log("Sum:", a + b);
console.log("Difference:", a - b);
console.log("Product:", a * b);
console.log("Quotient:", a / b);

    🟢 Output:

    Sum: 15
Difference: 5
Product: 50
Quotient: 2

    💡 Did You Know?

    JavaScript automatically converts between numbers and strings when needed — this is called type coercion.

    console.log("5" + 5); // "55"
console.log("5" - 2); // 3

    It can be confusing at first, so always use correct types when doing math!

    🎯 Practice Challenge

    Create variables to store information about a book:

    • Title (string)
    • Author (string)
    • Year published (number)
    • Is available (boolean)

    Then, use template literals to create and display a sentence describing the book.

    Example:

    let title = "Atomic Habits";
let author = "James Clear";
let year = 2018;
let isAvailable = true;

console.log(`"${title}" by ${author}, published in ${year}. Available: ${isAvailable}`);

    🟢 Output:

    "Atomic Habits" by James Clear, published in 2018. Available: true

    ⚡ Bonus Challenge

    Add one more variable for price and use all values to print a full bookstore-style description.

    let price = 12.99;
console.log(`Buy "${title}" by ${author} for £${price} — Available Now: ${isAvailable}`);

    💬 Recap

    • ✅ Variables store data like numbers, text, and booleans
    • ✅ let changes, const stays constant
    • ✅ JavaScript data types include string, number, boolean, null, undefined
    • ✅ Follow naming conventions and avoid reserved keywords
    • ✅ Use template literals for cleaner, modern code

    🧠 Try This Thought:

    If your program were a backpack, variables are the items you carry — text, numbers, or data you'll use later. The better you name and organize them, the easier your "journey" through coding becomes!

    📋 Quick Reference — Variables & Data Types

    KeywordReassignable?Use When
    let✅ YesValue changes over time
    const❌ NoValue never changes
    var✅ YesAvoid — legacy only
    Template literal`Hello ${name}!`
    typeoftypeof name // "string"

    Lesson 2 Complete — Variables & Data Types!

    You now know how to store any kind of data — text, numbers, booleans — and build readable strings with template literals.

    Up next: JavaScript Functions — how to group and reuse logic like a professional! 🔁

    Sign up for free to track which lessons you've completed and get learning reminders.

    Previous

    Cookie & Privacy Settings

    We use cookies to improve your experience, analyze traffic, and show personalized ads. You can manage your preferences below.

    By clicking "Accept All", you consent to our use of cookies for analytics and personalized advertising. You can customize your preferences or reject non-essential cookies.

    Privacy Policy • Terms of Service