Posted on Jul 25

Understanding JavaScript naming best practices

#webdev #javascript #programming #development

JavaScript is one of the most popular programming languages out there. This is because it is the native language of the web. Every browser (Chrome, Safari, Firefox, Edge etc.) has a built-in JavaScript engine. JavaScript has support for different libraries and frameworks like React, Vue, Angular, jQuery etc. It also has a massive ecosystem via NPM (Node Package Manager) — the largest package registry in the world.

Due to the high popularity of JavaScript, its natural that it is the primary tech stack of the majority of software applications available in the market. Thus, it is essential for developers using JavaScript to create and maintain applications to follow best practices and coding guidelines.

One of the essential guidelines which is often overlooked is the JavaScript naming conventions. Following are the reasons why following JavaScript naming best practices is essential:

Improves code readability: Clear, descriptive names make it easier to understand what a variable, function, or class does.
Enables team collaboration: Consistent naming helps teams work together more efficiently. Everyone knows what to expect when reading or reviewing code.
Makes maintenance easier: The code written months or years ago becomes easier to revisit and modify.
Reduces bugs: Ambiguous or inconsistent names can lead to incorrect assumptions and logic errors.
Improves tooling support: Many linters, static analyzers, IDEs and AI tools can better assist when naming is consistent.

Core principles of JavaScript naming

Consistency is key
Consistency is the cornerstone of effective naming in JavaScript. Whether you prefer using camelCase or snake_case, the key is to stick with one style throughout the codebase. Here's why it matters:

Reduces cognitive load for developers.
Eases maintenance and refactoring.

Language matters
Although JavaScript supports variable names in any language, it is best to stick with English. Doing so offers many advantages:

Ensures universal code readability.
Facilitates collaboration across global teams.

The case for different cases
JavaScript follows different naming conventions based on context:

camelCase for variables, functions and methods.
PascalCase for classes and constructor functions.
UPPER_SNAKE_CASE for constants.
kebab-case for CSS classes and HTML attributes.

Practical naming guidelines

Variables and Functions
Boolean variables: The name of a boolean variable should start with an affirmative prefix, typically 'is' or 'has'. For example:

Bad ❌ const visible = false; Good ✅ const isVisible = false;

Functions and Methods: Function names should be verbs that clearly describe their action. For example:

Bad ❌ function data(user) { // ... } Good ✅ function getUserData(user) { // ... }

Arrays and other Collections
Always use plural nouns for arrays and other collections. For example:

Bad ❌ const bookItemList = ['1984', 'Brave New World', 'Fahrenheit 451']; const userDataObj = new Map(); const selectedIdSet = new Set(); Good ✅ const books = ['1984', 'Brave New World', 'Fahrenheit 451']; const userDataMap = new Map(); const selectedIds = new Set();

Classes and Objects
Classes should use PascalCase and be noun phrases. For example:

Bad ❌ class stringutils { static capitalize() {} } Good ✅ class StringUtils { static capitalize() {} }

Constants
Always use UPPER_SNAKE_CASE for constants. For example:

Bad ❌ const retryAttemps = 3; const apiUrl = 'https://api.example.com'; Good ✅ const RETRY_ATTEMPTS = 3; const API_URL = 'https://api.example.com';

Common mistakes to avoid

Including types in names

Bad ❌ const userArray = ['John', 'Jane']; const nameString = 'John'; Good ✅ const users = ['John', 'Jane']; const name = 'John';

Ambiguous Abbreviations

Bad ❌ const usr = getUser(); const pwd = 'secret'; Good ✅ const user = getUser(); const password = 'secret';

Tools for maintaining naming conventions

To maintain consistent naming conventions in a JavaScript codebase, a variety of tools can be used. Here are the most widely used tools:

ESLint: it is used for linting, checking code quality issues and naming violations.
Prettier: it is used for code formatting, enforcing consistent style and ensuring spacing, quotes, semicolons etc.