JavaScript Variables, Data Types & Operators: The Complete Deep Dive (Part 2)

By Sohail Shabbir · Coding & Programming · Fri Jun 05 2026

Master JavaScript variables (var, let, const), all 8 data types, type conversion, type coercion, and every operator. Part 2 of the JavaScript Mastery Series wit

Welcome back to the JavaScript Mastery Series! In Part 1, we covered the history of JavaScript, how it works, and wrote our very first code. Now it is time to go deep. In this part, we will master JavaScript variables, explore all 8 JavaScript data types with their built-in methods, understand the confusing world of type conversion and type coercion, and learn every JavaScript operator you need as a developer.

This is the foundation of everything. If you understand this part well, the rest of JavaScript becomes much easier. Let's go!

"In JavaScript, understanding data types is not optional — it is the difference between a bug that takes 10 seconds to fix and one that takes 10 hours."

📋 Table of Contents

1. var vs let vs const — Full Comparison
2. All 8 JavaScript Data Types Explained
3. The typeof Operator — Including Surprising Results
4. Type Conversion (Explicit)
5. Type Coercion (Implicit) — The Confusing Part
6. All JavaScript Operators
7. Template Literals — The Modern Way
8. Real-World Examples
9. Practice Exercises
10. Quiz — Test Your Knowledge
11. Summary & What's Next

1. var vs let vs const — Full Comparison

In Part 1 we introduced variables briefly. Now let's go deep. JavaScript has three ways to declare a variable: var, let, and const. They look similar but behave very differently.

The Comparison Table

Hoisting — Simple Explanation

Hoisting means JavaScript moves variable and function declarations to the top of their scope before the code runs. Think of it like this: before your code executes, JavaScript reads through it once and writes down all the variable names. With var, it also gives them a value of undefined right away.

// var hoisting — this does NOT crash, it prints undefined
console.log(myName);   // undefined (not an error!)
var myName = "Sohail";
console.log(myName);   // "Sohail"

// let hoisting — this CRASHES
console.log(myAge);    // ❌ ReferenceError: Cannot access before initialization
let myAge = 21;

// ✅ Good modern JavaScript — use const by default
const siteName = "DailyBlogs";
const maxUsers = 1000;

// ✅ Use let only when the value will change
let score = 0;
score = score + 10;   // score is now 10 — this is fine with let

// ❌ This will crash — const cannot be reassigned
const country = "Pakistan";
country = "India";   // TypeError: Assignment to constant variable

Block Scope vs Function Scope

Block scope means a variable only exists inside the {} curly braces where it was created. let and const are block-scoped. var ignores block scope — it "leaks" outside:

// var leaks outside the block
if (true) {
    var leaky = "I escape!";
}
console.log(leaky);   // "I escape!" ← var ignores the block

// let stays inside the block
if (true) {
    let safe = "I stay inside";
}
console.log(safe);   // ❌ ReferenceError — let respects the block

2. All 8 JavaScript Data Types Explained

JavaScript has 8 data types. They are split into two groups: Primitive (simple values) and Non-Primitive (complex values).

Type 1 — String

A string is any text — letters, numbers, symbols — placed inside quotes. You can use single quotes ', double quotes ", or backticks ` (template literals — covered later).

const name = "Sohail";
const city = 'Bahawalpur';
const message = `Hello from ${city}!`;

// ===== IMPORTANT STRING METHODS =====

// .length — how many characters in the string
console.log(name.length);            // 6

// .toUpperCase() and .toLowerCase()
console.log(name.toUpperCase());     // "SOHAIL"
console.log(name.toLowerCase());     // "sohail"

// .slice(start, end) — cut a part of the string
const course = "JavaScript Mastery";
console.log(course.slice(0, 10));    // "JavaScript"
console.log(course.slice(11));       // "Mastery" (from index 11 to end)

// .includes() — check if text exists inside string
console.log(course.includes("Mastery"));   // true
console.log(course.includes("Python"));    // false

// .split() — break string into an array
const skills = "JavaScript,React,Node";
const skillArray = skills.split(",");
console.log(skillArray);   // ["JavaScript", "React", "Node"]

// .trim() — remove extra spaces from start and end
const messy = "   hello world   ";
console.log(messy.trim());   // "hello world"

// .replace() — replace text
const sentence = "I love Java";
console.log(sentence.replace("Java", "JavaScript"));   // "I love JavaScript"

Type 2 — Number

JavaScript uses one Number type for both whole numbers and decimals. There is no separate "integer" type like in some other languages.

const age = 21;
const price = 9.99;
const negative = -50;

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

// isNaN() — check if a value is NaN
console.log(isNaN("hello"));   // true
console.log(isNaN(42));        // false

// parseInt() — convert string to whole number
console.log(parseInt("42px")); // 42 (ignores the "px")
console.log(parseInt("3.9"));  // 3 (cuts the decimal part)

// parseFloat() — convert string to decimal number
console.log(parseFloat("3.14abc")); // 3.14

// .toFixed() — round to specific decimal places (returns a string)
const pi = 3.14159;
console.log(pi.toFixed(2));    // "3.14"
console.log(pi.toFixed(4));    // "3.1416"

Type 3 — Boolean

A Boolean is the simplest type — it is either true or false. Think of it as a light switch — ON or OFF. Booleans are used in conditions to make decisions.

const isLoggedIn = true;
const hasError = false;

// Booleans come from comparisons
const age = 21;
console.log(age >= 18);   // true
console.log(age === 30);  // false

// Truthy and Falsy values
// In JavaScript, these values are FALSY (act like false):
// false, 0, "", null, undefined, NaN
// Everything else is TRUTHY (acts like true)

console.log(Boolean(0));          // false
console.log(Boolean(""));         // false
console.log(Boolean(null));       // false
console.log(Boolean("Sohail"));   // true
console.log(Boolean(42));         // true
console.log(Boolean([]));         // true (empty array is truthy!)

Type 4 — Null vs Undefined

This confuses almost every beginner. Both mean "no value" — but they are used in different situations.

• undefined — JavaScript assigned this automatically. You declared a variable but did not give it a value yet. JavaScript said: "This exists but has no value."
• null — You assigned this on purpose. You are saying: "This variable intentionally has no value right now."

// undefined — JavaScript set this, not you
let username;
console.log(username);   // undefined

// null — YOU set this on purpose
let currentUser = null;   // no user logged in yet
console.log(currentUser); // null

// They are loosely equal but not strictly equal
console.log(null == undefined);    // true  (loose check)
console.log(null === undefined);   // false (strict check — different types!)

Type 5 — Symbol (Brief)

A Symbol creates a completely unique value every time. Even two Symbols with the same description are not equal. Symbols are mostly used in advanced programming (libraries, frameworks) to create unique property keys on objects.

const id1 = Symbol("id");
const id2 = Symbol("id");
console.log(id1 === id2);   // false — always unique!

Type 6 — BigInt (Brief)

Regular JavaScript numbers have a maximum safe integer of about 9 quadrillion. For numbers bigger than that — like in cryptography or scientific calculations — you use BigInt. Add n at the end of the number.

const bigNumber = 9007199254740991n;   // The "n" makes it a BigInt
const anotherBig = BigInt("123456789012345678901234567890");
console.log(typeof bigNumber);   // "bigint"

Type 7 — Object

An object stores multiple related values together as key: value pairs. Think of it like a real-world object — a person has a name, age, and city. You group them together.

const developer = {
    name: "Sohail",
    age: 21,
    city: "Bahawalpur",
    skills: ["JavaScript", "React", "Node.js"],
    isAvailable: true
};

// Access values using dot notation
console.log(developer.name);      // "Sohail"
console.log(developer.skills);    // ["JavaScript", "React", "Node.js"]

// Access using bracket notation (useful for dynamic keys)
console.log(developer["city"]);   // "Bahawalpur"

// Add a new property
developer.university = "Islamia University of Bahawalpur";

// Update a property
developer.age = 22;

// Delete a property
delete developer.isAvailable;

Type 8 — Array

An array is an ordered list of values. Each item has a position number called an index, starting from 0 (not 1 — this is important!).

const fruits = ["Apple", "Mango", "Banana", "Orange"];

// Accessing items — index starts at 0
console.log(fruits[0]);   // "Apple"
console.log(fruits[2]);   // "Banana"
console.log(fruits[fruits.length - 1]);  // "Orange" (last item)

// Add to the end
fruits.push("Grapes");

// Remove from the end
fruits.pop();

// Add to the beginning
fruits.unshift("Strawberry");

// Remove from the beginning
fruits.shift();

// Find index of an item
console.log(fruits.indexOf("Mango"));   // 1

// Check if value exists
console.log(fruits.includes("Mango"));  // true

3. The typeof Operator — Including Surprising Results

The typeof operator tells you the data type of any value. You will use this constantly when debugging JavaScript code.

console.log(typeof "Hello");        // "string"
console.log(typeof 42);             // "number"
console.log(typeof true);           // "boolean"
console.log(typeof undefined);      // "undefined"
console.log(typeof Symbol("id"));   // "symbol"
console.log(typeof 100n);           // "bigint"
console.log(typeof {name:"Ali"});   // "object"
console.log(typeof [1, 2, 3]);      // "object"  ← surprise!
console.log(typeof function(){}); // "function" ← surprise!

// THE BIGGEST SURPRISE:
console.log(typeof null);           // "object"  ← THIS IS A BUG!

4. Type Conversion (Explicit)

Type conversion is when you manually convert a value from one type to another. You use the built-in functions: String(), Number(), and Boolean().

// ===== Convert TO String =====
console.log(String(42));        // "42"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"

// ===== Convert TO Number =====
console.log(Number("42"));       // 42
console.log(Number("3.14"));     // 3.14
console.log(Number(""));         // 0  ← empty string becomes 0
console.log(Number("hello"));    // NaN ← cannot convert text to number
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number(null));       // 0
console.log(Number(undefined));  // NaN

// ===== Convert TO Boolean =====
console.log(Boolean(1));         // true
console.log(Boolean(0));         // false  ← 0 is falsy
console.log(Boolean("hello"));   // true
console.log(Boolean(""));        // false  ← empty string is falsy
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false

5. Type Coercion (Implicit) — The Confusing Part

Type coercion is when JavaScript automatically converts a value from one type to another without you asking. This happens silently, and it causes the most confusing bugs for beginners.

The main rule: when you use + with a string, JavaScript converts everything to a string and concatenates. But with -, *, or /, JavaScript converts strings to numbers.

// THE + OPERATOR: if either side is a string, it concatenates
console.log("5" + 3);      // "53"  ← 3 becomes a string!
console.log("5" + true);   // "5true"
console.log("5" + null);   // "5null"
console.log(5 + 3);        // 8     ← both numbers, normal addition

// - * / OPERATORS: convert strings to numbers
console.log("5" - 3);      // 2    ← "5" becomes number 5
console.log("10" * 2);     // 20
console.log("9" / 3);      // 3

// More confusing examples
console.log(true + true);  // 2    ← true converts to 1
console.log(false + 1);    // 1    ← false converts to 0
console.log(null + 1);     // 1    ← null converts to 0
console.log(undefined + 1);// NaN  ← undefined converts to NaN

// The famous interview question
console.log("" + 1 + 2);   // "12"  ← "" makes it string from left
console.log(1 + 2 + "3");  // "33"  ← 1+2=3 first, then 3+"3"="33"

6. All JavaScript Operators

Arithmetic Operators

let a = 10;
let b = 3;

console.log(a + b);   // 13  — Addition
console.log(a - b);   // 7   — Subtraction
console.log(a * b);   // 30  — Multiplication
console.log(a / b);   // 3.333... — Division
console.log(a % b);   // 1   — Modulus (remainder after division)
console.log(a ** b);  // 1000 — Exponentiation (10 to the power of 3)

// Increment and Decrement
let count = 5;
count++;   // count is now 6 (same as count = count + 1)
count--;   // count is now 5 again

Assignment Operators

let score = 100;

score += 50;    // score = score + 50  → 150
score -= 20;    // score = score - 20  → 130
score *= 2;     // score = score * 2   → 260
score /= 4;     // score = score / 4   → 65
score %= 10;    // score = score % 10  → 5
score **= 2;    // score = score ** 2  → 25

Comparison Operators — == vs ===

This is one of the most important things to understand in JavaScript. There are two ways to check equality:

• == Loose equality — compares values only, allows type coercion
• === Strict equality — compares value AND type, no coercion

// == loose equality — converts types before comparing
console.log(5 == "5");     // true  ← "5" is converted to number 5
console.log(0 == false);   // true  ← false converts to 0
console.log(null == undefined); // true ← special case

// === strict equality — NO type conversion
console.log(5 === "5");    // false ← different types (number vs string)
console.log(0 === false);  // false ← different types (number vs boolean)
console.log(5 === 5);      // true  ← same value, same type

// All comparison operators:
console.log(10 > 5);    // true
console.log(10 < 5);    // false
console.log(10 >= 10);  // true
console.log(10 <= 9);   // false
console.log(10 != 5);   // true  (loose not-equal)
console.log(10 !== "10"); // true (strict not-equal)

Logical Operators

const age = 21;
const hasID = true;
const isBanned = false;

// && (AND) — BOTH sides must be true
console.log(age >= 18 && hasID);      // true && true → true
console.log(age >= 18 && isBanned);   // true && false → false

// || (OR) — at least ONE side must be true
console.log(age >= 18 || isBanned);   // true || false → true
console.log(age < 18 || isBanned);    // false || false → false

// ! (NOT) — reverses the boolean
console.log(!hasID);     // !true → false
console.log(!isBanned);  // !false → true

// Practical use: checking if user can enter
const canEnter = age >= 18 && hasID && !isBanned;
console.log(canEnter);   // true

Ternary Operator — The One-Line if/else

The ternary operator is a short way to write a simple if/else. The syntax is: condition ? valueIfTrue : valueIfFalse

const age = 20;

// Old way (if/else)
let message;
if (age >= 18) {
    message = "Adult";
} else {
    message = "Minor";
}

// New way (ternary) — same result, one line
const status = age >= 18 ? "Adult" : "Minor";
console.log(status);   // "Adult"

// Another example
const score = 75;
const grade = score >= 90 ? "A" : score >= 70 ? "B" : score >= 50 ? "C" : "F";
console.log(grade);   // "B"

7. Template Literals — The Modern Way to Write Strings

Template literals use backticks (`) instead of quotes. They are one of the best features added in ES6. They allow you to embed variables directly inside strings and write multiline strings easily.

const name = "Sohail";
const university = "Islamia University of Bahawalpur";
const year = 2026;

// ❌ Old way — string concatenation (messy and hard to read)
const intro1 = "My name is " + name + " and I study at " + university + " in " + year;

// ✅ New way — template literals (clean and easy to read)
const intro2 = `My name is ${name} and I study at ${university} in ${year}`;

console.log(intro2);
// "My name is Sohail and I study at Islamia University of Bahawalpur in 2026"

// You can put ANY expression inside ${}
const a = 10;
const b = 5;
console.log(`${a} + ${b} = ${a + b}`);   // "10 + 5 = 15"
console.log(`Is adult: ${a > 18 ? "Yes" : "No"}`);  // "Is adult: No"

// Multiline strings — no need for \n anymore
const poem = `Line one
Line two
Line three`;
console.log(poem);
// Line one
// Line two
// Line three

8. Real-World Examples

Example 1 — User Age Checker (Ternary Operator)

<!DOCTYPE html>
<html>
<body>
  <h2>Age Checker</h2>
  <input type="number" id="ageInput" placeholder="Enter your age" />
  <button onclick="checkAge()">Check</button>
  <p id="ageResult" style="font-size:18px; font-weight:bold;"></p>

  <script>
    function checkAge() {
      const age = Number(document.getElementById("ageInput").value);

      // Use ternary to decide message
      const message = isNaN(age)
        ? "Please enter a valid number"
        : age >= 18
        ? `You are ${age} years old — you are an Adult ✅`
        : `You are ${age} years old — you are a Minor ❌`;

      document.getElementById("ageResult").textContent = message;
    }
  </script>
</body>
</html>

Example 2 — Shopping Cart Total Calculator

<script>
  // Simulate a shopping cart
  const cartItems = [
    { name: "JavaScript Book", price: 25.99, quantity: 2 },
    { name: "Mechanical Keyboard", price: 89.99, quantity: 1 },
    { name: "USB Hub", price: 15.50, quantity: 3 }
  ];

  const TAX_RATE = 0.10;   // 10% tax

  // Calculate subtotal using operators
  let subtotal = 0;
  for (let i = 0; i < cartItems.length; i++) {
    subtotal += cartItems[i].price * cartItems[i].quantity;
  }

  const tax = subtotal * TAX_RATE;
  const total = subtotal + tax;

  // Display using template literals
  console.log(`Subtotal: $${subtotal.toFixed(2)}`);
  console.log(`Tax (10%): $${tax.toFixed(2)}`);
  console.log(`Total: $${total.toFixed(2)}`);

  // Output:
  // Subtotal: $203.47
  // Tax (10%): $20.35
  // Total: $223.82
</script>

Example 3 — Form Input Validator

<input type="text" id="emailInput" placeholder="Enter email" />
<input type="password" id="passInput" placeholder="Enter password" />
<button onclick="validateForm()">Submit</button>
<p id="formResult"></p>

<script>
  function validateForm() {
    const email = document.getElementById("emailInput").value.trim();
    const password = document.getElementById("passInput").value.trim();

    // Boolean conversion: empty string is falsy
    const hasEmail = Boolean(email);
    const hasPassword = Boolean(password);
    const passwordLongEnough = password.length >= 6;

    if (!hasEmail) {
      document.getElementById("formResult").textContent = "Email is required!";
    } else if (!hasPassword) {
      document.getElementById("formResult").textContent = "Password is required!";
    } else if (!passwordLongEnough) {
      document.getElementById("formResult").textContent = "Password must be at least 6 characters!";
    } else {
      document.getElementById("formResult").textContent = `Welcome, ${email}! ✅`;
    }
  }
</script>

9. Practice Exercises 💪

const fullName = "javascript mastery";
console.log(fullName.toUpperCase());        // "JAVASCRIPT MASTERY"
console.log(fullName.length);               // 18
console.log(fullName.includes("mastery"));  // true

console.log("3" + 4 + 5);   // "345" — "3" is string, so 4 and 5 also become strings
console.log(3 + 4 + "5");   // "75"  — 3+4=7 (numbers), then 7+"5"="75" (string)
// JavaScript evaluates left to right!

const product = {
    name: "Wireless Mouse",
    price: "29.99",
    quantity: 3
};
const price = Number(product.price);
const total = price * product.quantity;
console.log(`Product: ${product.name} — Total: $${total.toFixed(2)}`);

function checkNumber(num) {
    const result = num > 0 ? "Positive" : num < 0 ? "Negative" : "Zero";
    console.log(`${num} is ${result}`);
}
checkNumber(10);    // 10 is Positive
checkNumber(-5);    // -5 is Negative
checkNumber(0);     // 0 is Zero

const userInput = "   42.5   ";
const trimmed = userInput.trim();
const num = Number(trimmed);
const result = !isNaN(num) && trimmed !== ""
    ? `Valid number! Doubled: ${num * 2}`
    : "Invalid input";
console.log(result);   // "Valid number! Doubled: 85"

10. Quiz — Test Your Knowledge 🧠

const msg = stock > 0 ? "In Stock" : "Out of Stock";

11. Summary & What's Next

📅 Coming Next — Part 3: Control Flow

In Part 3, we will learn how to make decisions and repeat things in JavaScript:

• if, else if, else — make decisions based on conditions
• switch statement — clean way to handle multiple cases
• for loop — repeat code a specific number of times
• while loop — repeat while a condition is true
• forEach — the modern way to loop over arrays
• Real-world project: Build a grade calculator and a number guessing game

Written by the DailyBlogs team · JavaScript Mastery Series · Part 2 of 20 · Published 2026

Tags: javascript variables, javascript data types, javascript operators, learn javascript 2026, var let const, type coercion, javascript tutorial, web development