Loading...
Loading...
August 19, 2026
In this story, we will understand which kind of refactoring can be done to JavaScript code with our best practices to make our code more consistent, optimized, and readable for everyone.
Naming conventions are crucial when creating variables, classes, functions, etc. Following proper naming conventions helps make your code more readable and maintainable. Here are some key rules and examples of good and bad naming practices.
Use Descriptive Names: Choose names that clearly describe the purpose of the variable or function.
Good: totalPrice, userAge, calculateSum()Bad: tp, ua, cs()
Camel Case for Variables and Functions: Start with a lowercase letter and capitalize the first letter of each subsequent word.
Good: totalAmount, getUserInfo()
Bad: total_amount, get_user_info()
Pascal Case for Classes: Start with an uppercase letter and capitalize the first letter of each subsequent word.
Good: UserProfile, AccountManagerBad: userProfile, account_manager
Use Constants for Fixed Values: Use uppercase letters with underscores for constants.
Good: MAX_RETRIES, API_ENDPOINTBad: maxRetries, apiEndpoint
Avoid Single Letter Names: Except for loop counters or very short-lived variables.
Good: index, countBad: i, x
Use Meaningful Prefixes for Boolean Variables: Use is, has, can, should to denote boolean values.
Good: isValid, hasPermissionBad: valid, permission
Verb and Noun Usage in Function Names: Functions describe actions, so, their names should typically start with a verb that conveys the action the function performs. Functions often manipulate data, so, the verb in the function name can be followed by a descriptive noun that clarifies the data the function works with.
Good:calculateTotalPrice(itemList) (verb: calculate, noun: totalPrice)getUserInfo(userId) (verb: get, noun: UserInfo)
Bad:calcPrice(list) (less descriptive verb: calc, less specific noun: price)userAuth() (ambiguous verb: userAuth)
// variables
// Bad Example
let ue = 'example@example.com';
let price = 29.99; // which price?
// Good Example
let userEmailAddress = 'example@example.com';
let itemPrice = 29.99;
// functions
// Bad Example
function calcPrice(list) {
// Function implementation
}
function userAuth() {
// Function implementation
}
// Good Example
function calculateTotalPrice(itemList) {
// Function implementation
}
function isUserAuthenticated() {
// Function implementation
}
// Classes
// Bad Example
class shoppingcart {
// Class implementation
}
class useraccount {
// Class implementation
}
// Good Example
class ShoppingCart {
// Class implementation
}
class UserAccount {
// Class implementation
}First of all, understand the difference between argument and parameter.
An argument is the actual value or data you pass to the function when you call it
A parameter is a variable defined in the function declaration or definition. It acts as a placeholder for the value that will be passed to the function when it is called
For best practices, arguments and parameters of function should be pass in object rather than in a sequence way. Let take a scenario to understand this rule, suppose we have to pass minimum 4–5 arguments in the function so these arguments are in the sequence and will recieve in a same sequence in parameters as it were passed in arguments if you change the sequence by mistake then values will shuffle and function will calculate wrong result. Sometimes, anyone of argument can be optional but you have to pass this variable as a null because you have to follow sequence, so rather than using this way, we should pass arguments in object and recieve them in object in parameters, now this time you dont have to follow the sequence but you need to get parameter with same name as you have passed in argument, if anyone of these arguments are optional then you can set value of that argument null inside parameters by default then you dont need to pass that null variable in argument. This will reduce the number of arguments if someone of them are not required then no need to pass them and made your function more clear and readable.
// Bad Example
function createUser(name, age, email, address, phone, isAdmin) {
// function implementation
}
// here you can see that there are two null values and you have to pass these null value
// because you are following the sequence. You can miss these values by mistake and it will crash the function
createUser('Alice', null, 'alice@example.com', null, '555-1234', true);
// Good Example
// As you can see that you can make optional value null here or whatever you want to add initial value
function createUser({ name, age = null, email, address = null, phone, isAdmin }) {
// function implementation
}
// you can change the order here
createUser({
name: 'Alice',
age: 30,
email: 'alice@example.com',
phone: '555-1234',
isAdmin: true,
address: '123 Main St',
});
// if you don't want to pass optional value just remove it from here will not crash your function
createUser({
name: 'Alice',
email: 'alice@example.com',
phone: '555-1234',
isAdmin: true
});Try to avoid the traditional “for loop” instead of this use “for…of loop” for more readability. Here are the following reasons:
The for...of loop provides a more readable and concise way to iterate over the elements of an array.
It avoids common pitfalls of the traditional for loop, such as off-by-one errors and manual index management.
It expresses the intention to iterate over all elements directly, making the code more understandable.
// Bad Example
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
// here you have to handle index to access variable value in traditional for loop
for (let i = 0; i < users.length; i++) {
console.log(`${users[i].name} is ${users[i].age} years old.`);
}
// Good Example
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
for (const user of users) {
console.log(`${user.name} is ${user.age} years old.`);
}Note: This rule mostly applies to an array of objects, but you can also use this on a simple array of strings or numbers, etc. Choice is yours…
Whenever a constant is needed for multiple items with multiple keys (e.g. values, labels, html elements, etc.), use the following structure:
export const USER_STATUSES = {
active: {
value: 'active', // same as key
label: 'Active User', // can be any label that we want to show in interface
iconColor: '#4CAF50',
htmlElement: '<span class="badge badge-success">Active</span>',
messageGenerator: (name) => `User ${name} is active`, // notice how is this a function that takes a name and returns a message, this is useful for generating messages dynamically and not hardcoding them in the code. The function if needed can be imported from another file instead of being defined here.
},
underInspection: {
value: 'underInspection',
label: 'Blocked User',
iconColor: '#00000',
htmlElement: '<span class="badge badge-danger">Blocked</span>',
messageGenerator: (name) => `User ${name} is blocked`,
},
};
// You might need to use the above object. for example, you can use the following code
export const USER_STATUSES_OPTIONS = Object.keys(USER_STATUSES).map((key) => ({
value: USER_STATUSES[key].value,
label: USER_STATUSES[key].label,
}));
// You can also use the following code to generate the values
export const USER_STATUSES_VALUES = Object.keys(USER_STATUSES); // This will return ['active', 'underInspection'] which is what's needed since the values are always the keys in the object
// You can also use the following code to generate the labels
export const USER_STATUSES_LABELS = Object.keys(USER_STATUSES).map(
(key) => USER_STATUSES[key].label
); // This will return ['Active User', 'Blocked User']Avoid code duplication by creating reusable functions or constants.
// Bad Example
const priceWithTax1 = price1 + price1 * 0.2;
const priceWithTax2 = price2 + price2 * 0.2;
// Good Example
function calculatePriceWithTax(price) {
const taxRate = 0.2;
return price + price * taxRate;
}
const priceWithTax1 = calculatePriceWithTax(price1);
const priceWithTax2 = calculatePriceWithTax(price2);Arrow functions provide a shorter syntax and do not have their own this context. This will minimize your code.
// Bad Example
setTimeout(function() {
console.log("Hello");
}, 1000);
// Good Example
setTimeout(() => console.log("Hello"), 1000);Use destructuring to access object properties and array elements concisely.
// Bad Example
const user = { name: "John", age: 30 };
const name = user.name;
const age = user.age;
// Good Example
const { name, age } = user;Template literals make string concatenation easier and more readable
// Bad Example
const greeting = "Hello, " + name + "!";
// Good Example
const greeting = `Hello, ${name}!`;Use ternary operators or logical operators for simple conditions rather than using simple if-else condition.
// Bad Example
let result;
if (isValid) {
result = "Success";
} else {
result = "Failure";
}
// Good Example
const result = isValid ? "Success" : "Failure";Most of the times, we use comparison operators in writing the conditions of if-else, so we should assign that condition to separate variable. This will make you easier to understand the code in the case of nested or complex comparison conditions
// Bad Example
if(user?.role === "student" && user?.grade === "pass"){
// Do something
} else {
// Do something
}
// Good Example
const isStudent = user?.role === "student"
const isStudentPass = user?.grade === "pass"
if(isStudent && isStudentPass) {
// Do something
} else {
// Do something
}An “Ambiguous Message” rule for API errors and responses in JavaScript ensures that all error messages and responses are clear, specific, and informative to help developers and users understand the exact issue and take appropriate action.
Error messages should clearly state what went wrong. Avoid using vague phrases like “Something went wrong” or “Error occurred.”
Include relevant details, such as the error code, the affected component, or the action that caused the error. For example: “Error 404: Resource not found — The requested user profile does not exist.”
Examples
Generic Message:
Bad: “Error occurred.”
Why it’s bad: Doesn’t provide any meaningful information about the error, leaving users confused.
2. Technical Jargon:
Bad: “HTTP 500 — NullPointerException at line 34.”
Why it’s bad: Uses technical language and details that a non-technical user won’t understand and shouldn’t see.
3. Unclear or Overly Brief:
Bad: “Invalid input.”
Why it’s bad: Doesn’t specify which input is invalid or what the correct format should be.
4. Unhelpful Instructions:
Bad: “Try again later.”
Why it’s bad: Provides no guidance on what went wrong or if there’s anything the user can do to resolve it now.
Clear and Descriptive:
Good: “The email address entered is not valid. Please use a format like user@example.com.”
Why it’s good: Clearly explains what went wrong and provides an example of the correct format.
2. User-Friendly Language:
Good: “It looks like your session has expired. Please log in again to continue.”
Why it’s good: Uses friendly language that is easy to understand and tells the user what action to take.
3. Actionable Feedback:
Good: “Your password must be at least 8 characters long and contain a mix of letters and numbers.”
Why it’s good: Provides specific requirements to help the user correct their mistake.
4. Contextual and Relevant:
Good: “We couldn’t find a match for ‘search term.’ Please check your spelling or try a different term.”
Why it’s good: Relates directly to the user’s action and suggests next steps.
5. Guidance for Resolution:
Good: “The file you uploaded exceeds the 5 MB size limit. Please upload a smaller file.”
Why it’s good: Clearly states the issue and tells the user what to do next
Incorporating effective refactoring practices into JavaScript code can significantly enhance its readability, maintainability, and performance. By adhering to best practices such as consistent naming conventions, using descriptive and meaningful names, adopting modern JavaScript features like arrow functions and destructuring, and avoiding code duplication through DRY principles, developers can create cleaner and more efficient code.
Additionally, leveraging object destructuring and template literals improves code clarity and conciseness, while proper handling of function parameters and arguments enhances flexibility and reduces errors. Using ternary operators and separating complex comparison conditions into clear variables can simplify logic and improve comprehension. Furthermore, providing clear and specific error messages ensures that users and developers can quickly understand and address issues.
By implementing these refactoring strategies, you not only write better code but also create a more robust and user-friendly application. Embracing these practices will lead to more maintainable projects and a smoother development process, ultimately resulting in higher quality software.
Happy Coding!