DEV Community

Cover image for Rules for naming variables in JavaScript
Ashwani Singh
Ashwani Singh

Posted on

Rules for naming variables in JavaScript

1. Rules for naming variables

Almost all programming languages enforce certain rules on the programmer when naming variables. This is done to prevent one from creating names that could introduce ambiguity into the respective program.

The rules we must follow when naming variables in JavaScript are as follows:

  • Names can only contain alphanumeric characters (a-z, A-Z, 0-9) and the _ (underscore) and $ (dollar sign) characters; nothing else. Hence, first-name is invalid since it contains a hyphen (-) which is illegal to put in a variable name.
  • Names can't begin with a digit. Hence, 2nd is invalid.
  • Names can't contain spaces. Hence, first word is invalid.
  • Names can't be reserved keywords. Hence, var is invalid.

2. Tips for naming variables

In this section, we aim to discuss a handful of tips to consider when naming variables in JavaScript, including which casing convention to use in order to break long words.

2.1 Be descriptive

A variable's name shall clearly describe what it's meant to hold.

Suppose that you have to store a user's name in a variable. It would be really bad if you name the variable a (or x or u for 'user', or any random character). The name a doesn't tell much about what's stored in the variable.

A much better name would be username, or uname.

2.2 Don't be overly descriptive

Suppose we want to create a variable that stores the first name of a user. Being exceptionally descriptive, we could name it thefirstnameofuser, although this would be more than the required amount of description.

A better name would be firstname.

3.3 Abbreviate long words

Sometimes, it's really helpful to abbreviate long words in a given name to short and simple words, given that the abbreviation seems sensible.

For example, the variable dbname could work well instead of databasename. Here, we've abbreviated 'database' to 'db'.

But keep in mind that abbreviations don't always work well.

For instance, naming a variable that holds the name of an object's property as pname would be a complete mess. pname could mean 'property name' or 'panel name' or 'previous name'.

A much better name would be propname β€” with the word 'property' abbreviated down to 'prop'.

2.4 Use a casing convention to break words

When a variable's name contains more than one word, it's desirable to use some casing convention to be able to distinguish between them easily while reading the variable.

  • camelCasing: every word's first letter is uppercased except for that of the first word. Camel casing is the casing used in JavaScript. Here are some identifier names from JavaScript: indexOf, getElementById, querySelectorAll.

  • PascalCasing: every word's first character is uppercased. C# uses Pascal casing for almost all identifiers. Some examples from C# are as follows: WriteLine, ReadLine, GetType.

  • snake_casing: every word is lowercased and separated from the other using the _ (underscore) character. PHP uses snake casing for most of its predefined functions. Some examples from PHP are as follows: array_push, mysqli_connect, str_split.

  • SCREAMING_SNAKE_CASING: every word is uppercased and separated from the other using the _ (underscore) character. This casing is commonly used to denote constants in many programming languages, including JavaScript. Some examples are: MAX_VALUE, MAX_SAFE_INTEGER.

questionsAsked in camel casing.

QuestionsAsked in Pascal casing.

questions_asked in snake casing.

QUESTIONS_ASKED in screaming snake casing.
Enter fullscreen mode Exit fullscreen mode

3. Which casing convention to use in JavaScript?

The two most common conventions used for naming variables in most of the programming languages out there are camel casing and snake casing.

The question of 'which convention to use in JavaScript' really boils down to the question of 'whether to use camel casing or snake casing in JavaScript'.

Honestly speaking, this is solely a matter of preference. If you like camel casing, go with it. Similarly, if snake casing appeals you, go with it. Whatever you choose, make sure to stick with it β€” consistency is a must!

In this course, we'll use the camel casing convention to name variables. The reason is extremely simply β€” it's the convention used throughout JavaScript for function and method names.

Top comments (3)

Collapse
 
erackcoder profile image
Erackcoder

Very helpful post

Collapse
 
imashwani profile image
Ashwani Singh

Thank you

Collapse
 
efpage profile image
Eckehard

The programming language Pascal ignores the letter case, so it is strange that some people use "PascalCasing". This should mean: do what you want!