Programmer’s Reference
Add browser behavior with small, understandable examples.
Modern browser JavaScript. DOM examples require matching HTML elements. Browser and server JavaScript have different APIs.
Select a term for its definition, syntax, example, and common mistakes.
Choose a branch according to a truthy or falsey condition.
const count = 3;
if (count > 0) {
console.log('Some');
} else {
console.log('None');
}Practical useUse this construct in your own practice project.
Common mistakesUse === for strict comparison; = performs assignment.
Return the first truthy operand, or the second operand.
const nickname = '';
const label = nickname || 'Guest';
console.log(label);Practical useUse this construct in your own practice project.
Common mistakesZero and empty strings trigger the fallback too; use ?? when only null/undefined should.
Return the first falsey operand, or the second operand.
const ready = true;
const allowed = false;
if (ready && allowed) { console.log('Proceed'); }Practical useUse this construct in your own practice project.
Common mistakes&& returns an operand and short-circuits; & is bitwise.
Negate the truthiness of a value.
const ready = false;
if (!ready) { console.log('Waiting'); }Practical useUse this construct in your own practice project.
Common mistakesNonempty strings such as "false" are truthy.
Repeat using initialization, a test, and an update.
for (let i = 0; i < 3; i++) {
console.log(i);
}Practical useUse this construct in your own practice project.
Common mistakesUse let for the changing counter; check the stopping condition.
Iterate over values of an iterable.
for (const name of ['Demo', 'Example']) {
console.log(name);
}Practical useUse this construct in your own practice project.
Common mistakesfor...in iterates enumerable property keys, not array values.
while checks before the body; do...while runs the body at least once.
let attempt = 0;
while (attempt < 3) { attempt++; }
do { attempt--; } while (attempt > 0);Practical useUse this construct in your own practice project.
Common mistakesInclude the final semicolon in do...while and avoid endless loops.
Exit a loop or switch early.
for (let i = 0; i < 4; i++) {
if (i === 2) { break; }
console.log(i);
}Practical useUse this construct in your own practice project.
Common mistakesbreak does not return from a function.
Move to the next loop iteration.
for (let i = 0; i < 3; i++) {
if (i === 1) { continue; }
console.log(i);
}Practical useUse this construct in your own practice project.
Common mistakescontinue is only valid in a loop.
Select a matching case using strict comparison.
const state = 'ready';
switch (state) {
case 'ready': console.log('Ready'); break;
default: console.log('Unknown');
}Practical useUse this construct in your own practice project.
Common mistakesMissing break allows fallthrough into later cases.
Define reusable behavior and return its result.
function doubleValue(number) {
return number * 2;
}
console.log(doubleValue(3));Practical useUse this construct in your own practice project.
Common mistakesA newline immediately after return can cause automatic semicolon insertion.
Supply a fallback for null or undefined.
const count = 0;
console.log(count ?? 10);Practical useUse this construct in your own practice project.
Common mistakesUnlike ||, ?? preserves zero and empty strings; mixing them requires parentheses.
Handle an exception and perform cleanup.
try {
throw new Error('Demo');
} catch (error) {
console.log('Handled');
} finally {
console.log('Cleanup');
}Practical useUse this construct in your own practice project.
Common mistakesDo not silently swallow unexpected failures or expose confidential error details.
JavaScript has no goto statement. Use structured control flow.
function describe(ready) {
if (ready) { return 'Ready'; }
return 'Waiting';
}
console.log(describe(true));Practical useUse this construct in your own practice project.
Common mistakesLabels support break/continue under specific rules; they do not provide goto.
Use const for bindings that do not change and let for values you reassign.
const site = 'Demo';
let checks = 0;
checks += 1;
console.log(`${site}: ${checks} checks`);Practical useFormat a demo service summary.
Common mistakesconst prevents reassignment but does not freeze an object. Use === when coercion is unwanted.
Filter an array of objects to keep enabled records.
const sites = [{name: 'Demo', enabled: true}];
const enabled = sites.filter(site => site.enabled === true);
console.log(enabled);Practical useFilter a sanitized site list in an application view.
Common mistakesfilter returns a new array. Do not confuse = assignment with === comparison.
Define repeatable logic with a default parameter and return a value.
function label(name = 'Demo') {
return `Site: ${name}`;
}
console.log(label());Practical useProduce a reusable display label.
Common mistakesA function without return returns undefined. Avoid relying on implicit globals.
Find an existing element and set plain text without interpreting it as HTML.
const status = document.querySelector('#demo-status');
if (status) status.textContent = 'Check complete';Practical useUpdate a status label in a demo application.
Common mistakesquerySelector can return null. Avoid inserting untrusted content with innerHTML. Run after the element exists.
Attach a click listener to an existing button.
const button = document.querySelector('#demo-refresh');
button?.addEventListener('click', () => {
console.log('Refresh requested');
});Practical useWire a prototype refresh button to reviewed application logic.
Common mistakesUse a real button for keyboard support. This logs an event; it does not execute a server operation.
Load a local JSON fixture, check HTTP status, and parse the response.
async function loadStatus() {
const response = await fetch('/demo-status.json');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
}
loadStatus().then(console.log).catch(() => console.error('Cannot load demo status'));Practical useUse a sanitized local fixture for a status prototype.
Common mistakesfetch does not reject on HTTP 404/500. CORS and authentication still apply; do not put secrets in browser code.
Convert JSON text to a value and format it back into readable text.
const status = JSON.parse('{"running":true}');
console.log(JSON.stringify(status, null, 2));Practical useInspect a demo API fixture.
Common mistakesJSON parsing can throw. JSON cannot represent functions or undefined as object values.
Export a helper from one file and import it from another.
// labels.js
export const label = name => `Site: ${name}`;
// main.js
import { label } from './labels.js';
console.log(label('Demo'));Practical useSeparate view helpers in an isolated frontend prototype.
Common mistakesThese are two separate files. In HTML load main.js with type="module" and serve over HTTP rather than file://.