JavaScript

The Physics of
Modern Interactions

A deep dive into the world's most versatile language. From simple form validation to building complex server-side architectures, JavaScript powers the interactive web.

This guide explores JavaScript not just as syntax, but as a runtime environment. We'll deconstruct how it handles memory, execution, and concurrency.

History & Evolution

Syntax, Variables & Control Flow

To a computer, a Variable is like a labeled box. You put a piece of data inside the box (like a number or a string of text) and slap a label on it so you can find it later.

if (isUser) {
  grantAccess();
} else {
  deny();
}

// Ternary
isUser ? grant() : deny();

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

{
  console.log(x); // ReferenceError! (TDZ)
  let x = 10;
}

Objects and Arrays

JavaScript is fundamentally built on top of objects. Think of an Array like a Shopping List (an ordered sequence of items) and an Object like a Contact Profile (specific pieces of information labeled with names like "email" or "phone").

const user = {
  name: "Brendan",
  role: "Engineer",
  greet() {
    return `Hi, ${this.name}`;
  }
};

// Access
console.log(user.name); 
console.log(user['role']);

const tools = ["Vite", "React"];
tools.push("Tailwind");

// Transformation
const upper = tools.map((t) => 
  t.toUpperCase()
);

console.log(tools.length); // 3

const a = { val: 1 };
const b = a;
b.val = 2;
console.log(a.val); // 2 (Changed!)

JSON (JavaScript Object Notation)

JSON is a lightweight, text-based format for storing and transporting data. Even though it is derived from JavaScript object syntax, it is completely language-independent. It serves as the universal language that allows different systems (like a Python server and a JavaScript frontend) to communicate with each other over the web.

{
  "user": {
    "id": 404,
    "name": "System",
    "isActive": true,
    "roles": ["admin", "editor"],
    "token": null
  }
}

// 1. Stringify: JS Object → JSON String
const rawText = JSON.stringify({ x: 5 });

// 2. Parse: JSON String → JS Object
const jsObj = JSON.parse('{"x":5}');

How it Runs: V8 and The Runtime

JavaScript is a single-threaded language, meaning it can only do one thing at a time. Imagine a chef in a tiny kitchen with only one burner—they have to finish (or pause) one dish before starting another.

Declarations & Higher-Order Functions

Think of a Function like a Recipe. Instead of writing out "boil water, add pasta, wait 10 mins" every time you're hungry, you write it once as a "Make Pasta" recipe and just call it whenever you need it.

function multiplier(factor) {
  return function(num) {
    return num * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

sayHi(); // Works
function sayHi() { 
  console.log("Hi"); 
}

const add = (a, b) => a + b;

sum(1,2); // Works
function sum(a,b) { return a+b; }

add(1,2); // ReferenceError
const add = (a,b) => a+b;

Lexical Environment

Scope is like a Glass House. If you're inside a room (a function), you can see out into the living room and the backyard (outer scopes). But people in the backyard can't see what's happening inside your tiny room!

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

Document Object Model

The DOM is like a Family Tree for your website. Every element (like a button or a paragraph) is either a parent, a child, or a sibling of another element. JavaScript lets you "talk" to these family members and change their styles or content.

// Selection
const btn = document.querySelector('.btn');

// Events
btn.addEventListener('click', (e) => {
  e.target.textContent = "Clicked!";
});

// Modification
const box = document.createElement('div');
box.style.background = "yellow";

Promises & Async/Await

Asynchronous JS is like Ordering at a Restaurant. You give your order to a Waiter (the JS Engine). The waiter doesn't stand still at your table waiting for the chef to cook; they go serve other people. When your food is ready, they bring it back to you!

async function fetchData() {
  try {
    const res = await api.call();
    console.log(res);
  } catch (err) {
    console.error(err);
  }
}

The Event Loop Dynamics

The Event Loop continuously monitors the Call Stack. If empty, it moves callbacks from the Task Queue (Macrotasks) and Microtask Queue (Promises) into the stack.

Modules & Execution Order

Modern JS applications are built using **ES Modules**. This ensures a clear dependency graph and scoped variables by default.

// utils.js
export const log = (msg) => console.log(msg);

// main.js
import { log } from './utils.js';
log("Hello Modules");

setTimeout(() => console.log('Macrotask'), 0);
Promise.resolve().then(() => console.log('Microtask'));

// Output:
// 1. Microtask
// 2. Macrotask

Prototypal Inheritance

const animal = { eat: true };
const dog = Object.create(animal);
console.log(dog.eat); // true (inherited)

class User {
  constructor(name) { this.name = name; }
  sayHi() { console.log(this.name); }
}

function User() {}
const me = new User();

console.log(me.__proto__ === User.prototype); // true

ES2024+ Features

const { name, age } = user;
const [first, ...rest] = arr;

// Nullish Coalescing
const val = input ?? 'default';

// Optional Chaining
const city = user?.address?.city;

// Object.groupBy()
const inventory = [
  { name: "apples", type: "fruit" },
  { name: "carrots", type: "veg" }
];
const result = Object.groupBy(inventory, ({ type }) => type);

Key Terms & Definitions