ctrl + Q ACADEMY • ARCHITECTURE CORE
Home / JavaScript

Logical Operations: JavaScript

From variables to asynchronous programming and the browser DOM.

Tier 1: Fundamentals
Basics

Variables, Types & Scope

JavaScript has three ways to declare variables: let (reassignable, block-scoped), const (not reassignable, block-scoped), and the legacy var (function-scoped — generally avoid it). Modern code prefers const by default, switching to let only when a value needs to change.

variables.js
const name = "Ada";      // string, never reassigned
let age = 29;             // number, can change
age += 1;
const isActive = true;    // boolean
const scores = [90, 85];  // array
const user = { name, age }; // object (shorthand)
Basics

Functions & Arrow Functions

Functions package reusable logic. Arrow functions (=>) are a shorter syntax that also inherit this from their surrounding scope, which makes them the default choice for callbacks.

functions.js
function add(a, b) {
  return a + b;
}

const multiply = (a, b) => a * b;

const greet = (name = "friend") => `Hello, ${name}!`;
Tier 2: Core Concepts
Core

Arrays, Objects & Destructuring

Array methods like map, filter, and reduce transform data without manual loops. Destructuring pulls values out of arrays/objects into named variables in one step.

arrays.js
const users = [{ name: "Amir", age: 31 }, { name: "Priya", age: 24 }];

const names = users.map(u => u.name);
const adults = users.filter(u => u.age >= 18);
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

const { name, age } = users[0]; // destructuring
Core

Control Flow & Loops

if/else, switch, for, while, and for...of control the order code executes in. Prefer for...of for iterating arrays and array methods over manual index tracking when possible — it's less error-prone.

Tier 3: Advanced JavaScript
Critical Spec

Closures & Higher-Order Functions

A closure is a function that "remembers" variables from the scope it was created in, even after that scope has finished running. This powers patterns like private counters and memoization.

closures.js
function makeCounter() {
  let count = 0;
  return () => ++count; // remembers "count" forever
}

const counter = makeCounter();
counter(); // 1
counter(); // 2
Critical Spec

Asynchronous JavaScript: Promises & async/await

JavaScript is single-threaded, so long-running work (network requests, timers) is handled asynchronously via Promises, which represent a value that will exist later. async/await is syntax that makes promise-based code read like synchronous code, while try/catch handles rejected promises.

async.js
async function loadUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    return user;
  } catch (error) {
    console.error("Failed to load user:", error.message);
  }
}

Interactive ECMAScript Sandbox Environment

System diagnostic outputs report here...
Tier 4: Professional Practices
Professional

DOM Manipulation & Events

The DOM (Document Object Model) is a live tree representation of the page that JavaScript can read and modify: document.querySelector finds elements, and addEventListener reacts to user actions like clicks and form submissions — this exact site uses that pattern for its login modal and support form.

Professional

ES Modules & the Fetch API

import/export split code across files so large applications stay organized. The fetch() function is the standard way to make HTTP requests to APIs from the browser, returning a Promise that resolves to a Response object.

Tier 5: Real-World Practice
Applied

Persisting Data with localStorage

localStorage is a simple key-value store built into every browser that persists data across page reloads and sessions (until explicitly cleared). Values are always stored as strings, so objects need JSON.stringify() to save and JSON.parse() to read back — exactly the pattern this site uses for progress and certificates.

storage.js
const settings = { theme: "dark", fontSize: 16 };
localStorage.setItem("settings", JSON.stringify(settings));

const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.theme); // "dark"
Applied

Debouncing Expensive Event Handlers

Events like scroll, resize, and keyup (as in a live search box) can fire dozens of times a second. Debouncing delays running a handler until the events stop for a short pause, avoiding wasted work and janky performance.

debounce.js
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const searchInput = document.querySelector("#search");
searchInput.addEventListener("input", debounce((e) => {
  console.log("Searching for:", e.target.value);
}, 300));
Quiz: What does array.reduce() do?
Final Assessment

Ready to test what you've learned?

Take the JavaScript certification exam — 8 questions, 70% to pass. Passing unlocks a downloadable certificate with your name on it.