JavaScript, web geliştirme dünyasının temel taşlarından biridir. Yıllardır bu dili kullanıyor olsanız bile, bazı gelişmiş özellikleri keşfetmemiş olabilirsiniz. Bu yazıda, JavaScript'in en önemli ve az bilinen 5 özelliğini ele alacağız.
1. Optional Chaining (?.) ile Güvenli Erişim
JavaScript'te nesnelerin iç içe geçmiş yapısında bir değere ulaşmak, bazen hata riski taşıyabilir. Eğer derinlerdeki bir değer undefined veya null ise, bu hataya yol açabilir. Optional chaining (?.) operatörü, bu sorunu ortadan kaldırır.
Örnek:
const user = {
name: 'John',
address: {
city: 'New York'
}
};
console.log(user.address?.city); // 'New York'
console.log(user.address?.zipcode); // undefined, hata vermez
2. Nullish Coalescing (??)
JavaScript'teki nullish coalescing (??) operatörü, bir değer null veya undefined olduğunda alternatif bir değer döndürmek için kullanılır. Bu operatör, özellikle bir değişkenin değeri yoksa veya tanımlı değilse bir varsayılan değer sağlamak için oldukça faydalıdır.
Örnekler:
let x = 0;
let y = x ?? 42; // 0 döner, çünkü 0 null veya undefined değildir
console.log(y);
function getConfig(config) {
return config ?? { timeout: 1000, retries: 3 };
}
let userConfig = null;
let finalConfig = getConfig(userConfig); // { timeout: 1000, retries: 3 }
console.log(finalConfig);
3. Debouncing ile Performans İyileştirme
Debouncing, bir fonksiyonun belirli bir süre içinde yalnızca bir kez çalışmasını sağlayan bir tekniktir. Bu, özellikle kullanıcı etkileşimlerinde (örneğin, yazma, kaydırma) sıkça tetiklenen olaylar için faydalıdır. Debouncing, genellikle kullanıcı bir şeyleri tamamladıktan sonra bir işlemi (örneğin API çağrısı) başlatmak için kullanılır.
Bir arama input alanında kullanıcı yazarken, her tuş vuruşunda bir API çağrısı yapmak yerine, debouncing ile yalnızca kullanıcı yazmayı durdurduğunda API çağrısı yapılmasını sağlayarak:
Sunucu aşırı yüklemesini önler: Çok sayıda istek gönderilmeyecek, bu da sunucunun daha verimli çalışmasını sağlar.
Gecikmeyi azaltır: Kullanıcı daha hızlı yanıt alır.
Kullanıcı deneyimini iyileştirir: Kullanıcı, önerilerin yalnızca yazmayı durdurduğunda gelmesini bekler.
Örnek :
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debounce Örneği</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#searchInput {
padding: 10px;
width: 300px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Arama Örneği</h1>
<input type="text" id="searchInput"/>
<div id="result"></div>
<script>
// Debounce fonksiyonu
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId); // Önceki zamanlayıcıyı temizle
timeoutId = setTimeout(() => func.apply(this, args), delay); // Yeni bir zamanlayıcı ayarla
};
}
const search = debounce((query) => {
console.log(`Searching for ${query}`);
// Burada bir API çağrısı yapabilirsiniz
document.getElementById('result').innerText = `Sonuçlar için arama yapılıyor: ${query}`;
}, 300);
// Input olayını dinleme
document.getElementById('searchInput').addEventListener('input', (event) => {
search(event.target.value);
});
</script>
</body>
</html>
4. Proxy ile Nesne Yönetimi
Proxy, bir nesneye yönelik işlemleri yakalayıp değiştirmeyi sağlar. Bu özellik, nesne üzerinde işlem yapmadan önce özelleştirilmiş davranışlar tanımlamak için yararlıdır.
Örnek :
const target = {
message: 'Hello'
};
const handler = {
get: function(obj, prop) {
if (prop in obj) {
return obj[prop];
} else {
return `Property ${prop} does not exist`;
}
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.message); // Hello
console.log(proxy.nonExistent); // Property nonExistent does not exist
5. Set ve WeakSet ile Yinelenen Değerleri Önleme
Her iki yapıyı da kullanarak yinelenen değerleri önlemek mümkündür. Her iki yapıyı kullanarak nasıl yapılacağını gösteren örnekler:
Set ile Yinelenen Değerleri Önleme
const numbers = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9, 9];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
WeakSet ile Yinelenen Değerleri Önleme
const uniqueObjects = new WeakSet();
const objA = { name: 'Alice' };
const objB = { name: 'Bob' };
const objC = objB; // Aynı referans
// Değer ekleme
uniqueObjects.add(objA);
uniqueObjects.add(objB);
uniqueObjects.add(objC); // objB'nin referansı olduğu için bu eklenmeyecek
console.log(uniqueObjects); // WeakSet { ... } (objA ve objB ile gösterir)
Sonuç
Bu özellikler, JavaScript'in gücünü ve esnekliğini tam anlamıyla kullanabilmenizi sağlayacak araçlardır. Kodlarınızın daha performanslı, temiz ve sürdürülebilir olmasını sağlamak için bu özellikleri projelerinizde kullanabilirsiniz.
Top comments (0)