Labels

JavaScript Roadmap — Day 4: Data Types — String, Number, and Boolean

 

JavaScript · Day 4 of 180 · Beginner Phase

Data Types — String, Number, and Boolean

The three most important primitive types in JavaScript — and why understanding them prevents 90% of beginner bugs.

Day 4 / 180
Beginner Phase

Every program works with data — names, numbers, scores, prices. JavaScript needs to know what kind of data it is dealing with so it can handle it correctly. That is what data types are for.

In this lesson we cover the three most common primitive data types: String, Number, and Boolean. Master these and you have the foundation of every JavaScript program you will ever write.

1. String — Text Data

A String is any piece of text. You create a string by wrapping text in quotes — single quotes, double quotes, or backticks. Backticks (template literals) are the most powerful because they let you embed variables directly inside the text.

JavaScript 
// Three ways to create a string
let name1 = 'Waheed';       // single quotes
let name2 = "Muhammad";    // double quotes
let name3 = `Pakistan`;    // backticks

// Combining strings
let fullName = "Muhammad" + " " + "Waheed";
console.log(fullName);  // Muhammad Waheed

// Template literal — embed variables
let city = "Faisalabad";
let message = `I am from ${city}`;
console.log(message);   // I am from Faisalabad

// String length
let country = "Pakistan";
console.log(country.length);  // 8

💡 Important: Strings are immutable — once created, the original string never changes. String methods always return a new string.

2. Number — Numeric Data

JavaScript has only one type for all numbers — both whole numbers and decimals. Unlike other languages, there is no separate int or float. One type handles everything.

JavaScript 
// Whole numbers
let age  = 22;
let year = 2026;

// Decimal numbers
let price = 99.99;
let pi    = 3.14159;

// Basic arithmetic
console.log(10 + 5);    // 15
console.log(10 - 3);    // 7
console.log(10 * 4);    // 40
console.log(10 / 2);    // 5
console.log(10 % 3);    // 1 (remainder)

// Special values
console.log(10 / 0);    // Infinity
console.log("hi" * 2);  // NaN (Not a Number)

// Famous floating point quirk!
console.log(0.1 + 0.2);  // 0.30000000000000004
Pro Tip #1 — NaN is still a Number type
typeof NaN returns "number" — which sounds crazy but is true. NaN means an operation tried to produce a number but failed. Always check for NaN using isNaN(value) — never use === NaN because NaN is not equal to itself.
Pro Tip #2 — Fix the 0.1 + 0.2 problem
JavaScript stores numbers in binary (IEEE 754). Some decimals cannot be stored perfectly. For money or precise calculations always use (0.1 + 0.2).toFixed(2) to round your result to 2 decimal places.
Pro Tip #3 — Division by zero does not crash
In JavaScript, dividing by zero gives Infinity — not an error. This is very different from Java or Python. You can check using isFinite(value) to know if a number is a valid finite result.

3. Boolean — True or False

A Boolean has only two possible values: true or false. Booleans are the language of decisions — every if statement and every comparison in JavaScript produces a boolean result.

JavaScript 
// Boolean values
let isLoggedIn = true;
let isPremium  = false;

// Comparisons return booleans
console.log(10 > 5);     // true
console.log(10 < 5);     // false
console.log(10 === 10);  // true
console.log(10 !== 5);   // true

// Boolean in a decision
let age = 20;
if (age >= 18) {
  console.log("Adult ✅");
} else {
  console.log("Minor ❌");
}
// Adult ✅

4. The typeof Operator

Use typeof to check the data type of any value. It returns a string describing the type. Essential for debugging.

JavaScript 
typeof "Waheed"   // "string"
typeof 22         // "number"
typeof 3.14       // "number"
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof null       // "object" ← famous JavaScript bug!
typeof []         // "object"
typeof {}         // "object"

Quick Reference

Type Example typeof Used for
String "Waheed" "string" Names, messages, text
Number 22, 3.14 "number" Age, price, score
Boolean true, false "boolean" Decisions, conditions

Try It Yourself

Edit the code and click Run Code. Try changing the values and see how typeof responds.

✏️ Try it Yourself — Data Types
OUTPUT
// Click Run Code to see output
💡 Edit the code and then click run!

Practice Tasks

Task 1 — Know Your Types

Create variables for your name (String), your age (Number), and whether you are a student (Boolean). Log each one with its type using typeof.

Task 2 — Template Literals

Using the variables from Task 1, write a sentence using a template literal: "My name is [name], I am [age] years old and I am a student: [true/false]."

Mini Challenge — Fix the Bug

Run console.log(0.1 + 0.2) in the playground. Then fix the output to show exactly 0.30 using .toFixed(2). This is a real bug every JavaScript developer encounters.

Next Lesson
Day 5 — Undefined, Null, and typeof
Read Next Lesson →
Want daily web dev tips?
Follow Muhammad Waheed Asghar for daily JavaScript and CSS tips!
Labels: