Panduan Naming Convention yang Konsisten untuk Project JavaScript dan TypeScript

Kenapa naming convention penting?

Nama yang konsisten mengurangi cognitive load saat membaca kode. Developer tidak perlu berpikir keras apakah sebuah variabel itu array, object, boolean, atau fungsi hanya dari namanya. Konsistensi ini juga membuat code review lebih cepat dan onboarding anggota tim baru lebih mudah.

1. Variabel dan fungsi: camelCase

Untuk variabel biasa dan fungsi, gunakan camelCase.

const userProfile = { name: 'Budi', age: 28 };
const isLoggedIn = true;
const totalItemCount = 0;

function getUserById(id) { ... }
function formatCurrency(amount) { ... }

2. Boolean: awali dengan is, has, can, should

Penamaan boolean yang jelas menghilangkan ambiguitas.

// Buruk
const active = true;
const permission = false;

// Baik
const isActive = true;
const hasEditPermission = false;
const canDeletePost = false;
const shouldShowModal = true;

3. Konstanta global: SCREAMING_SNAKE_CASE

Nilai yang benar-benar konstan dan tidak pernah berubah ditulis dengan huruf besar semua.

const MAX_RETRY_ATTEMPTS = 3;
const API_BASE_URL = '[api.domain.com](https://api.domain.com)';
const DEFAULT_PAGE_SIZE = 20;

4. Komponen React: PascalCase

Semua komponen React, baik file maupun nama komponen, menggunakan PascalCase.

// File: UserProfileCard.tsx
export function UserProfileCard({ user }) { ... }

// File: ArticleListItem.tsx
export function ArticleListItem({ article }) { ... }

5. Tipe dan Interface TypeScript: PascalCase

type UserProfile = {
  id: string;
  name: string;
  email: string;
};

interface PaginationMeta {
  total: number;
  page: number;
  limit: number;
  totalPages: number;
}

6. Penamaan file dan folder

Pilih satu konvensi dan terapkan secara konsisten. Rekomendasi umum:

• Komponen React: PascalCase.tsx → UserProfileCard.tsx
• Hook: camelCase.ts dengan prefix use → useDebounce.ts
• Utility/helper: kebab-case.ts → format-currency.ts
• Folder: kebab-case → user-profile/, blog-articles/

7. Handler dan event: prefix handle

function handleSubmit(event) { ... }
function handleDeleteUser(userId) { ... }
function handleSearchChange(value) { ... }

8. Array: nama jamak

Gunakan nama jamak agar jelas bahwa variabel berisi koleksi data.

const users = [];
const articleIds = [];
const selectedCategories = [];

Kesimpulan

Naming convention bukan aturan kaku, tetapi kesepakatan tim. Yang terpenting adalah konsistensi dalam satu project. Gunakan ESLint untuk membantu menegakkan aturan secara otomatis agar tidak perlu mengingatkan satu per satu saat code review.