JavaScript: Making Pages Think

Variables: Boxes That Hold Data

A program is just data being moved and transformed. A variable is a named box in the computer's memory where you store a value to use later.

const and let

Modern JavaScript gives you two keywords. Use const when the value will never be reassigned (your default choice), and let when it will change over time. Avoid the old var.

const name = "Sara";   // text — never changes
let score = 0;        // a number that will go up
score = score + 10;    // now score holds 10

Data Types & Operators

Every value has a type. Knowing the type tells you what you can do with it.

The types you'll use daily

• String — text in quotes: "hello", 'world'.
• Number — 42, 3.14. No separate integer/decimal type.
• Boolean — true or false. The heart of all logic.
• Array — an ordered list: [1, 2, 3].
• Object — labelled data: { name: "Sara" }.
• null / undefined — "nothing here" and "not set yet".

Operators do the work

Arithmetic: + - * / % (the % remainder is surprisingly useful). Comparison: === !== > < >= <=. Logical: && (and), || (or), ! (not).

Making Decisions: if / else

This is where code stops being a fixed script and starts thinking. An if statement runs a block of code only when a condition is true.

if (age >= 18) {
  console.log("Access granted");
} else {
  console.log("Access denied");
}

Chain more conditions with else if, and for many fixed cases a switch statement reads more cleanly. But if / else if / else covers the vast majority of real code.

Loops: Repeating Without Copy-Paste

Computers are brilliant at doing the same thing thousands of times. A loop repeats a block of code until a condition says stop.

for (let i = 1; i <= 5; i++) {
  console.log("Count: " + i);
}

The for loop has three parts: a start (let i = 1), a condition that keeps it going (i <= 5), and a step that runs each time (i++, meaning "add 1 to i").

Functions: Reusable Machines

A function is a named block of code you can run whenever you want. You build the machine once, then "call" it as many times as you like — with different inputs, giving different outputs.

function add(a, b) {
  return a + b;
}
add(5, 10);   // → 15

// modern "arrow function" — same thing, shorter
const add = (a, b) => a + b;

The values in the brackets (a, b) are parameters — placeholders for the inputs. return hands a value back to whoever called the function.

Arrays & Objects

Real apps handle lists of things and bundles of related data. Arrays and objects are the two structures that make that possible — you'll use them in every program you ever write.

Arrays: ordered lists

An array holds many values in order. Each item has an index, and — this catches everyone — counting starts at 0, not 1.

Objects: labelled data

An object groups related values under named keys instead of numbered indexes — perfect for describing one "thing":

const user = {
  name: "Sara",
  age: 25,
  isAdmin: true
};
user.name;   // → "Sara"  (access with a dot)

Array Methods That Power Real Apps

Once you have a list of data, you rarely want the whole list untouched — you want to transform it, filter it, or display each item. Three methods do 90% of this work, and modern JavaScript is built on them.

Each one takes a function (from Module 5) and runs it on every item. This is where functions and arrays combine into real power:

• forEach() — do something with each item (e.g. print it). Returns nothing.
• map() — transform each item into a new array of the same length.
• filter() — keep only items that pass a test, into a new, smaller array.

const nums = [1, 2, 3, 4];

const doubled = nums.map(n => n * 2);    // [2, 4, 6, 8]
const big = doubled.filter(n => n > 4); // [6, 8]

Scope, Hoisting & Closures

Where do your variables actually live, and who can see them? Getting this right is the difference between code that behaves and code full of mysterious bugs — and it leads to closures, one of JavaScript's most powerful ideas (and its most-asked interview question).

Scope: where a variable can be seen

Scope is the region of your code where a variable exists. There are three levels, from widest to narrowest:

• Global scope — declared outside any function; visible everywhere. Use sparingly.
• Function scope — declared inside a function; visible only inside that function.
• Block scope — let and const declared inside any { } block (an if, a loop) exist only inside those braces.

The golden rule: inner scopes can see outward, but outer scopes cannot see inward. A function can read the variables around it, but the outside world cannot reach in and read the function's private variables.

const appName = "Ria";   // global — visible anywhere

function greet() {
  const message = "Hello";  // function-scoped
  console.log(message, appName);  // ✓ sees both
}
console.log(message);  // ✖ Error: message is not defined out here

Closures: a function that remembers

Here is the magic. A closure is a function that keeps access to the variables of the scope it was born in — even after that outer scope has finished running. The inner function carries its birthplace around with it, like a backpack.

function makeCounter() {
  let count = 0;              // private to this call
  return function () {
    count++;                    // remembers count forever
    return count;
  };
}
const next = makeCounter();
next(); // 1   next(); // 2   next(); // 3

Asynchronous JavaScript

JavaScript does one thing at a time. So what happens when a task takes time — fetching data from a server, waiting for a timer? If JS just froze until it finished, every page would lock up. This module is how JavaScript stays responsive: it's the concept that trips up almost every beginner, and mastering it is what makes you dangerous.

Synchronous vs asynchronous

Synchronous code runs line by line, each waiting for the previous to finish — instant for normal work. But some tasks are asynchronous: they start now and finish later (a network request, a 3-second timer). JavaScript does not wait for them — it kicks them off, keeps running the rest of your code, and deals with the result whenever it arrives. This "don't block, react later" model is the whole game.

Promises & async/await

An async task hands you back a Promise — an IOU for a value that will arrive later. The modern way to work with promises is async/await, which lets you write asynchronous code that reads top-to-bottom like normal code:

async function loadUser() {
  console.log("1: Start");
  const res = await fetch("/api/user"); // pause, don't freeze
  const data = await res.json();
  console.log("Data:", data);
}

Modern JavaScript (ES6+)

Everything so far is valid, timeless JavaScript. But since 2015 the language gained a set of features — collectively "ES6+" — that make code dramatically shorter and clearer. You'll see them in every codebase and every React tutorial, so let's make them familiar.

Template literals

Instead of clumsy + string joining, wrap text in backticks and drop variables in with ${...}:

// old way
const msg = "Hi " + name + ", you have " + n + " messages";
// template literal — much cleaner
const msg = `Hi ${name}, you have ${n} messages`;

Destructuring & spread

Destructuring pulls values straight out of an object or array into named variables. The spread operator (...) copies or merges them. These two show up constantly, especially in React:

const user = { name: "Sara", age: 25 };
const { name, age } = user;   // name = "Sara", age = 25

const more = { ...user, city: "Cairo" }; // copy + add

Error Handling & Debugging

Code breaks — for everyone, constantly. The difference between a beginner and a professional isn't writing code that never fails; it's writing code that fails gracefully and knowing how to hunt down the cause. This module is both skills.

try / catch / finally

Some operations can throw an error and crash everything after them — bad JSON, a failed network call, unexpected input. Wrap the risky part in try, handle any failure in catch, and put cleanup that must always run in finally:

try {
  const data = JSON.parse(badInput);  // might throw
  show(data);
} catch (err) {
  console.error(err.message);       // runs only on failure
  showMessage("Something went wrong");
} finally {
  hideSpinner();                     // always runs
}

Debugging: reading the error, not fearing it

When something breaks, the browser's console (F12 → Console) is your best friend. An error message tells you what went wrong, on which line, and the "stack trace" shows the chain of calls that led there. Add console.log(value) to inspect what a variable actually holds, or set a breakpoint in the Sources tab to pause execution and step through line by line.

Object-Oriented JavaScript (OOP)

As your applications grow, you need better ways to organize code. Object-Oriented Programming (OOP) groups data and the functions that operate on that data into single units called Classes.

Classes and instances

A class is like a blueprint. An instance is the actual object built from that blueprint. The constructor function runs automatically when you create a new instance to set up its initial state.

class User {
  constructor(name, level) {
    this.name = name;
    this.level = level;
  }

  levelUp() {
    this.level++;
    console.log(`${this.name} is now level ${this.level}!`);
  }
}

const player1 = new User("Ali", 1);
player1.levelUp();   // "Ali is now level 2!"

Inheritance

Classes can also extend other classes. This allows you to create specialized versions of a blueprint without rewriting code:

class Admin extends User {
  constructor(name, level, permissions) {
    super(name, level); // calls the User constructor
    this.permissions = permissions;
  }
}

Data & Web Storage

By default, JavaScript forgets everything the moment the user refreshes the page. To build real applications, you need to remember things. The browser provides localStorage to save data permanently on the user's device.

Saving and Loading

LocalStorage only stores strings. If you want to store an array or an object, you must convert it to a string using JSON.stringify(), and convert it back when loading with JSON.parse().

const settings = { theme: "dark", notifications: true };

// Save: Convert object to string
localStorage.setItem("userSettings", JSON.stringify(settings));

// Load: Retrieve string and convert back to object
const saved = localStorage.getItem("userSettings");
if (saved) {
  const parsed = JSON.parse(saved);
  console.log(parsed.theme); // "dark"
}

The "this" Keyword & Context

In JavaScript, this is dynamic. It doesn't refer to the function itself, but to how the function was called. It's one of the most misunderstood concepts, but critical for mastering advanced JS.

Four Rules of "this"

To know what this points to, look at the call site (where the function is executed):

• Implicit Binding: If there is a dot (e.g., user.greet()), this is the object before the dot.
• Explicit Binding: Using .call(), .apply(), or .bind() forces this to be exactly what you specify.
• New Binding: Using the new keyword creates a fresh object and binds this to it.
• Default Binding: A standalone function call (greet()) binds this to the global object (or undefined in strict mode).

const user = {
  name: "Sara",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};
user.greet(); // "Hi, I'm Sara" (Implicit binding)

const standaloneGreet = user.greet;
standaloneGreet(); // "Hi, I'm undefined" (Lost context!)

// Fix it with bind
const boundGreet = standaloneGreet.bind(user);
boundGreet(); // "Hi, I'm Sara"

Practical Example: Losing Context in Callbacks

One of the most common bugs in JavaScript occurs when passing a method as a callback (e.g., to setTimeout). The method loses its object context and defaults to the global object.

const player = {
  name: "Mario",
  jump() {
    console.log(`${this.name} jumps!`);
  },
  delayedJump() {
    // Bug: setTimeout calls this as a standalone function
    setTimeout(this.jump, 1000); 
    // Fix 1: setTimeout(this.jump.bind(this), 1000);
    // Fix 2 (Modern): setTimeout(() => this.jump(), 1000);
  }
};
player.delayedJump(); // Output: "undefined jumps!"

Prototypes & Inheritance

Before classes existed in JS (Module 12), developers used Prototypal Inheritance. Even today, the class keyword is just syntactic sugar over this powerful, underlying prototype system.

The Prototype Chain

Every object in JavaScript has a hidden internal property called [[Prototype]] (accessible via __proto__). When you try to access a property or method on an object, if JS doesn't find it directly on that object, it looks up the prototype chain to see if the prototype has it.

const animal = {
  eat() {
    console.log("Eating...");
  }
};

const dog = {
  bark: "Woof!",
  __proto__: animal  // dog inherits from animal
};

console.log(dog.bark); // "Woof!" (found on dog)
dog.eat();             // "Eating..." (found on animal via prototype)

This is why array methods like .map() work! All arrays inherit from Array.prototype, where those methods are actually stored. They don't copy the methods onto every single array; they share them efficiently.

Under the Hood: How Classes Use Prototypes

When you define a method inside a class, JavaScript doesn't copy that method to every single instance. Instead, it places the method on the class's prototype object.

class Car {
  constructor(brand) { this.brand = brand; }
  drive() { console.log("Vroom!"); }
}

const myCar = new Car("Toyota");
console.log(myCar.hasOwnProperty("brand")); // true
console.log(myCar.hasOwnProperty("drive")); // false! It's on the prototype.
console.log(myCar.__proto__ === Car.prototype); // true

ES Modules (Import/Export)

Writing a real-world application in a single file quickly becomes unmanageable. Modern JavaScript provides Modules, allowing you to split your code into separate files and connect them securely.

Exporting and Importing

You can export variables, functions, or classes from one file and import them into another. This keeps variables scoped to their module, avoiding global scope pollution.

// Named exports
export const PI = 3.14159;
export function calculateArea(radius) {
  return PI * radius * radius;
}

// Default export (only one per file)
export default function logMath() {
  console.log("Math module loaded!");
}

// Import default (no braces) and named (with braces)
import logMath, { PI, calculateArea } from './utils.js';

logMath();
console.log(calculateArea(5)); // 78.53975

Advanced Async: Promise.all

Sometimes you need to fetch data from multiple APIs at the same time. Doing this sequentially (one after another) is slow. Promise.all lets you run them in parallel and wait for all of them to finish.

Parallel Execution

If you pass an array of promises to Promise.all, it returns a single promise that resolves with an array of the results in the exact same order.

async function loadDashboard() {
  console.time("Fetch Time");
  
  // Fire all requests simultaneously!
  const [usersRes, postsRes, statsRes] = await Promise.all([
    fetch("/api/users"),
    fetch("/api/posts"),
    fetch("/api/stats")
  ]);

  // Parse JSON for all of them
  const users = await usersRes.json();
  const posts = await postsRes.json();
  const stats = await statsRes.json();
  
  console.timeEnd("Fetch Time"); // Much faster than waiting for each separately
  renderDashboard(users, posts, stats);
}

Regular Expressions (RegEx)

When you need to validate an email, find phone numbers in text, or replace complex string patterns, string methods like .includes() aren't enough. Regular Expressions are a mini-language for pattern matching.

Defining and Testing Patterns

RegEx in JavaScript is written between forward slashes, like /pattern/. You can test if a string matches the pattern using the .test() method.

// A pattern for a valid email (basic)
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(emailRegex.test("hello@world.com")); // true
console.log(emailRegex.test("hello world"));     // false

// Using RegEx for advanced string replacement
const text = "I love apples. Apples are great.";
// /apples/gi means: Global (all matches) and Case-Insensitive
const newText = text.replace(/apples/gi, "bananas"); 
console.log(newText); // "I love bananas. bananas are great."