Code style refers to the set of rules and conventions that guide how you write and format your code. Think of it like grammar and punctuation in writing – just as proper grammar makes text easier to read and understand, consistent code style makes your programs clearer for both you and others who read your code.
Good code style includes things like how you name variables, where you place spaces and brackets, and how you indent your code. Following a consistent style is important because it makes your code more readable, helps prevent mistakes, reduces confusion when working in teams, and makes it easier to maintain and update your programs later. As a beginner, developing good style habits early will save you time and frustration as your projects grow more complex.
Indentation is essential for understanding the logic flow of your code, especially with nested if statements. The rule is simple: after opening a code block with a curly brace {, indent your code to show that it belongs inside that block. Inspect the example:
✅ Do
if (name === 'Alice') {
console.log('Hello, Alice!');
let secretCode = prompt('Enter the secret code: ');
if (secretCode === '1234') {
console.log('Access granted.');
} else {
console.log('Access denied.');
}
} else {
console.log('Sorry, you are not Alice.');
}
❌ Don’t
if (name === "Alice") {
console.log("Hello, Alice!");
let secretCode = prompt("Enter the secret code: ");
if (secretCode === "1234") {
console.log("Access granted.");
} else {
console.log("Access denied.");
}
}
else {
console.log('Sorry, you are not Alice.');
}
On the example on the right, it is very difficult to understand which if statement is the main one and which is the nested.
Using spaces and newlines can separate different sections of you application. Use it to your advantage:
import promptSync from "prompt-sync";
const prompt = promptSync();
const name = prompt("Enter your name: ");
if (name === 'Alice') {
console.log('Hello, Alice!');
let secretCode = prompt('Enter the secret code: ');
if (secretCode === '1234') {
console.log('Access granted.');
} else {
console.log('Access denied.');
}
} else {
console.log(' Sorry, you are not Alice.');
}
console.log('Goodbye!');
VSCode has a built-in code formatter tool. To access it, first open up the command palette (Ctrl+Shift+P or CMD+Shift+P ), type “Format Document”. Learn the keyboard shortcut for future use.
In programming, you will need to come up with appropriate names for your variables, functions, files etc…
The most important consideration in naming a variable is that the name fully and accurately describes the entity the variable represents. An effective technique for coming up with a good name is to state in words what the variable represents. Often that statement itself is the best variable name. It’s easy to read because it doesn’t contain cryptic abbreviations, and it’s unambiguous. Because it’s a full description of the entity, it won’t be confused with something else. And it’s easy to remember because the name is similar to the concept.
Source: Code Complete 2, Steve McConnell
The names you choose benefit the people reading your code. Most importantly, that person is you. When writing code, carefully chosen names help you stay focused on the problem you're trying to solve. When you revisit your code later, good names will help you reconstruct your original thinking.
In practice, others may need to maintain your code as you move to different projects or jobs. For these developers, carefully chosen names are even more critical - they haven't been through your thought process.
The consumer least interested in your names is the runtime environment (the JavaScript engine in your browser or Node.JS). It doesn't mind meaningless, one-letter variable names.
Variable names cannot contain spaces. Therefore, we need a way to write multiple words without using spaces. Fortunately, there are several popular conventions.
These conventions describe how to spell multi-word names for variables, files, functions, and more.
myVariableName, getUserDetails, isButtonEnabledMyFirstName, UserProfile, CalculateTotalPricemy_variable_name, get_user_details, is_button_enabledmy-variable-name, get-user-details, is-button-enabledMAX_VALUE, API_KEY, DEFAULT_TIMEOUTIn HackYourFuture, we encourage the following naming conventions:
camelCase for variable and function names.PascalCase for class names (classes are discussed in Week 11 - OOP & LLMs).UPPER_CASE for bash environment variables. You may also see UPPER_CASE in JavaScript for constants that are conceptually constant and never meant to change.kebab-case for file names.Every company decides on its own JavaScript style and naming conventions. Here are a few examples:
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 **
