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

Keyword Scope Reassign? Redeclare? Hoisted?

var Function-scoped ✅ Yes ✅ Yes ✅ (set to undefined)

let Block-scoped ✅ Yes ❌ No Hoisted but in TDZ

const Block-scoped ❌ No ❌ No Hoisted but in TDZ

👉 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.