JavaScript Basics: Variables, Data Types, Errors & Control Flow (Beginner’s Guide)

This blog covers:

1. Variables & Data Types

2. Hoisting, Scope & TDZ (Temporal Dead Zone)

3. Operators & Type Coercion

4. Control Flow (if, else, switch, loops)

5. JavaScript Errors (built-in)

Think of this as your step 1 in the complete JavaScript syllabus. Let’s go!

---

📦 Variables in JavaScript

A variable is like a box where you store values.

let name = "Riya";   // string
let age = 25;        // number
let isStudent = true; // boolean

---

🔑 var vs let vs const

👉 TDZ (Temporal Dead Zone) = accessing a variable before it’s declared gives ReferenceError.

Example:

console.log(a); // undefined
var a = 10;

console.log(b); // ❌ ReferenceError
let b = 20;

---

🔐 const ≠ Constant Value

const protects the variable, not the value inside it.

const student = { name: "Riya" };
student.name = "Priya"; // ✅ allowed
student = {}; // ❌ Error

---

🔥 Scope in Real Life

• Block Scope → {} in if, loops → let and const follow it

• Function Scope → inside a function → var follows it

{
 var x = 5;
 let y = 10;
 const z = 15;
}

console.log(x); // ✅ 5
console.log(y); // ❌ ReferenceError
console.log(z); // ❌ ReferenceError

📝 Diagram idea: Show var leaking out of a block while let and const stay trapped inside.

---

🧨 JavaScript Errors (Built-in)

JavaScript has different error types. Knowing them helps you debug faster.

1. ReferenceError

Using a variable that doesn’t exist.

console.log(x); // ❌ ReferenceError

2. TypeError

Doing something illegal with a value.

let num = 5;
num.toUpperCase(); // ❌ TypeError: num.toUpperCase is not a function

3. SyntaxError

Invalid JavaScript syntax.

if (true {  // ❌ SyntaxError: missing )
  console.log("Hello");
}

4. RangeError

Number out of range.

let num = 1n; 
console.log(num.toPrecision(200)); // ❌ RangeError

5. EvalError (rare)

Happens when using eval() incorrectly.

---

🧠 Mindset Rule
Errors are friends. They tell you what went wrong so you can fix it. Always read the error message instead of panicking.

---

🔍 Data Types & Type Coercion

JavaScript has two categories:

• Primitive Types: string, number, boolean, null, undefined, symbol, bigint

• Reference Types: objects, arrays, functions

typeof Operator

typeof "hello" // "string"
typeof 42      // "number"
typeof null    // "object"  ❌ bug in JS
typeof []      // "object"
typeof {}      // "object"
typeof function(){} // "function"

---

🔁 Type Coercion

JavaScript sometimes auto-converts values:

"5" + 1  // "51" (string concat)
"5" - 1  // 4   (string → number)
true + 1 // 2
undefined + 1 // NaN

⚠️ Loose vs Strict Equality

5 == "5"   // true  (loose, type conversion)
5 === "5"  // false (strict, no conversion)

Always prefer === ✅

---

🔦 Truthy vs Falsy

Falsy values:
false, 0, "", null, undefined, NaN

Everything else is truthy:
"0", "false", [], {}

if ("0") {
  console.log("Runs"); // ✅ "0" is truthy
}

---

🔗 Operators

• Arithmetic: + - * / % **

• Comparison: === !== > < >= <=

• Logical: && || !

• Ternary: condition ? value1 : value2

let age = 20;
let result = age >= 18 ? "Allowed" : "Denied";
console.log(result); // "Allowed"

---

🚦 Control Flow

If-Else

let age = 16;

if (age >= 18) {
  console.log("Can vote");
} else {
  console.log("Too young");
}

Switch

let fruit = "apple";

switch (fruit) {
  case "banana":
    console.log("Yellow");
    break;
  case "apple":
    console.log("Red");
    break;
  default:
    console.log("Unknown");
}

---

🔁 Loops

For Loop

for (let i = 0; i < 5; i++) {
  console.log(i);
}

While Loop

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

For-Of (arrays/strings)

for (let char of "JS") {
  console.log(char);
}

For-In (objects)

let student = { name: "Riya", age: 20 };

for (let key in student) {
  console.log(key, student[key]);
}

---

🎯 Conclusion

You just learned:

• Variables, Scope, Hoisting, TDZ

• Data Types & Type Coercion

• Operators (Arithmetic, Comparison, Logical)

• Control Flow (if, else, switch)

• Loops (for, while, for-of, for-in)

• Built-in Errors (ReferenceError, TypeError, SyntaxError, RangeError)

This is the foundation of JavaScript. 💡