JavaScript Syntax Quick Reference
// ── Values, variables, and scope ─────────────────────────────────────
// Numbers, strings, booleans, null, undefined, BigInt, Symbol
let n = 42, s = "hi", ok = true, z = null;
const PI = 3.1416; // cannot be reassigned
let count = 0; // can be reassigned
// ── Expressions and operators ─────────────────────────────────────────
1 + 2 * 3; // 7
10 ** 2; // 100 (exponent)
a === b; // strict equality (no coercion)
a && b || c; // short-circuiting
const name = user.name ?? "Anonymous"; // nullish coalescing
const city = user.address?.city; // optional chaining
// ── Control flow ──────────────────────────────────────────────────────
if (x > 0) { ... } else { ... }
for (let i = 0; i < 3; i++) { ... }
for (const v of [1, 2, 3]) { ... } // iterable loop
while (cond) { ... }
switch (kind) {
case "cat": doCat(); break;
default: fallback();
}
// ── Functions ─────────────────────────────────────────────────────────
function add(a, b = 0) { return a + b; } // default param
const mul = function(a, b) { return a * b; }; // expression
const dbl = x => x * 2; // arrow (lexical `this`)
// ── Objects and arrays ────────────────────────────────────────────────
const person = { id: 1, name: "Ada" };
const team = ["A", "B", "C"];
const { name } = person; // destructuring
const [first, ...rest] = team;
const x = 1, y = 2;
const point = { x, y, ["p" + "3"]: 3 }; // shorthand + computed keys
const withAge = { ...person, age: 36 }; // spread/merge
const bigger = [...team, "D"];
// ── Template literals ─────────────────────────────────────────────────
const who = "world";
const msg = `Hello, ${who}!
This spans multiple lines.`;
// ── Classes (ES2015+) ─────────────────────────────────────────────────
class Counter {
#n = 0; // private field
inc() { this.#n++; }
get value() { return this.#n; }
static from(n) { const c = new Counter(); c.#n = n; return c; }
}
// ── Modules ───────────────────────────────────────────────────────────
// export.js
export const PI = 3.14;
export default function area(r) { return PI * r * r; }
// import.js
import area, { PI } from "./export.js";
// ── Promises and async/await ──────────────────────────────────────────
fetch("/api/user")
.then(r => r.json())
.then(data => console.log(data))
.catch(err => console.error(err));
async function load() {
try {
const r = await fetch("/api/user");
const data = await r.json();
console.log(data);
} catch (e) {
console.error(e);
}
}
// ── Errors ────────────────────────────────────────────────────────────
try {
risky();
} catch (err) {
console.error(err.message);
} finally {
cleanup();
}
// ── DOM basics ────────────────────────────────────────────────────────
const btn = document.querySelector("#go");
btn.addEventListener("click", () => {
document.body.style.backgroundColor = "papayawhip";
});
// ── Truthy / falsy and equality ───────────────────────────────────────
// falsy: false, 0, -0, 0n, "", null, undefined, NaN
if ("0") { /* runs — non-empty string is truthy */ }
"5" == 5 // true (coerces)
"5" === 5 // false (strict)