A naming convention is a set of rules or guidelines that people agree upon to name things. These rules can vary depending on their purpose. The main goals of a naming convention are to provide helpful information, show relationships, and ensure that each name is unique within a specific context.
The naming convention can be useful by allowing us to deduce useful information from the names themselves. For example, in Manhattan, the streets are numbered consecutively. The east-west streets are called "Streets," and the north-south streets are called "Avenues." This naming scheme helps us understand the layout of the city and easily locate places.
It can be used to show relationships between things. For instance, in personal naming conventions, family members may have similar names or share common elements in their names. This can indicate their familial connection or ancestry.
It ensures that each name is unique within a specific scope. This prevents confusion or ambiguity when referring to different things. By following a naming convention, we can easily identify and distinguish one item from another within a given context.
JAVASCRIPT NAMING CONVENTIONS: VARIABLES
In JavaScript, naming conventions for variables are important to follow. Here are some key points to remember:
1. Case Sensitivity: JavaScript considers variables with lowercase and uppercase characters as different variables. For example:
var name = 'Robin Wieruch';
var Name = 'Dennis Wieruch';
var NAME = 'Thomas Wieruch';
console.log(name); // "Robin Wieruch"
console.log(Name); // "Dennis Wieruch"
console.log(NAME); // "Thomas Wieruch"2. Descriptive Names: Variables should have names that clearly describe their purpose. It is best to avoid using generic or ambiguous names that require additional comments for understanding. For example:
// Avoid:
var value = 'Robin';
var val = 'Robin';
// Prefer:
var firstName = 'Robin'; 3. Camel Case: Most JavaScript variables are declared using camelCase, where the first letter of the variable name starts with a lowercase letter and each subsequent word starts with an uppercase letter. For example:
// Avoid:
var firstname = 'Robin';
var first_name = 'Robin';
var FIRSTNAME = 'Robin';
var FIRST_NAME = 'Robin';
// Prefer:
var firstName = 'Robin'; 4. Case Styles: JavaScript primarily uses camelCase and PascalCase for variable names. Other case styles, such as snake_case and kebab-case, are not commonly used in JavaScript naming conventions.
camelCase: Each word starts with an uppercase letter except for the first word. For example: firstName, lastName.
PascalCase: Each word starts with an uppercase letter, including the first word. This convention is commonly used for class or constructor names. For example: Person, Car.
Additional Rules:
Names are case-sensitive, so lowercase and uppercase letters are considered different.
Variable names should start with a letter and not a number.
Boolean variables often have prefixes like is or has to indicate their purpose. For example: isLogged, hasPermission.
Remember to follow these guidelines to write clean and readable code that is easier to understand and maintain.
JAVASCRIPT NAMING CONVENTIONS: BOOLEAN
Using prefixes like "is," "are," or "has" can greatly assist JavaScript developers in quickly identifying boolean variables. Here are some examples to illustrate this best practice:
1. Clearer Naming:
Using clear and descriptive variable names helps to convey the purpose and meaning of the variable. When other developers read your code, they should be able to understand the purpose of each variable without needing additional comments or documentation. By choosing names that accurately describe the data or functionality the variable represents, you make your code more self-explanatory and easier to maintain.
// Avoid:
var visible = true;
// Prefer:
var isVisible = true; 2. Improved Readability:
Readable code is crucial for collaboration and maintaining a codebase. When code is readable, it can be easily understood and navigated by developers, reducing the chances of introducing bugs or making errors. By following naming conventions and using meaningful names, you enhance the readability of your code. Clear and well-chosen variable names make it easier to understand the purpose of each variable, leading to better comprehension of the code logic.
// Avoid:
var equal = false;
// Prefer:
var areEqual = false; 3. Enhancing Understanding:
Well-named variables go beyond just fulfilling a syntactical requirement; they contribute to the overall understanding of the codebase. By choosing descriptive names, you provide valuable context and make it easier for others (including your future self) to grasp the purpose and functionality of the code. This understanding enables developers to work more efficiently, make informed decisions, and troubleshoot issues effectively.
// Avoid:
var encryption = true;
// Prefer:
var hasEncryption = true; By adding prefixes like "is," "are," or "has" to boolean variable names, developers can easily distinguish them from other types of variables. This simple convention makes it clear at a glance that the variable represents a boolean value and provides additional context about its purpose.
It's important to note that this naming convention is specific to boolean variables and complements the use of camel case. While it is not a strict requirement, following this convention contributes to the readability and maintainability of your JavaScript code.
In contrast to strings and integers, you can see it as another soft rule for a JavaScript boolean naming convention besides being written in camel case.
JAVASCRIPT NAMING CONVENTIONS: FUNCTION
JavaScript functions should be written in camel case, just like variables. It is also considered a best practice to use a verb as a prefix in the function name to indicate what the function does. Here are some examples:
1. Clear Naming:
// Avoid:
function name(firstName, lastName)
{
return `${firstName} ${lastName}`;
}
// Prefer:
function getName(firstName, lastName)
{
return `${firstName} ${lastName}`;
} 2. Descriptive Naming: By using a verb in the imperative form as a prefix, you make the purpose and action of the function more explicit. Here are a few examples of common prefixes that can be used:
get: for functions that retrieve or fetch data
make: for functions that create or generate something
apply: for functions that apply or perform a specific action
calculate/compute: for functions that perform mathematical or computational operations
post: for functions that handle posting or sending data
// Examples:
function getUserName(user) { /* ... */ }
function makeGreeting(name) { /* ... */ }
function applyDiscount(price, discount) { /* ... */ }
function calculateArea(radius) { /* ... */ }
function postMessage(message) { /* ... */ } 3. Class Methods: The same rules apply to naming class methods as well. Use camel case and descriptive names that indicate the action performed by the method.
In summary, JavaScript functions should follow camel case and have a verb as a prefix to describe their purpose. By using clear and descriptive function names, you enhance the readability and maintainability of your code. Consider the actions performed by the function and choose appropriate prefixes to make your code more self-explanatory and understandable to other developers.
JAVASCRIPT NAMING CONVENTIONS: CLASS
In JavaScript, class declarations differ from other data structures as they are written in PascalCase. When defining a class, the name of the class should start with a capital letter and follow PascalCase conventions. Here's an example:
1. Class Declaration:
class SoftwareDeveloper {
constructor(firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
} 2. Instantiating a Class: When creating a new instance of a class using the constructor, the class name should be invoked with the new keyword and follow PascalCase conventions.
var me = new SoftwareDeveloper('Robin', 'Wieruch'); Class Naming Guidelines: The following rules apply to naming JavaScript classes:
Names are case-sensitive, meaning that lowercase and uppercase letters are considered different.
Class names should start with a capital letter.
Use PascalCase for class names, which means that each word in the name starts with an uppercase letter.
Choose descriptive names that accurately explain the functionality or purpose of the class.
The naming conventions for components used in frontend frameworks, such as React or Vue.js, follow the same rules. By adhering to these guidelines, your code will be consistent and easier to understand, ensuring that your classes and components are clearly distinguishable from other elements in your JavaScript codebase.
JAVASCRIPT NAMING CONVENTIONS: COMPONENT
Components, especially those used in frontend frameworks like React, follow similar naming conventions as JavaScript classes. They are commonly declared using PascalCase. Here's an example to illustrate this:
1. Component Declaration:
// Avoid:
function userProfile(user)
{
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
}
// Prefer:function UserProfile(user)
{
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
} 2. Using Components: When using a component in JSX or any other templating syntax, it is distinguished from native HTML and web components by the fact that its first letter is always written in uppercase. This convention makes it clear that the element is a custom component and not a standard HTML tag.
<div>
<UserProfileuser={{ firstName: 'Robin', lastName: 'Wieruch' }} />
</div> Components, being a type of JavaScript construct, are typically declared using PascalCase to differentiate them from regular functions or variables. By following this convention, you make it easier to identify and distinguish components from other parts of your codebase. Additionally, when using components in JSX or templating syntax, adhering to the convention of starting the component name with an uppercase letter helps clearly indicate that it represents a custom component.
While components are most commonly associated with frontend frameworks like React, it's important to note that these naming conventions can also apply to other component-based frameworks or libraries where similar principles are followed.
Overall, by consistently using PascalCase for component names, you contribute to the clarity and maintainability of your code, ensuring that components are easily recognizable and differentiated from other elements in your JavaScript codebase.
JAVASCRIPT NAMING CONVENTIONS: METHODS
Similar to JavaScript functions, methods on a JavaScript class are declared using camelCase. Let's consider an example to demonstrate this:
1. Method Declaration:
class SoftwareDeveloper
{
constructor(firstName, lastName)
{
this.firstName = firstName;
this.lastName = lastName;
}
getName()
{
return `${this.firstName} ${this.lastName}`;
}
} 2. Invoking a Method: When calling a method on a class instance, you can use dot notation to access and execute the method.
var me = new SoftwareDeveloper('Robin', 'Wieruch');
console.log(me.getName());
// Output: "Robin Wieruch"Naming Guidelines for Methods:
The same naming rules that apply to JavaScript functions also apply to methods on a class. You can use a descriptive verb as a prefix to make the method name more self-explanatory and indicate its action or purpose.
class SoftwareDeveloper
{
// ...
// Example with a verb prefix:
calculateSalary()
{
// Method logic goes here
}
} Following these guidelines, you ensure consistency and clarity within your codebase. By using camelCase for method names and incorporating descriptive verbs as prefixes when appropriate, you enhance the readability and understandability of your JavaScript classes.
JAVASCRIPT NAMING CONVENTIONS: CONSTANT
In JavaScript, constants are used to represent non-changing values, and they are typically written in uppercase letters. Here's an explanation of JavaScript naming conventions for constants:
1. Constant Declaration:
var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS; Constants are declared using var, let, or const, but for convention, uppercase letters are used to indicate that the variable should be treated as a constant. It's important to note that while the convention suggests that constants should not be changed, JavaScript itself does not enforce immutability for variables declared with var or let. To ensure immutability, you can use const to declare a constant value.
2. Naming Guidelines for Constants:
Names are case-sensitive, meaning that lowercase and uppercase letters are considered different.
Constants are typically defined at the top of a JavaScript file, function, or class to provide easy visibility and access.
For constants with multiple words, an underscore (_) is commonly used to separate the words. This convention is known as UPPER_SNAKE_CASE.
Alternatively, plain camelCase may also be used for constants in certain cases.
// Example with UPPER_SNAKE_CASE:
var DAYS_UNTIL_TOMORROW = 1;
// Example with plain camelCase:
var maxAttempts = 3; It's important to note that while uppercase naming conventions suggest that a variable should not be changed, it's still possible to modify variables declared with var or let. However, using uppercase naming for constants provides a visual indication that their values are intended to remain unchanged.
By following these naming conventions, you can effectively distinguish constants from other variables in your codebase and convey their immutability and importance.
Comments