– Guided Study Workspace

1. What Is JavaScript?

JavaScript (JS) is a high-level, interpreted (JIT-compiled), single-threaded programming language with first-class functions. While HTML defines the structure and CSS defines the presentation, JavaScript controls the dynamic behavior and state of the web.

2. How JavaScript Works in the Browser (V8 Engine)

1. Call Stack

Tracks the currently executing function stack frames (Last In, First Out).

2. Memory Heap

Unstructured memory pool where objects, arrays, and variables are allocated.

3. JIT Compilation

Modern engines compile JavaScript directly to machine code in real time for lightning speed.

3. Writing Your First JavaScript Code

// Single-line comment
/* Multi-line comment */
console.log("Hello, Modern Web!");
console.warn("This is a warning log");
console.error("This is an error log");

4. Variables: let vs const vs var

Default Choice

const (Constant)

Block-scoped. Cannot be reassigned. Use for 90% of your variables.

Reassignable

let (Mutable)

Block-scoped. Allows reassignment (e.g. counters, accumulated scores).

Avoid (Legacy)

var (Function Scoped)

Leaks outside blocks and hoists unpredictably. Avoid in modern code.

5. Primitive vs Reference Data Types

Category	Data Types	Example
Primitives (Immutable, Stack)	`String`, `Number`, `Boolean`, `Undefined`, `Null`, `Symbol`, `BigInt`	`"Alex"`, `42`, `true`, `undefined`, `null`
Reference (Mutable, Heap)	`Object`, `Array`, `Function`, `Date`, `Map`, `Set`	`{ age: 25 }`, `[1, 2, 3]`, `() => {}`

6. Operators (Arithmetic, Comparison & Logical)

/* Arithmetic */ const sum = 10 + 5; const remainder = 10 % 3;
/* Comparison */ 10 > 5; 10 <= 20; 10 === 10;
/* Logical */ true && false (AND); true || false (OR); !true (NOT);
/* Nullish Coalescing */ const port = process.env.PORT ?? 3000;

7. Type Coercion: Strict (===) vs Loose (==)

Loose Equality (==)

"5" == 5; // true (dangerous coercion!)
0 == false; // true
"" == 0; // true

Strict Equality (===)

"5" === 5; // false (different types!)
0 === false; // false
5 === 5; // true (safe!)

8. Conditional Statements (if/else & switch)

9. Loops & Iteration

/* Standard for loop */
for (let i = 0; i < 5; i++) {
console.log("Index:", i);
}

/* Modern for...of array loop */
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log("Color:", color);
}

10. Functions & Arrow Functions

// Function Declaration
function add(a, b) {
return a + b;
}

// Modern Arrow Function
const multiply = (a, b) => a * b;

console.log(add(5, 3)); // 8
console.log(multiply(4, 2)); // 8

11. Scope: Block Scope vs Function Scope

Variables declared with const and let are scoped strictly to the nearest enclosing pair of curly braces { ... }.

12. Arrays Basics & ES6 Methods

const numbers = [10, 20, 30, 40];

numbers.push(50); // Adds 50 to end
numbers.pop(); // Removes 50 from end

// Non-mutating functional transformations
const doubled = numbers.map(n => n * 2);
const aboveTwenty = numbers.filter(n => n > 20);

13. Objects & Methods

const user = {
  name: "Maya",
  role: "Architect",
  location: { city: "Berlin", country: "Germany" }
};

console.log(user.name); // "Maya"
console.log(user.location.city); // "Berlin"

14. Template Literals & Math

const item = "Keyboard";
const price = 89.99;

// Template literal string interpolation
const summary = `Purchased ${item} for ${price.toFixed(2)}`;

15. Error Handling with try...catch

try {
  // Code that might fail (e.g. JSON parsing)
  const data = JSON.parse(rawString);
} catch (error) {
  console.error("Failed to parse payload:", error.message);
}

16. Loading Scripts: defer vs async

<script src="app.js" defer></script>

17. Practical Example: Shopping Cart Total Calculator

18. Common Beginner Mistakes

Using loose equality (==): Always use ===.
Accidental global variables: Forgetting const or let puts variables on the window object.
Off-by-one array index errors: Remember array indices start at 0, not 1.

19. JavaScript Clean Code Best Practices

Default to const unless you explicitly need to reassign a counter.
Use descriptive variable names (e.g. isLoggedIn, fetchUserData).
Favor pure functions that don't produce side-effects.

20. What to Learn Next in Phase 4

Now that you understand data, functions, and logic, the next step is connecting JavaScript to the browser interface: DOM Manipulation & Browser Events!

JavaScript Fundamentals: The Foundation of Modern Web Development