CodeHub

💥 JavaScript — Learn From Zero

Playground: Replit JS | JSFiddle — click, type, run.

What is JavaScript?

JavaScript is the language of the web. It runs in every browser and now also on servers (Node.js). It's event-driven and great for interactive apps.

  • Websites & SPAs (React, Vue, Svelte)
  • Backend (Node.js, Express, NestJS)
  • Mobile (React Native) & Desktop (Electron)
  • Games & automation

Run Online — No Install

Use the playground links above.

🟢 Beginner — Core Basics

Your First Program

javascript
console.log("Hello, world!");

Use console.log() to print to the console.

Variables & Types

javascript
let name = "Ada";
const age = 36;
let isStudent = true;
console.log(name, age, isStudent);

Use let (reassignable) and const (constant). Avoid var.

If / Else

javascript
const age = 18;
if (age >= 18) console.log("Vote");
else console.log("Too young");

Curly braces {} group statements.

Loops

javascript
for (let i = 0; i < 5; i++) console.log(i);
let n = 3;
while (n-- > 0) console.log(n);

Use for...of for arrays, for...in for object keys.

Functions

javascript
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World"));

Arrow functions: const add = (a,b) => a + b;

Arrays & Objects

javascript
const fruits = ["apple", "banana"];
fruits.push("cherry");
const person = { name: "Ada", age: 36 };
console.log(fruits[0], person.name);

Arrays are dynamic; objects use key: value.

🟡 Intermediate — Building Real Programs

Modules (ESM)

javascript
// math.js
function add(a, b) { return a + b; }
export { add };
// main.js
import { add } from "./math.js";
console.log(add(2, 3));

Modern JS uses import/export.

DOM & Events

javascript
document.querySelector("#btn").addEventListener("click", () => {
  alert("Clicked!");
});

querySelector finds elements in the DOM.

Promises & async/await

javascript
async function load() {
  const res = await fetch("/api/data");
  const data = await res.json();
  console.log(data);
}

Wrap await in try/catch.

Classes

javascript
class Animal {
  constructor(name) { this.name = name; }
  speak() { return this.name + " sounds"; }
}
const dog = new Animal("Rex");

Classes are sugar over prototypal inheritance.

Spread & Destructuring

javascript
const more = [...[1,2,3], 4];
const [first, ...rest] = more;
const { name } = { name: "Ada", age: 36 };

Spread ... copies/merges.

🔴 Advanced — Pro Concepts

Closures

javascript
function makeCounter() {
  let count = 0;
  return () => ++count;
}
const c = makeCounter();
c(); c();

A closure remembers its lexical scope.

Proxies

javascript
const p = new Proxy({}, {
  get(t, k) { return k in t ? t[k] : "missing"; }
});

Proxies intercept get/set traps.

Event Loop

javascript
console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
// 1, 3, 2

Microtasks run before macrotasks.

Memoization

javascript
const memo = (fn) => {
  const cache = new Map();
  return (n) => cache.has(n) ? cache.get(n) : cache.set(n, fn(n)).get(n);
};

Memoization caches results.

What's Next?

  • Build a tiny project: Calculator, To-Do App, Weather Widget
  • Read the official docs and a good book
  • Solve Exercism exercises
  • Join a community & share your code

Practice daily for 20 minutes. Consistency > intensity.