JavaScript becomes easier when you make a few rules automatic: declare every binding, default to const, compare deliberately, keep scope narrow, convert types visibly, and treat asynchronous results as values that arrive later. The ten tips below target the mistakes that make small examples confusing, with short before-and-after examples you can adapt immediately.
1. Declare every variable, and choose const or let deliberately
A declaration tells readers and the runtime what name you intend to use. Use const when the binding will not be assigned a new value; use let when reassignment is part of the algorithm. MDN’s code-style guidance recommends this convention and avoids var in modern examples.
As an Amazon Associate I earn from qualifying purchases.
Before
name = "Ada";
var score = 0;
score = score + 10;After
const name = "Ada";
let score = 0;
score = score + 10;The important distinction is the binding, not whether the value is conceptually important. A score that changes needs let; a name that is never replaced needs const. Declaring before use also makes typos and initialization mistakes easier to spot.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
2. Remember that const does not freeze objects or arrays
const prevents reassignment of the variable itself. It does not make an object immutable, and it does not stop array methods such as push() from changing the array’s contents. This is one of the first places where “constant” differs from “unchangeable.”
#1 Best Overall
Before
const settings = { theme: "light" };
settings = { theme: "dark" }; // TypeError
const tasks = ["read"];
tasks = ["read", "practice"]; // TypeErrorAfter
const settings = { theme: "light" };
settings.theme = "dark"; // The object’s property changes
const tasks = ["read"];
tasks.push("practice"); // The array’s contents changeIf you need an object or array that cannot be changed, you need an immutability strategy such as creating updated copies or applying a freezing technique. Do not infer deep immutability from the const keyword alone.
3. Use === for ordinary equality checks
Strict equality compares values without performing the implicit type conversion used by loose equality. MDN Web Docs’ guidance is to prefer strict equality and inequality operators for ordinary checks. That makes a comparison’s required types visible in the code.
Before
const entered = "5";
if (entered == 5) {
console.log("accepted");
}After
const entered = "5";
if (entered === 5) {
console.log("accepted"); // Does not run: one value is a string
}
if (Number(entered) === 5) {
console.log("accepted after conversion");
}Strict equality is not a deep comparison. Two separate objects remain unequal even when they contain identical properties, because the references differ. Also remember that NaN === NaN is false; use Number.isNaN(value) when that specific check is needed.
Recommended Free Tools
4. Keep variables in the smallest useful block scope
let and const are block-scoped: a binding declared inside braces is available only inside those braces. Narrow scope reduces accidental name collisions and makes it clear where a value can change. Lexical declarations also have a temporal dead zone before their declaration is initialized, so declaring first is a real correctness rule, not just formatting.
Before
if (loggedIn) {
const message = "Welcome";
}
console.log(message); // ReferenceErrorAfter
let message;
if (loggedIn) {
message = "Welcome";
}
console.log(message);Only move a declaration outward when code genuinely needs it there. A binding that belongs to one loop, conditional, or helper should stay in that block. Avoid reading a let or const before its declaration; the name exists in the temporal dead zone until initialization runs.
5. Never create a variable by assigning an undeclared name
An assignment to a name that was never declared can create an accidental global in non-strict code. In strict mode it throws an error instead. Either outcome indicates that the binding was not stated clearly enough.
Before
function recordVisit() {
visitCount = 1;
}
recordVisit();After
let visitCount = 0;
function recordVisit() {
visitCount = 1;
}
recordVisit();If the value should exist only inside the function, declare it there with const or let instead. Modern modules are strict by default, so undeclared assignments are surfaced rather than silently becoming global state. Explicit declarations also make dependencies between functions visible.
6. Make type conversions obvious
JavaScript can convert values implicitly during arithmetic, comparison, and string operations. Sometimes that behavior is useful, but hidden conversion makes beginner code difficult to reason about. Prefer named conversions such as Number(value) and String(value) when a conversion is part of your intent.
Before
const quantity = "3";
const total = +quantity * 10;
const label = "Items: " + total;After
const quantityText = "3";
const quantity = Number(quantityText);
const total = quantity * 10;
const label = `Items: ${String(total)}`;The explicit form gives the next reader a place to ask, “What if this input is not numeric?” You can then decide how to handle NaN, empty strings, or other invalid input instead of letting an operator choose a conversion silently. Explicit conversion is a clarity tool, not a claim that every implicit conversion is invalid.
7. Use modules when your runtime and project setup support them
Modules let you export a value from one file and import it where it is used. Their contents run in strict mode automatically, which removes several legacy script assumptions and makes undeclared assignments errors. Whether to use modules depends on the browser, Node.js setup, or build tool running your code.
Before
// one large script file
const taxRate = 0.2;
function priceWithTax(price) {
return price + price * taxRate;
}After
// prices.js
const taxRate = 0.2;
export function priceWithTax(price) {
return price + price * taxRate;
}
// app.js
import { priceWithTax } from "./prices.js";
console.log(priceWithTax(100));In a browser, the entry script must be loaded as a module, for example with <script type="module" src="app.js"></script>. Keep imports and exports explicit; do not assume that a name from one file is automatically global in another.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →8. Treat asynchronous results as values that arrive later
A promise represents a future result. Starting asynchronous work does not freeze unrelated JavaScript, but code that depends on the result must wait for it. await makes that dependency read top-to-bottom inside an async function (or a supported module context).
Before
const response = fetch("/api/profile");
console.log(response.name); // response is a Promise, not the profileAfter
async function showProfile() {
const response = await fetch("/api/profile");
const profile = await response.json();
console.log(profile.name);
}
showProfile();Promises defer dependent work without blocking unrelated tasks, but they do not make CPU-intensive JavaScript nonblocking. A long calculation on the main thread can still delay input, rendering, and other callbacks. Use asynchronous APIs for waiting on I/O, not as a promise that heavy computation will run elsewhere.
9. Handle failures around awaited operations
Network requests, parsing, permissions, and server responses can fail. Put a try/catch around the operations whose errors you can handle, and give the caller a useful outcome. A promise rejection that is never handled is difficult to diagnose and can leave the interface in a misleading state.
Before
async function loadProfile() {
const response = await fetch("/api/profile");
return response.json();
}
loadProfile();After
async function loadProfile() {
try {
const response = await fetch("/api/profile");
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("Could not load profile", error);
return null;
}
}
loadProfile();The fetch() promise typically rejects for a network failure, not for every HTTP error, so checking response.ok makes an unsuccessful status explicit. In code that cannot recover locally, catch the error to add context and rethrow it, or attach a clear rejection handler with .catch().
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors10. Learn by changing small examples and reading the result
Short experiments turn syntax into a mental model. Change one value, predict the output, run the code, and explain any difference. Useful experiments include replacing const with let, mutating an array, comparing a number with a numeric string, moving a declaration into a block, and forcing an awaited request to fail.
Best Value
A compact practice loop
- Copy a tiny example into your browser console, a module-based page, or a Node.js file.
- Write down the output you expect before running it.
- Change one line, run again, and inspect the value and error message.
- Reduce the example until only the behavior you are testing remains.
- Rewrite the final version with a clear name and an explicit conversion or check where appropriate.
Reading errors is part of the practice. Note the error type, the line reported, and the value that led there; then test the smallest change that could explain it. This habit is more transferable than memorizing isolated fixes.
Where to practice next
A free online reference is enough to work through these habits. If you prefer a structured sequence, Eloquent JavaScript, 4th Edition by Marijn Haverbeke is listed by Penguin Random House as a 456-page paperback published November 5, 2024, ISBN 9781718504103. The publisher describes the edition as updated to ECMAScript 2024, with exercises and projects spanning language fundamentals, browser programming, and Node.js. The author-maintained site identifies the fourth edition as the 2024 edition and provides an online version.
| Learning route | Exercises and projects | Coverage | Format details |
|---|---|---|---|
| Author’s online fourth edition | The edition includes exercises and project chapters | Language fundamentals, browser JavaScript, and Node.js | Read online; the author’s site identifies it as the 2024 fourth edition |
| Paperback fourth edition | The edition includes exercises and project chapters | Language fundamentals, browser JavaScript, and Node.js | 456 pages; ISBN 9781718504103; published November 5, 2024 |
Choose the format that makes you practice consistently. Neither format replaces running code: the useful step is still to alter examples, predict behavior, and read what JavaScript reports.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
