M

MLOG

Türkçe

Web geliştiricilerinden oluşan küresel bir kitleye özel olarak hazırlanmış pratik örnekler ve analizler içeren en yeni JavaScript ES2024 özelliklerini keşfedin.

JavaScript ES2024: Global Geliştiriciler İçin En Yeni Özellikler Tanıtılıyor

Dünyanın dört bir yanındaki geliştiriciler, hoş geldiniz! JavaScript gelişmeye devam ediyor ve ES2024, dile heyecan verici yeni özellikler ve iyileştirmeler getiriyor. Bu kapsamlı kılavuz, dünyanın neresinde olursanız olun bu özellikleri projelerinizde kullanmanıza yardımcı olacak pratik örnekler ve analizler sunarak sizi temel yenilikler hakkında bilgilendirecektir. Başlangıç seviyesinden kıdemli seviyeye kadar tüm geliştiricilere uygun özellikleri ele alacağız.

ECMAScript (ES) Nedir?

ECMAScript (ES), JavaScript'in standardizasyonudur. Bunu, JavaScript motorlarının (Chrome ve Node.js'teki V8 gibi) takip ettiği resmi bir plan olarak düşünebilirsiniz. Her yıl, dile yeni özellikler ve iyileştirmeler getiren yeni ECMAScript sürümleri yayınlanır.

ES2024: Küresel Bir Bakış Açısı

ES2024'te sunulan özellikler, geliştirici üretkenliğini, kod okunabilirliğini ve genel performansı artırmayı amaçlamaktadır. Bu iyileştirmeler, konumlarından veya geliştirdikleri uygulamaların türlerinden bağımsız olarak tüm geliştiricilere fayda sağlar. Bu kılavuz, çeşitli geliştirme ortamlarını ve kullanım senaryolarını göz önünde bulundurarak bu özellikleri küresel bir bakış açısıyla sunmayı hedeflemektedir.

ES2024'ün Temel Özellikleri

Nihai spesifikasyonlar resmi sürümden önce değiştirilebilse de, aşağıdaki özellikler ES2024 için heyecanla beklenmektedir:

1. Dizi Gruplama: Object.groupBy ve Map.groupBy

En çok beklenen özelliklerden biri, bir dizideki öğeleri sağlanan bir anahtara göre gruplandırma yeteneğidir. Bu, veri işleme ve toplama görevlerini önemli ölçüde basitleştirir. ES2024 bunun için iki yöntem sunar:

Örnek: Ürünleri kategoriye göre gruplama (Object.groupBy kullanarak)

Çeşitli kategorilerden ürünlerin bulunduğu bir e-ticaret platformu hayal edelim. Bunları web sitesinde görüntülemek için gruplamak istiyoruz.


const products = [
  { name: 'T-Shirt', category: 'Clothing', price: 25 },
  { name: 'Jeans', category: 'Clothing', price: 75 },
  { name: 'Laptop', category: 'Electronics', price: 1200 },
  { name: 'Smartphone', category: 'Electronics', price: 800 },
  { name: 'Coffee Maker', category: 'Appliances', price: 50 }
];

const groupedProducts = Object.groupBy(products, (product) => product.category);

console.log(groupedProducts);
/* Çıktı:
{
  Clothing: [
    { name: 'T-Shirt', category: 'Clothing', price: 25 },
    { name: 'Jeans', category: 'Clothing', price: 75 }
  ],
  Electronics: [
    { name: 'Laptop', category: 'Electronics', price: 1200 },
    { name: 'Smartphone', category: 'Electronics', price: 800 }
  ],
  Appliances: [
    { name: 'Coffee Maker', category: 'Appliances', price: 50 }
  ]
}
*/

Örnek: Kullanıcıları ülkeye göre gruplama (Map.groupBy kullanarak)

Kullanıcıların farklı ülkelerde bulunduğu küresel bir uygulama düşünün. Map.groupBy kullanarak, kullanıcıları eklendikleri sırayı koruyarak gruplayabiliriz.


const users = [
  { id: 1, name: 'Alice', country: 'USA' },
  { id: 2, name: 'Bob', country: 'Canada' },
  { id: 3, name: 'Charlie', country: 'USA' },
  { id: 4, name: 'David', country: 'UK' },
  { id: 5, name: 'Eve', country: 'Canada' }
];

const groupedUsers = Map.groupBy(users, (user) => user.country);

console.log(groupedUsers);
/* Çıktı: (Map ekleme sırasını korur)
Map(3) {
  'USA' => [ { id: 1, name: 'Alice', country: 'USA' }, { id: 3, name: 'Charlie', country: 'USA' } ],
  'Canada' => [ { id: 2, name: 'Bob', country: 'Canada' }, { id: 5, name: 'Eve', country: 'Canada' } ],
  'UK' => [ { id: 4, name: 'David', country: 'UK' } ]
}
*/

Faydaları:

2. Promise.withResolvers

Promise.withResolvers fonksiyonu, Promise'lar oluşturmak ve bunların resolve ve reject fonksiyonlarına erişmek için daha temiz ve daha kullanışlı bir yol sağlar. Bu, Promise'ın yaşam döngüsü üzerinde doğrudan kontrole ihtiyaç duyduğunuz asenkron kod desenleriyle çalışırken özellikle yararlıdır.


const { promise, resolve, reject } = Promise.withResolvers();

// Daha sonra, bir koşula bağlı olarak:
if (someCondition) {
  resolve('Operation successful!');
} else {
  reject('Operation failed!');
}

promise
  .then(result => console.log(result)) // Çıktı: İşlem başarılı! veya İşlem başarısız!
  .catch(error => console.error(error));

Kullanım Alanları:

3. Diziyi Kopyalayarak Değiştirme

Bu teklif, Array prototipine yeni, diziyi değiştirmeyen (non-mutating) metodlar ekler. Bu metodlar, değişiklikler uygulanmış yeni bir dizi döndürür ve orijinal diziyi olduğu gibi bırakır. Bu, beklenmedik yan etkileri önlemeye yardımcı olur ve fonksiyonel programlama ile modern JavaScript geliştirmede kilit bir ilke olan değişmezliği (immutability) teşvik eder.

Yeni metodlar şunları içerir:

Örnek: Diziyi değiştirmeyen modifikasyonlar


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

const reversedArray = originalArray.toReversed();
console.log('Ters Çevrilmiş Dizi:', reversedArray); // Çıktı: [5, 4, 3, 2, 1]
console.log('Orijinal Dizi:', originalArray); // Çıktı: [1, 2, 3, 4, 5] (değişmedi)

const sortedArray = originalArray.toSorted((a, b) => a - b);
console.log('Sıralanmış Dizi:', sortedArray);   // Çıktı: [1, 2, 3, 4, 5]
console.log('Orijinal Dizi:', originalArray); // Çıktı: [1, 2, 3, 4, 5] (değişmedi)

const splicedArray = originalArray.toSpliced(2, 1, 6);
console.log('Splice Uygulanmış Dizi:', splicedArray);   // Çıktı: [1, 2, 6, 4, 5]
console.log('Orijinal Dizi:', originalArray); // Çıktı: [1, 2, 3, 4, 5] (değişmedi)

const withArray = originalArray.with(2, 10);
console.log('with ile Güncellenmiş Dizi:', withArray);     // Çıktı: [1, 2, 10, 4, 5]
console.log('Orijinal Dizi:', originalArray); // Çıktı: [1, 2, 3, 4, 5] (değişmedi)

Faydaları:

4. try...catch ile Daha Esnek Hata Yönetimi

ES2024, try...catch bloğuna geliştirmeler getirerek, ihtiyaç duymadığınızda istisna (exception) değişkenini atlamanıza olanak tanır. Bu, yalnızca catch bloğunda hata nesnesine erişmeden kod çalıştırmanız gereken durumlarda hata yönetimini basitleştirir.


try {
  // Hata atabilecek kod
  JSON.parse(invalidJson);
} catch {
  // Hata nesnesine erişmeden hatayı yönet
  console.error('Geçersiz JSON formatı algılandı.');
}

Faydaları:

Küresel Hususlar ve En İyi Uygulamalar

Bu yeni ES2024 özelliklerini küresel projelerde kullanırken aşağıdakileri aklınızda bulundurun:

Farklı Bölgelerde Gerçek Dünya Örnekleri ve Kullanım Senaryoları

ES2024 özelliklerinin farklı küresel bağlamlarda nasıl uygulanabileceğine dair birkaç gerçek dünya örneğini ele alalım:

Sonuç

ES2024, geliştirici üretkenliğini, kod kalitesini ve uygulama performansını önemli ölçüde artırabilecek değerli eklemeler getiriyor. Bu yeni özellikleri anlayarak ve kullanarak, dünya çapındaki geliştiriciler daha verimli, sürdürülebilir ve sağlam uygulamalar oluşturabilirler. Kodunuzun konumu veya cihazı ne olursa olsun tüm kullanıcılar için sorunsuz bir şekilde çalıştığından emin olmak için küresel en iyi uygulamaları ve tarayıcı uyumluluğunu göz önünde bulundurmayı unutmayın. ES2024 daha yaygın bir şekilde benimsendikçe her bir özelliğe ilişkin daha fazla güncelleme ve derinlemesine incelemeler için bizi takip etmeye devam edin.

Mutlu kodlamalar, global geliştiriciler!

Daha Fazla Kaynak