Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (63)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (152)DocIO  (23)Essential JS 2  (84)Essential Studio  (172)File Formats  (28)Flutter  (123)JavaScript  (186)Microsoft  (113)PDF  (67)React  (61)Succinctly series  (128)Syncfusion  (609)TypeScript  (31)Uno Platform  (3)UWP  (4)Vue  (39)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (155)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (119)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (394)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (10)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (311)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (224)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (16)Web  (371)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
10 JavaScript Naming Conventions Every Developer Should Know

10 JavaScript Naming Conventions Every Developer Should Know

Following standard naming conventions increases readability and makes it easier to understand your code. However, many developers are not aware of how to use naming conventions correctly, and sometimes they make things complicated.

In this article, I will discuss 10 JavaScript naming convention best practices you should follow.

1. Naming Convention for Variables

JavaScript variable names are case-sensitive. Lowercase and uppercase letters are distinct. For example, you can define three unique variables to store a dog name, as follows.

var DogName = 'Scooby-Doo';
var dogName = 'Droopy';
var DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"

However, the most recommended way to declare JavaScript variables is with camel case variable names. You can use the camel case naming convention for all types of variables in JavaScript, and it will ensure that there aren’t multiple variables with the same name.

// bad
var dogname = 'Droopy'; 
// bad
var dog_name = 'Droopy'; 
// bad
var DOGNAME = ‘Droopy’; 
// bad
var DOG_NAME = 'Droopy'; 
// good
var dogName = 'Droopy';

The names of variables should be self-explanatory and describe the stored value. For example, if you need a variable to store a dog’s name, you should use dogName instead of just Name since it is more meaningful.

// bad
var d = 'Scooby-Doo';
// bad
var name = 'Scooby-Doo';
// good
var dogName = 'Scooby-Doo';

2. Naming Convention for Booleans

When it comes to Boolean variables, we should use is or has as prefixes. For example, if you need a Boolean variable to check if a dog has an owner, you should use hasOwner as the variable name.

// bad
var bark = false;
// good
var isBark = false;
// bad
var ideal = true;
// good
var areIdeal = true;
// bad
var owner = true;
// good
var hasOwner = true;

Explore the best and most comprehensive JavaScript UI controls library in the market.

3. Naming Convention for Functions

JavaScript function names are also case-sensitive. So, similar to variables, the camel case approach is the recommended way to declare function names.

In addition to that, you should use descriptive nouns and verbs as prefixes. For example, if we declare a function to retrieve a name, the function name should be getName.

// bad
function name(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

// good
function getName(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

4. Naming Convention for Constants

JavaScript constants are also case-sensitive. However, these constants should be written in uppercase because they are nonchanging variables.

var LEG = 4;
var TAIL = 1;
var MOVABLE = LEG + TAIL;

If the variable declaration name contains more than one word, you should use UPPER_SNAKE_CASE. 

var DAYS_UNTIL_TOMORROW = 1;

All the constants should be defined at the start of your file, method, or class.

5. Naming Convention for Classes

Naming convention rules for JavaScript classes are pretty similar to functions. We have to use descriptive titles that explain the class’s capabilities.

The major difference between function and class names is that we have to use Pascal case for class names.

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

6. Naming Convention for Components

JavaScript components are widely used in front-end frameworks like React. Although components are used in the DOM, treating them similarly to classes and using Pascal case to define names is recommended.

// bad
function dogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
} 

// good
function DogCartoon(roles) { 
  return ( 
    < div > 
      < span > Dog Name: { roles.dogName } < /span> 
      < span > Owner Name: { roles.ownerName } < /span> 
    < /div> 
  );
}

Since the initial letter is always written in uppercase, a component stands out from native HTML and web components when utilized.

<div> 
  <DogCartoon 
    roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} 
  />
</div>

Everything a developer needs to know to use JavaScript control in the web app is completely documented.

7. Naming Convention for Methods

Although there are some differences, the structure of a JavaScript function and a method are pretty similar. So, naming convention rules are the same.

We must use camel case to declare JavaScript methods and use verbs as prefixes to make names more meaningful.

class DogCartoon {
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }

  getName() { 
    return '${this.dogName} ${this.ownerName}'; 
  }
}

var cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');

console.log(cartoon.getName());
// "Scooby-Doo Shaggy"

8. Naming Convention for Denoting Private Functions

Underscores ( _ ) are widely used in languages like MySQL and PHP to define variables, functions, and methods. But in JavaScript, an underscore is used to denote private variables or functions.

For example, if you have a private function name like toonName, you can denote it as a private function by adding an underscore as a prefix (_toonName).

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
    this.name = _toonName(dogName, ownerName); 
  } 
  _toonName(dogName, ownerName) { 
    return `${dogName} ${ownerName}`; 
  } 
}

var cartoon = new DodCartoon('Scooby-Doo', 'Shaggy'); 

// good
var name = cartoon.name;
console.log(name);
// "Scooby-Doo Shaggy" 

// bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);
// "Scooby-Doo Shaggy"

9. Naming Convention for Global Variables

For global JavaScript variables, there are no specific naming standards.

It is recommended to use camel case for mutable global variables and uppercase for immutable global variables.

Syncfusion JavaScript controls allow you to build powerful line-of-business applications.

10. Naming Convention for File Names

Most web servers (Apache, Unix) are case-sensitive when it comes to handling files. For example, flower.jpg isn’t Flower.jpg.

On the other hand, web servers, such as Microsoft’s IIS, do not care about the case. In such servers, you can use Flower.jpg or flower.jpg to access Flower.jpg.

However, if you switch from a case-insensitive server to a case-sensitive server, even a tiny mistake can cause your website to crash.

So, it is recommended to use lowercase file names in all servers despite their case-sensitive support.

Conclusion

In this article, I discussed 10 JavaScript naming conventions that can be used to improve our coding skills. As developers, we should always adhere to best practices, since that will increase readability and make it easier for you and your team to understand your code.

I hope those suggestions will help you improve your coding skills. Thank you for reading.

The Syncfusion JavaScript suite will be the only suite you will ever need to build an application. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download the FREE trial and evaluate the controls today.

If you have any questions or comments, you can contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top