Coding style & naming

Readable code is kind code

JavaScript does not care whether a variable is named x or minimumPrice. If the grammar is valid, the engine runs it. People are different. We read names, spacing, comments, and branches to understand what the program is trying to do.

Coding style is the habit of writing code that is easy for humans to scan, discuss, debug, and safely change. In this lesson you will use beginner JavaScript only: const, let, functions, arrays, strings, numbers, booleans, and a few if statements. The deeper rules for declaring variables come next in the Variables lesson, so this lesson focuses on what names and layout communicate.

You already met comments and whitespace in Statements, comments & semicolons, strict mode in Strict mode, and editor setup in Setting up your tools. Now we combine those basics into everyday readability.

A name should reveal intent: the role a value plays in the program. price is better than n. minimumPrice is better than price when the value is a threshold. Names do not need to be long; they need to be specific enough for the surrounding code.

JavaScript projects commonly use these conventions:

Function names usually start with verbs because functions do work or produce answers: getUser, calculateTotal, renderMenu. Avoid abbreviations unless everyone on the team already uses them, and avoid meaningless numbers like arr2. A later reader should not need a secret decoder ring.

1function doIt(arr2, x, flag) {2  let d = 0;3  for (const item of arr2) {4    if (item.price >= x) {5      d = d + item.price;6    }7  }8  if (flag) {9    d = d - 5;10  }11  return d;12}

Notice the key promise of a safe rename: the result did not change. The program still totals eligible items and applies the coupon. The difference is that the second version explains itself while you read it.

Formatting is the layout of code: indentation, line breaks, spaces, quotes, semicolons, and trailing commas. Bad formatting can make valid code feel broken because your eyes cannot see its shape.

Prettier is a popular formatter. In a real project you install it and let your editor or scripts run it. This page does not run Prettier in the browser; it shows a predefined before-and-after example, formatted the way Prettier defaults would format this snippet.

1const profile={name:"Mina",roles:["mentor","reviewer"]};2function greet(name){return "Hello, "+name+"!"}3console.log(greet(profile.name));

1const profile = {2  name: "Mina",3  roles: ["mentor", "reviewer"],4};5 6function greet(name) {7  return "Hello, " + name + "!";8}9 10console.log(greet(profile.name));

In VS Code, teams often enable Format on Save so the file is cleaned up the moment it is saved. Formatting is different from linting: a formatter fixes layout; a linter such as ESLint points out likely bugs or rules. That is the next lesson.

Comments are not decorations. They are notes for readers. The best comments explain something the code cannot say by itself: a reason, a warning, a temporary decision, or how public code should be used.

1// Adds 5 percent2const fee = subtotal * 0.05;3 4// Keep a small fee so tiny orders still cover card processing.5const minimumFee = Math.max(fee, 1);

Clever code is code that makes the writer feel smart and the reader feel slow. It often appears as nested ternaries, && used for side effects, double negation such as !!value, truncation tricks like ~~x, or long chains of one-letter names. Some of those patterns are useful in advanced code, but they are expensive when a plain if would say the same thing.

Step through this comparison. Both functions are real and the tests run them over several inputs. Your job is not to prove one is more powerful; your job is to notice which one you would rather change next month.

1function shippingMessageClever(itemCount, isMember) {2  return (3    (itemCount &&4      (isMember ? "Free shipping" : itemCount > 3 ? "Discount shipping" : "Standard shipping")) ||5    "Cart is empty"6  );7}8 9function shippingMessageClear(itemCount, isMember) {10  if (itemCount === 0) {11    return "Cart is empty";12  }13  if (isMember) {14    return "Free shipping";15  }16  if (itemCount > 3) {17    return "Discount shipping";18  }19  return "Standard shipping";20}21 22const itemCount = 4;Run23const isMember = false;24console.log(shippingMessageClever(itemCount, isMember));25console.log(shippingMessageClear(itemCount, isMember));

Where you’ll use this

Style shows up anywhere code has to be read: your own debugging notes, a pull request, a tutorial, a team project, or a file you forgot for three weeks. Clear style turns a program into a conversation with its next reader.

1const MAX_RETRY_ATTEMPTS = 3;2 3function canRetryRequest(errorCount, isOffline) {4  if (isOffline) {5    return false;6  }7  return errorCount < MAX_RETRY_ATTEMPTS;8}

• MAX_RETRY_ATTEMPTS is a true constant: a fixed setting the team might discuss.
• canRetryRequest is a verb phrase that tells you it returns a yes/no answer.
• isOffline reads naturally inside an if.
• The early return handles the special case first, so the final line stays simple.

Before sharing code, ask: Do names reveal intent? Did the formatter run? Do comments explain why? Is any expression clever enough to slow down a beginner version of me?

Common misconceptions

Try each task before opening hints. The answer checker is only for the parts with exact outputs or short wording; the real skill is explaining your choice.

const arr2 = ["draft", "sent", "archived"];
const x = arr2.length;
console.log(x);

const statuses = ["draft", "sent", "archived"];
const statusCount = statuses.length;
console.log(statusCount);

const names = ["Ada", "Mina"];
const label = names.length ? names.join(" & ") : "Nobody";
console.log(label);

const names = ["Ada", "Mina"];
let label;
if (names.length === 0) {
  label = "Nobody";
} else {
  label = names.join(" & ");
}
console.log(label);

// Adds 7 because a week has 7 days
const reminderDay = signupDay + 7;

// Wait a full week so new users get one weekend before the reminder.
const reminderDay = signupDay + 7;

const user={name:"Ada",badges:["HTML","JS","CSS"]};
console.log(user.name + " has " + user.badges.length + " badges");

const user = {
  name: "Ada",
  badges: ["HTML", "JS", "CSS"],
};

console.log(user.name + " has " + user.badges.length + " badges");

const paid = true;
const inStock = false;
const message = paid ? (inStock ? "ship now" : "ship tomorrow") : "ask for payment";
console.log(message);

Your first try counts for the score, and every answer explains itself. For code questions, trace the values before you choose.

Key takeaways

• Name values for their role: orderItems, minimumPrice, and hasCoupon beat arr2, x, and flag.
• Use common conventions: camelCase, PascalCase, UPPER_SNAKE_CASE for true constants, boolean prefixes, verb functions, and plural collections.
• Prettier is a formatter. It fixes layout, not logic; ESLint in the next lesson looks for likely bugs and rules.
• Helpful comments explain why, warn about surprises, or document public functions. Delete stale and commented-out code.
• Prefer clear branches over clever puzzles when future readers need to change the code safely.

Up next: Linting with ESLint.