JavaScript Best Practices

Temiz, okunabilir ve sürdürülebilir JavaScript kodu yazmak, profesyonel bir geliştirici olmanın temel taşlarından biridir. Bu yazıda, JavaScript kodunuzu bir üst seviyeye taşıyacak en iyi uygulamaları inceleyeceğiz.

1. Modern Değişken Tanımlama

var kullanmayı bırakın! const ve let ile daha güvenli kod yazın.

JavaScript

// ❌ Kötü
var name = "Harun";
var age = 25;

// ✅ İyi - Değişmeyecek değerler için const
const API_URL = "https://api.example.com";
const MAX_RETRIES = 3;

// ✅ İyi - Değişecek değerler için let
let count = 0;
let isLoading = false;

💡 İpucu: Önce const kullanın. Değeri değiştirmeniz gerektiğinde let'e çevirin.

2. Arrow Functions

Modern JavaScript'te arrow functions daha okunabilir ve this bağlamını korur.

JavaScript

// ❌ Eski yöntem
function add(a, b) {
  return a + b;
}

// ✅ Arrow function
const add = (a, b) => a + b;

// Array metodlarıyla harika çalışır
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

3. Destructuring

Nesneler ve dizilerden değer çıkarmayı kolaylaştırır.

JavaScript

const user = {
  name: "Harun",
  email: "harun@example.com",
  age: 25
};

// ❌ Eski yöntem
const name = user.name;
const email = user.email;

// ✅ Destructuring
const { name, email, age } = user;

// Default değerler
const { role = "user" } = user;

// Yeniden adlandırma
const { name: userName } = user;

// Dizi destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];

4. Template Literals

String birleştirme yerine template literals kullanın.

JavaScript

const name = "Harun";
const age = 25;

// ❌ Kötü
const greeting = "Merhaba, " + name + "! " + age + " yaşındasın.";

// ✅ İyi
const greeting = `Merhaba, ${name}! ${age} yaşındasın.`;

// Çok satırlı stringler
const html = `
  
    ${name}
    Yaş: ${age}
  
`;

5. Async/Await

Promise zincirlerini daha okunabilir hale getirin.

JavaScript

// ❌ Callback hell
fetch(url)
  .then(response => response.json())
  .then(data => {
    return fetch(anotherUrl);
  })
  .then(response => response.json())
  .catch(error => console.error(error));

// ✅ Async/Await
async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    
    const anotherResponse = await fetch(anotherUrl);
    const anotherData = await anotherResponse.json();
    
    return { data, anotherData };
  } catch (error) {
    console.error("Hata:", error);
    throw error;
  }
}

6. Optional Chaining & Nullish Coalescing

Güvenli erişim ve default değerler için modern operatörler.

JavaScript

const user = {
  name: "Harun",
  address: {
    city: "İstanbul"
  }
};

// ❌ Eski yöntem
const city = user && user.address && user.address.city;

// ✅ Optional chaining
const city = user?.address?.city;

// Nullish coalescing
const name = user?.name ?? "Anonim";
const count = data?.count ?? 0;

7. Clean Code Prensipleri

Fonksiyonlarınızı küçük ve tek amaçlı tutun:

JavaScript

// ❌ Kötü - Çok fazla iş yapan fonksiyon
function processUser(user) {
  // validate
  // save to database
  // send email
  // update cache
  // log activity
}

// ✅ İyi - Tek sorumluluk
const validateUser = (user) => { /* ... */ };
const saveUser = async (user) => { /* ... */ };
const sendWelcomeEmail = async (email) => { /* ... */ };
const updateCache = (user) => { /* ... */ };

async function processUser(user) {
  validateUser(user);
  await saveUser(user);
  await sendWelcomeEmail(user.email);
  updateCache(user);
}

Sonuç

Bu best practices'leri uygulamak, kodunuzun okunabilirliğini, bakımını ve performansını önemli ölçüde artıracaktır. Her zaman modern JavaScript özelliklerini kullanmaya çalışın ve kodunuzu yazan kişinin 6 ay sonra başka biri (veya kendiniz) olacağını düşünerek yazın.

📚 Daha Fazla Kaynak: ESLint ve Prettier kullanarak kod standartlarınızı otomatikleştirin!