Modern JavaScript ES6–ES13 (JS öğretici)

Bu JavaScript ES6 kursunda seni neler bekliyor.

JavaScript, birçok yıldır tarayıcılarda mevcuttur. Neredeyse tüm web siteleri bazen daha fazla bazen daha az JS kodu içerir. İlk sürümler oldukça pürüzlü olduğundan, şimdiye kadar ES5 standartıyla oldukça iyi çalışıldı, en azından tuzakları ve belirsizlikleri ustaca atlatabilirseniz. Peki neden yeni bir şey öğrenmek ve Bunun yerine bildiğiniz konuda kalmak? Bu dersimizde yeni standart ES6'nın avantajlarını ve aslında ondan vazgeçmemenin nedenlerini göstereceğim.

Bu ders, bir geliştirme ortamı kurmanın bir yolunu sunar. Bu sırada IDE olarak MS'in Visual Studio Code'u ve Dev-Sunucusu olarak ViteJS'i kullanıyoruz.

ES5'e kadar değişkenleri tanımlamanın tek yolu olan var anahtar kelimesi, sıklıkla istenmeyen davranışlara veya hatta hatalara neden olan özelliklerine sahipti. ES6, var'ın bazı eksikliklerini gideren iki yeni anahtar kelime let ve const tanıttı.

Her web geliştiricisi for döngüsünü bilir. Genellikle dizileri döngüde gezinmek için de sıkça kullanılır. ES6 ile bu işlemi daha kısa ve daha kompakt yapmaya izin veren For döngüsünün bir türü bulunmaktadır.

Fonksiyonlar JS’de temel ve şimdiye kadar yalnızca function anahtar kelimesiyle bildirilip tanımlanmıştır. ES6, kodu hem okunabilir hale getiren hem de this ile ilgili can sıkıcı bir probleme çözüm sunan çok zarif ve kısa bir yazım şekli getiriyor.

İsteğe bağlı parametreler ES5'te biraz uğraş gerektirerek uygulanabilir ve işlevin çağırıcısına gözükmez. ES6 ile ise isteğe bağlı parametreler, varsayılan değerleriyle doğrudan işlev imzasına yazılabilir.

Destructuring, nesnelerden ve dizilerden öğelerin seçici olarak çıkarılmasına olanak tanır. Dikkatlice incelendiğinde, JavaScript kodunu daha zarif ve daha kompakt hale getiren birçok uygulama olasılığı ortaya çıkar.

arguments değişkeniyle uğraşmak, fonksiyonlarda değişken sayıda parametreye izin vermek için ES6'ya kadar gereklidir. Bu, ES6'da adı verilen Rest Parametreleri ile çok daha kolay hale gelmiştir.

Fonksiyon tanımlarında olduğu gibi, Rest parametrelerinde …- operatörü kullanılmaz, Aynı zamanda Array-Destructuring'de de kullanılabilir, yani elemanların "Gerçek" kısmını yakalamak ve bir dizi olarak sunmak.

Dizilerde olduğu gibi, nesnelerde de kalan özellikleri toplamak için artık işlemcisi kullanılabilir ve bir nesne olarak sağlanabilir.

Geriyükleme operatörünün zıttı, yayılma operatörüdür. Aynen şu şekilde görünüyor (…), ancak atamanın öteki tarafında durur ve diziyi parçalarına ayırır.

Yayılma operatörü ile yapılan "hile" nesneler için de çok iyi çalışır. Böylece nesneler başka nesnelere "karıştırılabilir". Ancak Object.assign() burada çok iyi bir alternatif sunar.

Obje harfili fonksiyonlar, function-Anahtarıyla yazmak oldukça kaba. Ancak ES6 ile çok daha kısa ve anlaşılır hale getirilebilirler.

Dize işlemleriyle uğraşmak, her programcının temel araçlarından biridir. İyi ki ES6 bazı yeni ve oldukça yararlı Dize işlevleri sunuyor, bu da birçok yazma işinden tasarruf sağlıyor.

Şunu söylemek mümkündür: Entegre değişken değerlerine sahip çok satırlı dize metin literalleri, ES6'ya kadar kabus gibiydi ve okunması da çok hoş değildi. ES6'nın yeni şablon kelimeleri ise sentaks olarak çok hoştur.

ES5 ile birlikte, daha işlevsel bir yaklaşımı benimseyen birkaç çok kullanışlı dizi fonksiyonu vardır. ES6, bu listeye bazı eklemeler yaparak dizilerle çalışmayı daha da keyifli hale getirmiştir. Bununla birlikte, ES5'te zaten bulunan bazı "eski" fonksiyonlar da burada değer görmektedir.

Nesneler her zaman bir Anahtar-Değer Deposu veya Sözlük olarak kullanılabilirdi, ancak bazı dezavantajlarla. Yeni Map veri yapısı bu dezavantajlardan kurtuluyor ve diğer programlama dillerinden tanıdığımız sağlam sözlük işlevselliği sunuyor.

Asenkron işlemler geri arama fonksiyonları ile başa çıkılabilir, ancak böyle yapılırsa iç içe geçme derinliği büyük olabilir ve kod karmaşık hale gelir (sözde geri arama cehennemi). Promiseler, bu sorunu çözer, derin iç içe geçmeleri atlayarak ve asenkron işlemlerin bir seviyede zincirlenmesine izin vererek.

Promise'lerle Callback Cehenneminden kaçınılabildikten sonra, async/await yapısı neredeyse senkron olarak programlama yapmayı sağlayarak daha fazla şekerleme sunar. Bu, Promises üzerine inşa edilir ve asenkron işlemleri neredeyse senkron gibi yazmaya olanak tanır. Bir kez async/await ile programlama yapıldıktan sonra, artık Promise'lerin then metodu ve dahası Callback'lerin doğrudan kullanımından kaçınılır.

Node.js'de modüller başlangıçtan beri kullanılmaktadır, ancak başlangıçta yalnızca require ile CommonJS modül formatına dayanmıştır. ES6'dan itibaren bir modül tanımı standart hâle geldi ve yeni anahtar kelimeler olan import/export tanımlandı. Bu format artık neredeyse tüm (yeni) JS kütüphaneleri tarafından desteklenmektedir ve Node.js de en yeni sürümlerde bununla başa çıkabilmektedir.

Modüllerin statik olarak import anahtar kelimesi ile ithal edilmesinin yanı sıra, ES6 ayrıca import() fonksiyonu ile dinamik ithalatı da destekler. Tüm işlem asenkron bir şekilde gerçekleştiği için, bir sözün geri dönüşü yapılır ve await kullanarak mükemmel bir şekilde beklenilebilir. Böylece çalışma zamanında modüllerin yüklenmesinin önünde hiçbir engel olmaz.

Klasik nesne yönelimli programlama, sınıflar ve kalıtım ile ES6'ya kadar yalnızca bir yapılandırıcı işlevdeki bir prototip aracılığıyla mevcuttu. Bu zorlayıcı, pek kompakt görünmüyor ve bu nedenle hatalara neden olabiliyordu. Yeni class anahtar kelimesi artık ES6 ile diğer programlama dilleri olan Java, C# ve C++ gibi daha kompakt bir şekilde tanımlamayı sağlar. Ancak içeride temel olarak bir prototip tabanlı sistem olarak kalır, sadece daha güzel bir sözdizimi ile.

Miraslama halen prototiplere dayanıyor, ancak ES6'da extends anahtar kelimesiyle çok daha kolay ve anlaşılır bir hale getiriliyor. Kullanıldığında, temel sınıfın constructor'ı super ile doğru zamanında çağrılmalıdır. Tabii ki, bu nasıl yapılacağı da bu dersin içinde açıklanmaktadır.

Üyelerin veya alanların deklarasyonu da yeni standartlar sayesinde mümkün hale getirildi. Böylelikle statik alanlar da bildirilebilir ve başlatılabilir.

Artık özel alanlar da bildirilebilir ve bunlara dışarıdan kesinlikle erişilemez. Diğer programlama dillerinden belirgin şekilde farklı olan bir bildirim vardır ki biraz alışılması gerekmektedir.

Yeni anahtar kelime class ve kalıtım ve veri kapsülleme (private alanlar) gibi ilişkili özelliklerle, tüm nesne yönelimli programcıların aslında memnun olması gerekirdi, değil mi? Bu dersin içinde, sınıflar, prototipler ve this olmadan tamamen kısıtlamaları olmadan nesneler oluşturmanın bir alternatifini sunmak istiyorum, ancak bu şekilde daha esnek bir "kalıtım" ya da daha iyi "kompozisyon" olanağı sağlar.

ES6 sürümünün ve sonrasının temel özellikleri şimdi ele alınmış olmalı. Ancak sürekli olarak yenilikler ekleniyor. Bazı daha az yaygın kullanılan fonksiyonlar henüz belirtilmedi. Bu ders, gelecekte ne beklemeniz gerektiğini ve özel durumlarda hangi fonksiyonların hala ilginç olabileceğini açıklar.