JavaScript 2024: En Yeni Özellikler, Performans, Modern Teknikler ve İleri Seviye Kodlama 🚀

JavaScript, modern web geliştirmede olmazsa olmaz bir dildir. Zaman içinde gelişen bu güçlü dil, günümüzün front-end ve back-end uygulamalarının temelini oluşturuyor. Bu yazıda, 2024'te JavaScript’in sunduğu modern özellikleri, kod yazma tekniklerini ve bu zamana kadar ele aldığımız önemli konuları örneklerle detaylandıracağız.

Hem yeni başlayanlar hem de deneyimli geliştiriciler için faydalı olabilecek konulara değinerek, JavaScript’in nasıl daha okunabilir, performanslı ve temiz kod yazmamıza imkan verdiğini keşfedeceğiz.

1. Modern JavaScript Söz Dizimi ile Temiz ve Okunabilir Kodlar (ES2020)

JavaScript, son yıllarda eklenen yeni özelliklerle daha okunabilir ve sade hale geldi. Özellikle optional chaining, nullish coalescing ve arrow functions gibi yenilikler, kodunuzu daha temiz ve anlaşılır hale getirebilir.

Optional Chaining & Nullish Coalescing (ES2020)

Eskiden nesnelerle çalışırken her bir özelliğin olup olmadığını kontrol etmek zorundaydık. Modern JavaScript’te bu, optional chaining (?.) ile çok daha kolaylaştı. Aynı zamanda, nullish coalescing (??) ile null veya undefined olan değerlere varsayılan bir değer atanmasını sağlayabiliriz.

a. Optional Chaining (İsteğe Bağlı Zincirleme) (ES2020)

Optional chaining operatörü (?.), bir nesnenin belirli bir özelliğinin veya alt nesnesinin olup olmadığını kontrol etmeden ona erişmemizi sağlar. Bu sayede, özellikle derin nesne yapılarında hata almadan güvenli bir şekilde veri çekebiliriz.

const user = {
  name: 'Abdulnasır',
  info: {
    email: 'abdulnasirolcan@example.com'
  }
};

// Kullanıcı bilgilerinde "address" tanımlı değilse hata almaz, undefined döner.
console.log(user.info?.address); // undefined

// Eğer address varsa şehir bilgisini güvenle kontrol ederiz.
console.log(user.info?.address?.city); // undefined

// Optional chaining ile güvenli erişim
const email = user?.info?.email ?? 'Email not provided';
console.log(email); // Çıktı: 'abdulnasirolcan@example.com'

b. Nullish Coalescing (Nullish Birleştirme Operatörü) (ES2020)

?? operatörü, sadece null veya undefined olan değerler için varsayılan bir değer atamamızı sağlar. Diğer falsy (yanlış) değerlerde (örneğin 0, false, '') bu operatör çalışmaz.

const userInput = '';
const name = userInput ?? 'Default Name';
console.log(name); // Çıktı: '' (boş string çünkü null veya undefined değil)

const userInput2 = null;
const name2 = userInput2 ?? 'Default Name';
console.log(name2); // Çıktı: 'Default Name'

2. Logical Assignment Operators (Mantıksal Atama Operatörleri) (ES2021)

2024'te yaygın olan mantıksal atama operatörleri, kısa ve etkili mantıksal ifadelerle değişkenlere değer atamayı kolaylaştırır. &&=, ||=, ??= gibi operatörlerle karmaşık ifadeleri sadeleştirebiliriz.

let name = 'Abdulnasır';

// Eğer 'name' zaten tanımlıysa, tanımlı olan değeri korur
name ||= 'Default Name';
console.log(name); // Çıktı: 'Abdulnasır'

let age = 0;

// Eğer 'age' null veya undefined ise varsayılan değer atar
age ??= 30;
console.log(age); // Çıktı: 0 (çünkü nullish değil)

let isActive = true;
let userName = null;

// Eğer isActive false olursa, false atar
isActive &&= false;
console.log(isActive); // Çıktı: false

// Eğer userName null veya undefined ise 'Guest' atanır
userName ??= 'Guest';
console.log(userName); // Çıktı: 'Guest'

// Eğer userName boş değilse atama yapılır
userName ||= 'Abdulnasır';
console.log(userName); // Çıktı: 'Guest' (çünkü zaten atandı)

let x = 0;

// ||=
x ||= 5;
console.log(x); // Çıktı: 5 (çünkü 0 falsy bir değerdir)

// ??=
x ??= 10;
console.log(x); // Çıktı: 5 (çünkü 0 nullish değil)

3. Pipeline Operatörü (|>) - Önerilen Yeni Özellik (ES2024)

Pipeline operatörü henüz JavaScript’e tam olarak dahil olmamış bir öneridir, ancak bu özellik kabul edildiğinde büyük bir oyun değiştirici olabilir. |> operatörü, bir fonksiyonu başka bir fonksiyona boru hattı (pipeline) gibi bağlamaya yarar. Böylece bir fonksiyonun sonucunu doğrudan başka bir fonksiyona gönderebiliriz.

const double = x => x * 2;
const increment = x => x + 1;

const result = 5 
  |> double 
  |> increment;

console.log(result); // Çıktı: 11

Burada, 5 sayısı önce double fonksiyonuna, ardından increment fonksiyonuna gönderiliyor. Bu, çok adımlı işlemleri daha temiz ve anlaşılır bir şekilde yapmamıza olanak sağlar.

4. Record & Tuple: Immutable Veri Yapıları (ES2024)

JavaScript’e eklenen Record ve Tuple, immutable (değiştirilemez) veri yapıları sunarak, özellikle büyük projelerde veri yönetimini daha güvenli ve hızlı hale getirir.

Record Nedir? (ES2024)

Record, JavaScript nesnelerine benzer ancak immutable bir yapıdadır. Bir Record oluşturduktan sonra, içindeki veriler değiştirilemez. Bu, veri güvenliğini artırmak ve daha hatasız kod yazmak için kullanışlıdır.

const userRecord = #{ name: 'Abdulnasır', age: 30 };

// Record immutable'dır, yani değiştirilmek istenirse hata verir
// userRecord.name = 'Mehmet'; // Hata verir

console.log(userRecord.name); // Çıktı: 'Abdulnasır'

Tuple Nedir? (ES2024)

Tuple, immutable bir dizidir. Normal JavaScript dizilerine benzer ancak Tuple’lar da bir kez oluşturulduktan sonra değiştirilemez.

const tuple = #[1, 2, 3];

// Tuple immutable'dır, eleman ekleme/çıkarma yapılamaz
// tuple.push(4); // Hata verir

console.log(tuple[0]); // Çıktı: 1

Record ve Tuple kullanımı, büyük ve karmaşık projelerde veri güvenliğini artırırken, performansı da optimize eder. Bu yapılar JavaScript’te immutable veri yapıları ihtiyacını karşılamak için geliştirilmiştir.

5. Top-Level Await (ES2022)

Top-level await, modüller içinde async işlev olmadan await kullanabilmemizi sağlar. Bu özellikle, bir modül yüklenmeden önce asenkron işlemleri bekleyebiliriz.

// async function tanımlamaya gerek kalmadan await kullanabilirsiniz
const data = await fetch('https://api.example.com/data');
const jsonData = await data.json();
console.log(jsonData);

6. WeakRefs ve FinalizationRegistry (ES2021)

Bu yeni özelliklerle, hafızada yer alan bir nesneye zayıf bir referans oluşturarak, bu nesnenin garbage collector tarafından temizlenip temizlenmediğini kontrol edebiliriz. Bu, özellikle büyük veriler veya zayıf referansların kullanıldığı yapılar için faydalıdır.

let object = { name: 'Weak reference object' };
const weakRef = new WeakRef(object);

// WeakRef ile nesneye zayıf bir referans oluştururuz
console.log(weakRef.deref()); // { name: 'Weak reference object' }

object = null; // Nesneyi null yaparız, garbage collector tarafından temizlenebilir

setTimeout(() => {
  console.log(weakRef.deref()); // undefined (eğer nesne temizlenmişse)
}, 1000);

7. Arrow Functions (Ok Fonksiyonları) (ES2015)

Arrow functions, daha kısa ve sade bir fonksiyon tanımlama şeklidir. Özellikle this bağlamını koruması, fonksiyon içindeki diğer kullanım alanlarına göre büyük bir avantaj sağlar.

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // Çıktı: 6

Bu tür modern özellikler, kodu yazarken hem hız kazandırır hem de okunabilirliği artırır.

8. Asenkron İşlemleri Yönetme: Promises, async/await ve Promise.allSettled() (ES2015/ES2020)

Web geliştirmede asenkron işlemler çok yaygındır, özellikle API çağrıları gibi uzun süren işlemleri yönetmek için. JavaScript, Promises ve async/await ile bu işlemleri daha okunabilir hale getirdi.

a. Promises ve async/await (ES2015)

Asenkron kodu senkron hale getirmenin en iyi yolu async ve await yapısını kullanmaktır. Bu sayede asenkron işlemler zincirleme then fonksiyonlarına ihtiyaç duymadan daha temiz bir şekilde yazılabilir.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

b. Promise.allSettled() (ES2020)

Birden fazla Promise işlemini yönetirken Promise.allSettled() kullanmak, tüm işlemlerin tamamlanmasını (başarılı ya da başarısız olmasına bakmaksızın) bekler. Böylece birden fazla asenkron işlemi aynı anda yönetmek daha kolay olur.

const promise1 = Promise.resolve('Data 1');
const promise2 = Promise.reject('Error in Data 2');
const promise3 = Promise.resolve('Data 3');

Promise.allSettled([promise1, promise2, promise3]).then(results => {
  results.forEach(result => {
    console.log(result.status === 'fulfilled' ? result.value : result.reason);
  });
});

c. Promise.any() (ES2021)

Promise.any(), verilen bir dizi promise'den herhangi biri başarılı olduğunda sonuç döner. Bu, herhangi bir promise'in başarısız olması durumunda diğerlerine odaklanmamızı sağlar.

const p1 = Promise.reject('Hata 1');
const p2 = Promise.resolve('Başarılı 1');
const p3 = Promise.resolve('Başarılı 2');

Promise.any([p1, p2, p3])
  .then(result => {
    console.log(result); // Çıktı: 'Başarılı 1' (ilk başarılı olan)
  })
  .catch(error => {
    console.log(error); // Tüm promise'ler başarısız olursa çalışır
  });

9. Hata Yönetimini Sadeleştirmek: try-catch’in Ötesinde (ES2020)

Hata yönetimi her zaman önemli bir konudur. Geleneksel try-catch blokları bazen fazla iç içe girebilir ve okunabilirliği zorlaştırabilir. Ancak async/await ile hata yönetimini daha temiz hale getirebiliriz. Ayrıca, yardımcı fonksiyonlar oluşturarak hataların yönetilmesini daha sade bir hale getirebiliriz.

Helper Fonksiyonlar ile Hata Yönetimi (ES2020)

Aşağıdaki örnekte bir to() fonksiyonu, asenkron işlemleri try-catch bloğuyla yönetir ve hatayı ve sonucu bir tuple (dizi) olarak döner.

a. Hata ve veri yönetimi

async function to(promise) {
  try {
    const result = await promise;
    return [null, result];
  } catch (error) {
    return [error, null];
  }
}

async function fetchData() {
  const [error, data] = await to(fetch('https://api.example.com/data'));
  if (error) return console.error('Fetch error:', error);
  console.log(data);
}

b. Hata ve veri yönetimi

async function to(promise) {
  try {
    const data = await promise;
    return [null, data];
  } catch (error) {
    return [error, null];
  }
}

async function fetchData() {
  // Fetch sırasında hata olursa networkError'a atanacak
  const [networkError, response] = await to(fetch('https://api.codingbeautydev.com/docs'));
  if (networkError) return console.error('Network Error:', networkError);

  // JSON parse sırasında hata olursa parseError'a atanacak
  const [parseError, data] = await to(response.json());
  if (parseError) return console.error('Parse Error:', parseError);

  return data;
}

• Helper Fonksiyon (to): Bu fonksiyon, promise'in hatalarını ve sonucunu ayırarak bir dizi ([err, data]) şeklinde döner. Bu sayede hatayı doğrudan kontrol edebiliriz.
• Network Error ve Parse Error Yönetimi: to fonksiyonu ile hem fetch işlemi hem de JSON parse işlemi için hata yönetimini daha sade bir şekilde yapabiliriz.

Bu yöntem, kodu temizler ve derin iç içe geçmiş try-catch bloklarını ortadan kaldırarak daha basit, anlaşılır ve okunabilir hale getirir

10. Dizilerle Verimli Çalışma: map, filter, reduce (ES2015)

JavaScript’in fonksiyonel programlama yetenekleri dizilerle çalışmayı çok daha kolay hale getiriyor. map, filter ve reduce gibi metotlar, diziler üzerinde karmaşık işlemleri daha sade bir şekilde yapmamıza olanak tanır.

a. map() ve filter() ile Dizi İşleme (ES2015)

map() ve filter(), dizileri işlemede en çok kullanılan fonksiyonlardır. map(), her bir öğeyi dönüştürmek için kullanılırken, filter(), belirli koşulları sağlayan öğeleri seçer.

const numbers = [1, 2, 3, 4, 5];

// Her sayıyı ikiyle çarp
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Çıktı: [2, 4, 6, 8, 10]

// 3'ten büyük sayıları filtrele
const filtered = numbers.filter(num => num > 3);
console.log(filtered); // Çıktı: [4, 5]

b. reduce() ile Diziyi Tek Bir Değere İndirme (ES2015)

reduce(), bir diziyi tek bir değere indirgemek için kullanılır. Toplam, çarpım, veya daha karmaşık hesaplamalar için mükemmeldir.

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Çıktı: 15

Bu fonksiyonlar, karmaşık dizilerle çalışırken kodunuzu daha kısa ve anlaşılır hale getirir.

11. Performans Optimizasyonu: Lazy Loading, Debouncing, Throttling (ES2020)

Kullanıcı deneyimini iyileştirmek için JavaScript performans optimizasyonları yapmak çok önemlidir. Özellikle büyük veri setleriyle çalışırken ve DOM manipülasyonları yaparken, lazy loading, debouncing ve throttling gibi tekniklerle uygulamayı hızlandırabiliriz.

a. Lazy Loading ile Görsellerin Yüklenmesini Geciktirme (ES2020)

Lazy loading, yalnızca kullanıcı bir öğeyi görmeye yakınken yüklenmesini sağlar. Bu, sayfa yükleme sürelerini büyük ölçüde iyileştirir.

<img data-src="image.jpg" alt="Lazy Loaded Image" class="lazy" />

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazy');
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.remove('lazy');
          observer.unobserve(img);
        }
      });
    });
    lazyImages.forEach(img => observer.observe(img));
  });
</script>

b. Debouncing ve Throttling ile Performans Artırma

Debouncing ve throttling, yoğun olayları kontrol etmek için kullanılır. Örneğin, bir arama çubuğunda her tuşa basıldığında API’ye istek yapmak yerine, kullanıcının yazmayı bitirmesini bekleyebiliriz.

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(event) {
  console.log('Fetching search results for:', event.target.value);
}, 300));

12. JavaScript’in Geleceği: BigInt, WeakRef, ve Temporal API (ES2021/ES2024)

2024 itibariyle JavaScript’e eklenen ve geliştirilen yeni özellikler de dikkate değer. BigInt, büyük sayılarla çalışmayı sağlar, WeakRef bellek yönetimini iyileştirir, ve önerilen Temporal API zaman ve tarih işlemlerini büyük ölçüde basitleştirir.

a. BigInt ile Büyük Sayılarla Çalışma

JavaScript, normalde sayılar için güvenli bir sınır olan 2^53 - 1 aralığında çalışır. Daha büyük sayılarla çalışmak için BigInt kullanabiliriz.

const bigNumber = BigInt('9007199254740992');
console.log(bigNumber + 1n); // 9007199254740993n

b. Temporal API ile Zaman ve Tarih İşlemleri

JavaScript’in Date sınıfı bazen sınırlı olabilir. Temporal API, zaman ve tarih işlemlerini daha hassas ve güçlü bir şekilde ele almak için geliştirilmiş yeni bir API'dir.

const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // Örnek çıktı: 2024-10-06

// Temporal ile bugünün tarihini alalım
const today = Temporal.Now.plainDateISO();
console.log(today.toString()); // Örnek Çıktı: 2024-10-05

// Farklı bir tarih oluşturma ve aralarındaki farkı bulma
const birthday = Temporal.PlainDate.from('1990-05-15');
const duration = today.since(birthday);
console.log(`Doğum tarihinizden bu yana geçen yıl: ${duration.years}`);

13. Private Class Fields (Özel Sınıf Alanları) (ES2021)

JavaScript’te sınıf özelliklerini (# ile) özel yaparak, bu alanlara dışarıdan erişimi engelleyebiliriz. Bu, veri gizliliğini sağlamak için önemli bir adımdır.

class Person {
  #name; // Özel alan

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

const abdulnasir = new Person('Abdulnasır');
console.log(abdulnasir.getName()); // Çıktı: 'Abdulnasır'
console.log(abdulnasir.#name); // Hata: Özel alana dışarıdan erişilemez

14. String.replaceAll() (ES2021)

String.replaceAll() metodu, bir string içinde belirttiğimiz alt dizinin tüm örneklerini değiştirmemizi sağlar. Bu özellikle, bir string'deki birden fazla karakteri aynı anda değiştirmek daha kolay hale gelmiştir.

const text = 'Merhaba dünya! dünya harika!';
const newText = text.replaceAll('dünya', 'gezegen');
console.log(newText); // Çıktı: 'Merhaba gezegen! gezegen harika!'

15. Intl.RelativeTimeFormat (ES2020)

Intl.RelativeTimeFormat, bir tarihin şu anki zamana göre ne kadar süre önce veya sonra olduğunu belirtir. Bu, kullanıcıya daha doğal bir tarih formatı sunmak için kullanışlıdır.

const rtf = new Intl.RelativeTimeFormat('tr', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // Çıktı: 'dün'
console.log(rtf.format(1, 'day'));  // Çıktı: 'yarın'

16. Array.flatMap() (ES2019)

flatMap() metodu, diziyi düzleştirip (flatten) aynı zamanda map işlemi yaparak daha sade bir şekilde diziyi dönüştürür.

const numbers = [1, 2, 3, 4];
const doubledAndFlattened = numbers.flatMap(n => [n, n * 2]);
console.log(doubledAndFlattened); // Çıktı: [1, 2, 2, 4, 3, 6, 4, 8]

Sonuç

JavaScript, sürekli gelişen ve modern uygulamalar için vazgeçilmez bir dil haline gelmiştir. 2024 itibarıyla öğrendiğimiz bu özellikler, daha temiz, daha verimli ve performanslı kod yazmamıza olanak sağlar. Asenkron işlemler, fonksiyonel diziler, modern hata yönetimi ve performans optimizasyonları ile JavaScript’in gücünü maksimum seviyeye çıkarabilirsiniz.

Bu yazıda ele aldığımız örnekler, JavaScript’in sunduğu yeni ve güçlü özellikleri kullanarak projelerinizde nasıl daha etkili çözümler üretebileceğinizi gösterdi. Daha fazla pratik yaparak, bu özelliklerin sunduğu avantajları keşfedebilir ve daha iyi uygulamalar geliştirebilirsiniz.

Happy coding! 🚀