Practice JavaScript right here — no installs, no signups.
JavaScript runs in every browser on earth, which makes it the fastest language to start with — you write a line, press Run, and see the result immediately. This online JavaScript compiler executes your code in a sandboxed environment and prints everything you send to console.log() straight into the output panel below the editor.
Use it for practising the fundamentals: variables and scope, template literals, array methods like map/filter/reduce, objects and destructuring, promises and async/await, and classes. Because there is no build step, you can iterate on a snippet dozens of times a minute — which is exactly how the syntax sticks.
Copy any snippet into the editor above and press Run. Each one is short on purpose — retype it from memory afterwards.
const scores = [42, 87, 13, 96, 65];
const passed = scores
.filter((s) => s >= 50)
.map((s) => `${s} marks`);
console.log(passed);
console.log("Average:", scores.reduce((a, b) => a + b, 0) / scores.length);filter narrows the list, map reshapes each item, reduce collapses the list to one value. All three return new arrays or values — the original stays untouched.
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
async function main() {
console.log("start");
await wait(500);
console.log("half a second later");
}
main();await pauses only the async function, not the whole program. Anything after main() runs before the awaited line resolves.
Uncaught ReferenceError: x is not defined
Why: You used a variable before declaring it, or misspelled its name.
Fix: Declare it with let or const above first use, and check the spelling and capitalisation — JavaScript is case sensitive.
Cannot read properties of undefined (reading 'name')
Why: The object you indexed into does not exist at that point.
Fix: Guard with optional chaining: user?.name, or log the object first to confirm its shape.
Unexpected token }
Why: A brace, bracket or parenthesis is unbalanced.
Fix: Count the opening and closing pairs — the editor highlights the matching brace when the cursor sits next to one.
| Concept | Syntax |
|---|---|
| Declare a constant | const total = 10; |
| Arrow function | const add = (a, b) => a + b; |
| Template literal | `Hello ${name}` |
| Loop an array | for (const item of list) { } |
| Class | class Dog { constructor(n) { this.n = n } } |
| Try/catch | try { risky() } catch (e) { console.log(e) } |
Yes. Arrow functions, destructuring, spread, optional chaining, classes, modules-free async/await and template literals all work.
The runner is a headless sandbox, so document and window APIs are limited. Use console.log for output; for DOM work use the HTML compiler instead.
Running snippets builds speed; the 17-chapter course builds understanding. Work through the JavaScript chapters, take the quiz, then claim your certificate.
Other compilers: TypeScript compiler, Python 3 compiler, Java compiler, C compiler, C++ compiler, Go compiler, Rust compiler, HTML compiler, CSS compiler, SQLite compiler
By the end of this walkthrough you can read and write the JavaScript you will meet in almost every tutorial online: variables, functions, arrays, objects and asynchronous code. Run each step in the editor above before moving on — typing beats reading.
console.log accepts any number of arguments and prints them separated by spaces. It is your main debugging tool: when something behaves oddly, log the value before you guess.
const name = "Karan";
console.log("Hello", name, name.length);Use const by default and let only when the value must change. const stops accidental reassignment, which removes a whole class of bugs. Note that const objects can still have their properties changed — only the binding is fixed.
const rate = 0.18;
let total = 100;
total = total + total * rate;
console.log(total);A function that logs is hard to reuse; a function that returns can be combined with others. Prefer returning a value and logging at the call site.
const area = (w, h) => w * h;
console.log(area(4, 5));Arrays hold ordered lists, objects hold named fields. Most real programs are arrays of objects, and array methods are how you work with them.
const students = [
{ name: "Aarav", marks: 82 },
{ name: "Diya", marks: 47 },
];
const passed = students.filter((s) => s.marks >= 50);
console.log(passed.map((s) => s.name));Anything that waits — a network request, a timer — returns a promise. await pauses inside an async function until the promise settles, and try/catch catches failures.
async function main() {
try {
const res = await fetch("https://api.github.com/repos/facebook/react");
const data = await res.json();
console.log(data.stargazers_count);
} catch (e) {
console.log("Request failed:", e.message);
}
}
main();Try each one in the editor above before opening the solution — the struggle is where the learning happens.
Hint: The remainder operator % gives 0 when a number divides evenly.
for (let i = 1; i <= 10; i++) {
console.log(i % 3 === 0 ? "fizz" : i);
}Hint: reduce starts from an accumulator you provide — here, an empty object.
const words = ["code", "play", "learn"];
const lengths = words.reduce((acc, w) => {
acc[w] = w.length;
return acc;
}, {});
console.log(lengths);Hint: Keep the timer id in a closure and clear it on every new call.
function debounce(fn, ms) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), ms);
};
}
const log = debounce((v) => console.log("searched", v), 300);
log("a"); log("ab"); log("abc");JavaScript is the only language every web browser runs natively, so anything interactive on a web page is ultimately JavaScript.
The same language runs on servers through Node.js, which means one syntax covers both the front end and the back end of a project.
Ready for structured practice? The 17-chapter JavaScript course takes these ideas one at a time, with a quiz and a certificate at the end.