Convenções de nomes em JavaScript: Variáveis, funções, classes e mais

As convenções de nomes do JavaScript não são impostas pela linguagem, mas são seguidas universalmente no ecossistema. Este guia cobre o que todo desenvolvedor JavaScript e TypeScript deveria saber.

Variáveis e funções: camelCase

Variáveis, funções e nomes de métodos usam camelCase — a primeira palavra em minúscula, as seguintes com inicial maiúscula:

const userName = "Alice";
let totalPrice = 0;

function getUserById(id) { /* ... */ }
const calculateShipping = (weight) => weight * 2.5;

Classes e componentes: PascalCase

Classes, componentes React e funções construtoras usam PascalCase:

class UserAccount { /* ... */ }
class HttpClient { /* ... */ }

// Componentes React
function UserProfile({ name }) { /* ... */ }
const ShoppingCart = () => { /* ... */ };

Constantes: SCREAMING_SNAKE_CASE

Constantes verdadeiras — valores que nunca mudam e são conhecidos em tempo de compilação — usam maiúsculas com underscores:

const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";
const DEFAULT_PAGE_SIZE = 20;

Nota: nem toda variável const é uma "constante" nesse sentido. const user = getUser() é uma variável normal — use camelCase.

Variáveis booleanas

Prefixe booleanos com is, has, can, should para clareza:

const isLoading = true;
const hasPermission = false;
const canEdit = user.role === "admin";
const shouldRedirect = !isAuthenticated;

Campos privados

JavaScript moderno usa o prefixo # para campos de classe verdadeiramente privados. A convenção antiga com underscore (_name) ainda é comum em bibliotecas:

class User {
  #password;
  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }
}

Nomes de arquivo

Tipo	Convenção	Exemplo
Componente React	PascalCase	UserProfile.tsx
Módulo de utilidades	camelCase	dateUtils.ts
Arquivo de config	kebab-case	eslint-config.js
Arquivo de teste	Igual ao fonte	UserProfile.test.tsx
Módulo CSS	PascalCase ou kebab	UserProfile.module.css

Especificidades do TypeScript

• Interfaces: PascalCase, sem prefixo I. UserProps, não IUserProps.
• Type aliases: PascalCase. type ApiResponse = { ... }
• Enums: PascalCase para o enum e para os membros. enum Color { Red, Green, Blue }
• Genéricos: Uma única letra maiúscula. T, K, V

Event handlers no React

Prefixe funções de manipulação de eventos com handle, e props com on:

// Props: onSubmit, onClick, onChange
// Handlers: handleSubmit, handleClick, handleChange
<Button onClick={handleSubmit} />

Converta para convenções JavaScript

Trabalhando com uma API Python que retorna snake_case? Use nosso conversor camelCase para transformar as chaves. Precisa nomear um componente React? Experimente o conversor PascalCase. Compare todos os formatos no hub de conversão.