JavaScript ES2023 — 8 Modules · 70+ Examples

JavaScript from Basics to Async.

The only language browsers run natively — variables, the DOM, closures, prototypes and classes, Promises and async/await, and the npm ecosystem that ships it to production. Runs in the browser and on the server via Node, one language for the whole stack.

Start with Basics JS Interview →

⬡ES2023 ⬡70+ runnable examples ⬡Browser + Node ⬡Async-native

8 Modules Basics → Practice

70+ Examples Runnable code snippets

4 OOP Concepts Prototypes to polymorphism

40 Practice Programs Basic → Advanced

Open the JavaScript roadmap Every module and the sections inside it as one connected flow chart, in the order this track teaches them. Explore →

Curriculum

All 8 JavaScript modules

Follow the path top-to-bottom or jump to the module you need.

Module 01

JavaScript Basics

var/let/constData TypesCoercion

Where every JS journey starts. Variable declarations, primitive types, template literals, and the coercion rules that trip up beginners.

if/switchfor/while?? and ?.

Conditionals, every loop form JS offers, and the nullish/optional-chaining operators unique to modern JS.

Arrays, objects, destructuring, spread/rest, and when to reach for Map or Set instead of a plain object.

Starter level

Learn →

Module 04

Functions, Closures & this

ClosuresHoistingthis

Function forms, hoisting rules, closures, and the call-site-dependent behavior of this — the biggest jump from class-based languages.

The one thing Python doesn't need. Selecting and manipulating the DOM, event delegation, and the fetch API.

Mid level

Learn →

Module 06

Prototypes, Classes & Inheritance

PrototypesClasses#private

JS's OOP isn't class-based underneath — the prototype chain, class syntax, real private fields, inheritance, and polymorphism.

Promisesasync/awaitEvent Loop

Callbacks, Promises, async/await, Promise combinators, and the event loop's microtask/macrotask ordering — the module interviewers probe hardest.

ES ModulesnpmBundlers

import/export, npm and package.json, CommonJS interop, bundlers/transpilers, and the libraries every JS codebase reaches for.

AlgorithmsClosuresOOP

40 hands-on programs from basic to advanced — sorting, closures, a custom EventEmitter, and an LRU cache.

Advanced

Practice →

Why JavaScript?

The only language browsers speak

For the web, full-stack apps, and mobile — JavaScript reaches further than almost any other language.

Browser-Native

The only language every browser runs without a plugin or compile step. If it happens on a webpage, JavaScript is involved.

Full-Stack with Node

Node.js runs the same language on the server — one language for frontend, backend, and tooling scripts.

Biggest Package Ecosystem

npm hosts millions of packages — almost any building block already exists as a well-tested dependency away.

Async by Design

Non-blocking I/O is the default, not an add-on — a single thread comfortably handles thousands of concurrent requests.

Beyond the Browser

React Native and Electron extend the same skills to mobile apps and cross-platform desktop apps.

Interview Standard

Frontend, full-stack, and Node roles all screen for JS fundamentals — closures, this, and async are asked constantly.

Watch Out

JavaScript gotchas that trip up interviews

Common surprises — know these cold before your next interview.

== VS ===

1 == "1"   // true  — coerced
1 === "1"  // false — no coercion

null == undefined   // true
null === undefined  // false

== coerces types before comparing. Always use === unless you specifically want coercion.

this DEPENDS ON THE CALLER

const obj = { name: "Ada", greet() { return this.name; } };
const fn = obj.greet;
fn();   // undefined — lost its receiver

this is set by how a function is called, not where it's written. Detaching a method loses its binding.

var IN LOOPS

for (var i = 0; i < 3; i++) setTimeout(() => console.log(i));
// 3 3 3 — var is shared across all iterations

for (let i = 0; i < 3; i++) setTimeout(() => console.log(i));
// 0 1 2 — let gives each iteration its own binding

One more reason let replaced var as the default — each loop iteration gets a fresh binding.

OBJECT COPY VS REFERENCE

const a = { x: 1 };
const b = a;        // same object, not a copy
b.x = 99;
console.log(a.x);   // 99

const c = { ...a };   // shallow copy

Assigning an object or array copies the reference. Use spread or structuredClone() to get an independent copy.

Code Preview

Taste the content

Three patterns from across the curriculum — click to switch.

js_examples.js

Closure

Async/Await

Prototypes

// A closure — private counter state with no class needed
function makeCounter() {
    let count = 0;
    return { increment: () => ++count, reset: () => count = 0 };
}

const counter = makeCounter();
counter.increment();
counter.increment();
console.log(counter.increment());   // 3
counter.reset();
console.log(counter.increment());   // 1 — fresh state, private to this instance

// async/await — sequential reads, concurrent when you need them
async function loadDashboard(userId) {
  const [user, posts] = await Promise.all([
    fetch(`/api/users/${userId}`).then(r => r.json()),
    fetch(`/api/users/${userId}/posts`).then(r => r.json())
  ]);
  return { user, posts };
}

loadDashboard(1).then(data => console.log(data));

// Classes compile to the same prototype chain either way
class Shape {
    constructor(name) { this.name = name; }
    area() { return 0; }               // overridden by subclasses
}

class Circle extends Shape {
    constructor(radius) { super("Circle"); this.radius = radius; }
    area() { return Math.PI * this.radius ** 2; }
}

const c = new Circle(3);
console.log(c.area().toFixed(2));   // "28.27"

Ready to test your knowledge?

Closures, this, prototypes, and async patterns show up constantly in frontend and full-stack interviews — practice them in our Interview Prep hub alongside DSA and system design.

JavaScript Interview →

← Programming JavaScript Basics →