Naming conventions are guidelines or rules used to define the names of variables, functions, classes, and other identifiers in software development. Consistently following naming conventions makes code more readable, understandable, and maintainable across projects and teams. Different programming languages and communities often have their own specific naming conventions.
Properties
JavaScript supports properties with underscores (_prop
), dollar signs ($prop
), and hash symbols (#prop
). These naming conventions are typically used to convey certain meanings or follow specific coding standards.
Underscore
Underscore properties (_prop
) are often used to indicate private properties or internal variables within a class.
class User {
_userToken;
get token() {
return this._userToken;
}
set token(token) {
this._userToken = token;
}
}
Dollar Sign
The dollar sign ($prop
or prop$
) can be used as a valid character for variable and property names and is frequently seen in libraries and frameworks to denote special variables, properties, or functions.
In jQuery, $ is used as an alias for the jQuery function. In older Angular, $scope is a common convention for scope objects. In Vue.js, properties prefixed with $ (e.g., $el, $data, $watch) are reserved for Vue’s internal properties and methods.
this.$watch('a', (newVal, oldVal) => {})
Hash Symbol
Hash Symbol (#prop
) properties are used to declare private class fields. This is a relatively new syntax introduced in ECMAScript 2019 (ES10).
class User {
#userToken;
get token() {
return this.#userToken;
}
set token(token) {
this.#userToken = token;
}
}
Variables
Variable names can include alphanumeric characters, underscores (), and dollar signs ($), but they must begin with a letter (a-z, A-Z), underscore (), or dollar sign ($).
Underscore
Underscores are commonly used in variable names and are fully supported.
let _variableUnderscore = 'underscore variable';
Dollar sign
Dollar signs are also valid in variable names and are often used, especially in contexts like jQuery or certain JavaScript libraries.
let $variableDollar = 'dollar variable';
let variableDollar$ = 'dollar variable';
Hash Symbol
The hash symbol (#) is reserved for private class fields. It cannot be used in variable names. Using the hash symbol outside of a class declaration will result in a syntax error.
Special naming conventions
Special naming conventions can be applied to properties and variables to indicate specific meanings or uses.
CamelCase
CamelCase is the most common naming convention for variables, functions, and methods. The first letter is lowercase, and subsequent words start with an uppercase letter.
let userName = 'Peter';
PascalCase
PascalCase is used for class names and constructor functions. Every word starts with an uppercase letter.
class DemoClass {
constructor() {
// ...
}
}
Snake Case
Not often used in TypeScript. Words are separated by underscores.
let user_name = 'Peter';
function get_user_name() {
// ...
}
Hungarian Notation
This convention prefixes variable names with an abbreviation of their type or intended use.
let strName = 'John';
let numAge = 38;
Leading and Trailing Underscores
Leading underscore (_prop
) is often used to denote private or protected members of a class. Trailing underscore (prop_
) is used to avoid naming conflicts or to indicate temporary or special-use variables.
class User {
_userName;
name_;
name;
constructor(value) {
this._userName = value;
this.name_ = "temporary";
}
// ...
}
Underscore
Using an underscore (_
) as a method or function parameter is a helpful convention to indicate that the parameter is intentionally ignored.
function example(_, param) {
console.log(param);
}
example('unused', 'used');
Using an underscore (_
) as the entire name of a function or method is valid, though it is quite unusual.
const _ = function() {
console.log("This is a placeholder function.");
};
const obj = {
_: function() {
console.log("This is a method with an underscore name.");
}
};
Using _
as a function or method name is syntactically valid, but using more descriptive names is generally preferred for readability and maintainability.
Mixed conventions
Mixing conventions is generally not a recommended practice. Using mixed conventions can confuse developers familiar with standard naming conventions.
#_MixOf_conventions = "";
Conclusion
JavaScript supports a variety of naming conventions, some of which are commonly used and others are specific to certain use cases. Understanding and using these conventions appropriately can help make your code more readable and maintainable.