Following standard naming conventions during development improves code readability and makes it easier to understand. Here’s a look at best practices for naming conventions in JavaScript.

This article was first published on wechat public account: Front-end Charging Treasure

My wechat: CUG-gz

1. Naming conventions for variables

JavaScript variable names are case sensitive; upper and lower case letters are different. Such as:

let DogName = 'Scooby-Doo';
let dogName = 'Droopy';
let DOGNAME = 'Odie';
console.log(DogName);   // "Scooby-Doo"
console.log(dogName);   // "Droopy"
console.log(DOGNAME);   // "Odie"
Copy the code

However, the most recommended way to declare JavaScript variables is to use humped variable names. We can use the camel ‘s-back naming convention for all types of JavaScript variables so that we don’t have identically named variables.

// bad
let dogname = 'Droopy'; 
// bad
let dog_name = 'Droopy'; 
// bad
let DOGNAME = 'Droopy'; 
// bad
let DOG_NAME = 'Droopy'; 
// good
let dogName = 'Droopy';
Copy the code

Variable names should be self-explanatory and describe the stored value. For example, if you need a variable to store the dog’s Name, you should use dogName instead of Name because dogNam makes more sense:

// bad
let d = 'Droopy';
// bad
let name = 'Droopy';
// good
let dogName = 'Droopy';
Copy the code

2. Naming conventions for Booleans

When defining variables of Boolean type, they should be prefixed with is or has. For example, if you need a variable to check whether the dog has a director, you should use hasOwner as the variable name:

// bad
let bark = false;
// good
let isBark = false;

// bad
let ideal = true;
// good
let areIdeal = true;

// bad
let owner = true;
// good
let hasOwner = true;
Copy the code

3. Naming conventions for functions

Function names in JavaScript are also case sensitive. When declaring functions, it is recommended to use the hump method for naming functions.

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

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

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

4. Naming conventions for constants

Constants and variables are case sensitive in JavaScript, and it is recommended to use uppercase when defining constants because they are immutable variables.

const LEG = 4;
const TAIL = 1;
const MOVABLE = LEG + TAIL;
Copy the code

If the variable declaration name contains more than one word, UPPER_SNAKE_CASE should be used.

const DAYS_UNTIL_TOMORROW = 1;
Copy the code

5. Naming conventions for classes

The naming conventions for classes in JavaScript are very similar to those for functions, and descriptive names are recommended to describe the functionality of a class.

The main difference between a function name and a class name is that the class name begins with an uppercase:

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; }}const cartoon = new DogCartoon('Scooby-Doo'.'Shaggy');
Copy the code

6. Naming rules for components

JavaScript components are widely used in React, Vue and other front-end frameworks. The component naming suggestion is consistent with the class, using the hump nomenclature with a capital uppercase:

// 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> 
  );
}
Copy the code

Component names begin with uppercase letters, so they are easily distinguishable from HTML, attribute values, and so on:

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

7. Naming conventions for methods

In JavaScript, the structure of a class’s methods and functions is very similar, so the naming convention is the same.

It is recommended that you declare JavaScript methods in a humped way, prefixed with verbs to make method names more meaningful:

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

  getName() { 
    return '${this.dogName} ${this.ownerName}'; }}const cartoon= new DogCartoon('Scooby-Doo'.'Shaggy');

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

8. Naming conventions for private functions

The underscore (_) is widely used in languages such as MySQL and PHP to define variables, functions, and methods. But in JavaScript, underscores are used to indicate private variables or functions.

For example, if you have a private function name, toonName, you can indicate it as private by prefixing it with an underscore (_toonName).

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
    this.name = _toonName(dogName, ownerName); 
  } 
  _toonName(dogName, ownerName) { 
    return `${dogName} ${ownerName}`; }}const cartoon = new DodCartoon('Scooby-Doo'.'Shaggy'); 

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

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

9. Naming conventions for global variables

There is no specific naming standard for JavaScript global variables. It is recommended to use camel case for mutable global variables and uppercase for immutable global objects.

10. Naming conventions for file names

Most Web servers (Apache, Unix) are case sensitive when handling files. For example, flower.jpg and flower.jpg are not the same.

However, if you switch from a case-insensitive server to a case-sensitive server, even a small error can cause your site to crash.

Therefore, even though they are case-sensitive, it is recommended that files be named in lower case on all servers.

This article covers 10 best practices for JavaScript naming conventions. If you find them useful, give them a thumbs up and check it out!