YouTip LogoYouTip

Home > JavaScript > Js Conventions

Js Conventions

📅 2026-06-20 | 📂 JavaScript

JavaScript Code Conventions | Tutorial

Tutorial -- Learning is not just about technology, but also about dreams!

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript Usage JavaScript VScode JavaScript Running in Chrome JavaScript Output JavaScript Syntax JavaScript Statements JavaScript Comments JavaScript Variables JavaScript Data Types JavaScript Objects JavaScript Functions JavaScript Scope JavaScript Events JavaScript Strings JavaScript String Templates JavaScript Operators JavaScript Comparisons and Logical Operators JavaScript If…Else Statements JavaScript switch Statement JavaScript for Loop JavaScript while Loop JavaScript break and continue Statements JavaScript typeof JavaScript Type Conversion JavaScript Regular Expressions JavaScript Errors – Throw, Try and Catch JavaScript Debugging JavaScript Hoisting JavaScript Strict Mode JavaScript Common Mistakes JavaScript Forms JavaScript Form Validation JavaScript Validation API JavaScript Reserved Keywords JavaScript this JavaScript let and const JavaScript JSON JavaScript void JavaScript Asynchronous Programming JavaScript Promise JavaScript async/await JavaScript Code Conventions JavaScript Quiz

JS Functions

JavaScript Function Definition JavaScript Function Parameters JavaScript Function Invocation JavaScript Closures

JS Classes

JavaScript Classes JavaScript Class Inheritance JavaScript Static Methods

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM Events DOM EventListener DOM Elements HTMLCollection Object NodeList Object

JS Advanced Tutorial

JavaScript Objects JavaScript prototype JavaScript Number Object JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Popup Boxes JavaScript Timing Events JavaScript Cookie

JS Libraries

JavaScript Libraries JavaScript Testing jQuery JavaScript Testing Prototype

JS Examples

JavaScript Examples JavaScript Object Examples JavaScript Browser Object Examples JavaScript HTML DOM Examples JavaScript Summary

JS Reference

JavaScript Objects HTML DOM Objects JavaScript Asynchronous Programming JavaScript Static Methods

JavaScript async/await

JavaScript Quiz

JavaScript Code Conventions

Applicable to all JavaScript projects.

JavaScript Code Conventions

Code conventions typically include the following aspects:

  • Naming rules for variables and functions.
  • Rules for using spaces, indentation, and comments.
  • Other common conventions...

Conventional code is easier to read and maintain.

Code conventions are generally established before development and can be discussed and set with your team members.

Variable Names

It is recommended to use camelCase for variable names:

firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

Spaces and Operators

Usually, spaces are required before and after operators (= + - * /):

Example:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

Code Indentation

Usually, 4 spaces are used to indent code blocks:

Function:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}
Note It is not recommended to use the TAB key for indentation, as different editors interpret the TAB key differently.

Statement Rules

General rules for simple statements:

  • A statement usually ends with a semicolon.

Example:

var values = ["Volvo", "Saab", "Fiat"];
var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

General rules for complex statements:

  • Place the opening curly brace at the end of the first line.
  • Add a space before the opening curly brace.
  • Place the closing curly brace on its own line.
  • End a complex declaration with a semicolon.

Function:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

Loop:

for (i = 0; i < 5; i++) {
    x += i;
}

Conditional Statement:

if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

Object Rules

Rules for object definitions:

  • Place the opening curly brace on the same line as the class name.
  • There should be a space between the colon and the property value.
  • Use double quotes for strings, not for numbers.
  • Do not add a comma after the last property value.
  • Place the closing curly brace on its own line, ending with a semicolon.

Example:

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

Short object code can be written on a single line:

Example:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Line Length < 80 Characters

For readability, it is recommended that each line contain fewer than 80 characters.

If a JavaScript statement exceeds 80 characters, it is recommended to break the line after an operator or a comma.

Example:

document.getElementById("demo").innerHTML =
"Hello Tutorial.";

Try it yourself »

Naming Conventions

Generally, naming conventions are similar across many programming languages, for example:

  • Variables and functions use lowerCamelCase, meaning the first word is lowercase and subsequent words start with an uppercase letter.
  • Global variables are in UPPERCASE.
  • Constants (like PI) are in UPPERCASE.

Do you use these conventions for variable naming: hyphens, camelCase, or under_scores?

Hyphens (-) in HTML and CSS:

HTML5 attributes can be prefixed with data- (e.g., data-quantity, data-price).

CSS uses - to connect property names (font-size).

Note In JavaScript, hyphens are not allowed in variable names (they are interpreted as minus signs). Therefore, it is recommended to use camelCase for JavaScript variables.
← Html5 WebsocketJs Conventions →

📂 Categories