ECMAScript 6 [ES6] ve JavaScript’ in Yeni Özellikleri

Merhaba, öncelikle ECMAScript’ in ne olduğunu kısa bir hatırlayalım.

https://en.wikipedia.org/wiki/ECMAScript adresinden tam detaylarına erişebileceğiniz gibi, client-side ta kullanılan JavaScript, JScript ve ActionScript dillerine implement edilen standartlar bütünüdür. 2015′ te bu standartlarda değişiklikler yapıldı, yeni özellikler getirildi ve adına ECMAScript 2015 dendi. Dolayısıyla bu değişikliklerde JavaScript engine lerine etki edecek. Hangi engine’ e ne oranda implement edildiğini güncel olarak http://kangax.github.io/compat-table/es6/ adresinden takip edebilirsiniz.

Tarayıcıların ve NodeJS gibi dillerin de ECMAScript 6 implement ini tamamlamalarıyla birlikte artık yeni özellikleri kullanmaya başlayacağız. Dilerseniz lafı uzatmadan özelliklerimizi tek tek inceleyelim.

ECMAScript 6 Özellikleri;

Arrows;

Eskiden döngüdeki bir değeri ele almak istediğimizde, function expression kullanırdık. Tıpkı şu şekilde;

Yukarıdaki kodta myArray adında bir dizi tanımlayıp içini doldurdum ardından bu dizinin her elemanını map metoduna sokarak 2 ile çarptım. Burda konumuz 2 ile çarpmak değil. döngüdeki değerleri ele alış şeklim. function expression kullandım. Lakin ES6′ da işler daha basitleşiyor. Şu şekilde;

ilk parametre yani “n” döngüdeki değeri tutuyor. => işareti ile de yapılacak işleme assign ediyorum. Hepsi bu kadar.

Bir başka örnekte şu şekilde;

Class;

Class görünce neşemiz yerine geldi değil mi 🙂

Open source dünyasında, onlarca class ve inheritance yapısını simule etmeye çalışan javascript kütüphanesi var. http://stackoverflow.com/questions/711209/which-javascript-library-has-the-most-comprehensive-class-inheritance-support adresindeki konuyu incelediğinizde, çözümleri, tecrübeleri okuyabilirsiniz. Fakat tabiki hiçbiri gerçeğinin yerini tutamaz. Öyleyse incelemeye başlayalım 🙂

Class yapısında birden çok örnek vereceğim ve örnekler basitten gelişmiş e doğru olacak.

Önceden Class tanımlama, method ekleme ve constructor olayını aşağıdaki şekilde çözerdik;

Görüldüğü üzere, function sayesinde yeni bir metod tanımlamaktan bir farkı yoktu. Function’ ın içine yazacağınız herşey constructor’ ın görevini görürdü. Yeni bir metod eklemek için ise prototype metodunu kullanırdık.

Ne kadar da ilkel ve standart dışı bir iş değil mi? ES6 ile ise aynı işi aşağıdaki şekilde yapıyoruz;

class deyip ismini veriyorum, içine constructor metodumu ve diğer ihtiyacım olan metodları ekliyorum.

Ne kadar da okunabilir, anlaşılabilir ve yönetilebilir bir kod değil mi ?

Şimdi örneğimizi biraz daha büyütelim, bir class oluşturalım, ardından bir tane daha oluşturup ilk class tan extend edelim, gerisinide kodun devamında anlatayım 🙂

  • Hello adında bir class açtım
  • constructor(yapıcı) metodunda name değişkenini alıp, set ediyor
  • hello adında bir metodu var, name property sini kullanıp string dönüyor
  • sayHelloAll adında da static bir metodum var, static metod olduğu için bu class’ tan instance elde etmeden, bu metodu istediğim anda kullanabiliyorum.
  • HelloWorld adında başka bir class yarattım, yaratırken az önce oluşturduğum Hello classını extend ettim. Artık native olarak extend yapabiliyorum. Yeni class’ ımında constructor’ ı var. Constructor’ ın içinde super keyword’ ünü kullandım. Super önemli bir keyword.
    ES6′ da super ne demektir ?
    super keyword’ ü parent class’ ı işaret eder. Her child class’ ın bir parent class’ ı olduğu için, child class’ larda bu kullanıma alışacağız. super(‘World’); diyerek, parent class’ ın constructor’ ını çağırdım, çağırırken de “World” diye bir string verdim, çünkü parent class’ ın constructor’ ı bir argüman alıp name property’ sine set ediyor.
  • echo metodum var, klasik alert işi yapıyor lakin içinde yine super metodunun kullanımı var. Bu sefer  super.hello() diyerek, parent class’ ın hello metoduna ulaştım.
  • Super metodu yokken bunu, class’ ın ismi .call() metodu ile yapıyorduk.
  • var hw = new HelloWorld(); ile klasik instance elde etme işlemini uyguluyorum. Ardından da elde ettiğim instance üzerinden istediğim işlemleri yapıyorum.

Template Strings;

Template string ler embedded expression olarak dahil edilebilen string ler dir. O ne demek diyebilirsiniz, hemen örneklemeliyiz. Öncelikle, ES5 te yani şuan bir değişken tanımlayıp, bu değişkeni herhangi bir string parçasında dahil etmek için aşağıdaki gibi yazardık.

String içinde değişken kullanmak istediğimizde, string’ i + işaretleri ile böler ve içine değişkeni gömerdik. Lakin artık template string var. Yukarıdaki işlemi aşağıdaki şekilde yapacağız.

Görüldüğü üzere daha kullanışlı. Bölme kesme biçme yok. $ işareti ve curly brace ler içinde değişken ismini veriyoruz.

curl brace ler içinde sadece değişken ismi de vermiyoruz. Expression yazıyoruz. Aşağıdaki gibi;

Görüldüğü üzere {} yani curly brace ler içinde a + b gibi matematik işlemi yaptım.

Aşağıdaki gibi method da çağırabilirim.

Ayrıca artık satır atlarken \n\ işaretini koymama gerek yok, aşağıdaki şekilde rahatlıkla yeni satıra geçebilirim.

Destructuring Assignment;

Bu konuyu kelimelerle anlatmak biraz zor, Türkçe’ nin yetersiz yada yanlış anlamlara çıkabileceği bir durum. O yüzden örnekleyerek anlatacağım.

Şu koda bir bakalım;

list adında bir dizi tanımladım, bu dizideki bir elemanı, bir değişkene assign etmek istediğimde ise a = list[0] şeklinde, listenin 0 yani 1.elemanını direk numara vererek seçiyorum. Lakin ES6 ile işlemler şu şekilde oluyor.

dizi tanımlamam gene aynı. Fakat assign aşamasında, toplu assign ederken dizi olarak açtım, ve önceden oluşturduğum diziyide referans olarak ekledim. Burda a’ nın değeri 1, b’ nin değeri 3 olur. a ile b arasında 2 adet virgül olduğu için, referans dizideki 2.eleman pas geçilir.

YADA

Bir objenin değerlerini, değişkenlere assign ederken. Artık foo’ nun değeri lorem, bar’ ın değeri ipsum dur.

Default Parameters;

ES5′ te default parameter diye bir şey yoktu. Backend dillerindeki gibi bir kullanım yapamıyorduk ama artık var.

Görülüğü üzere greet adında bir metod tanımladık. 2 değer alıyor ve bu değerler, method kullanılırken girilmediyse, default olarak verilenler kullanılıyor. metodu parametresiz olarak greet(); şeklinde çalışırtırırsak, msj değişkeni hello, name değişkeni de world olur. greet(‘hey’) şeklinde çağırsanızda msg hey değeri alır, name değişkeni ise değer almadığından default olarak world değerini alır.

Let;

Belkide es6 ile gelen özellikler arasında, anlaması alışması en zor olacak özelliklerden biri. İnternette let hakkında çok fazla yanlış bilgi, kimileri “var” ın yerine koymuşlar hatta yeni “var” demişler. “let” ile “var” birbirinin yerini tutacak şeyler değil. Bunu en iyi örnekler ile anlıyacağız.

Önce basit örnek;

Gördüğünüz üzere, let ve var ile değişken tanımlayabiliyoruz. Ama aralarındaki fark scope’ ta başlıyor.

Gördüğünüz üzere, ornek1 metodunda, let ile tanımladığımız armut değişkeni sadece for döngüsünün içinde erişilebilir. Döngü den sonra armut diye bir değişken kalmıyor.

Fakat ornek2 de klasik var ile tanımlanmış değişkene heryerden erişebiliyoruz.

Const;

Constantlara backend dillerinden aşinasınızdır. Constantlar sadece bir kere değer alırlar ve değişken değildirler. Değerleri tekrardan set edilemezler.

const ile set edilen değerler, asla değiştirilemezler. Örnek;

Unicode;

Unicode desteği. Örnekte görüleceği üzere;

Modules;

Artık native olarak module loader geliyor. CommonJS ve benzeri componentlere ihtiyaç kalmıyor, üstelik asenkron yapıda. Modülüne ihtiyaç duyan kod parçası,modülünüz yüklenene kadar çalıştırılmıyor.

Aşağıdaki gibi basit bir matematik işlemleri yapan modül tanımlıyoruz.

Ve bu modülü aşağıdaki şekilde çağırıp kullanabiliyoruz;

import * as math from “lib/math”; satırı ile, lib klasöründeki math.js dosyasının içinde export edilmiş herşeyi (*) math ismiyle çağırıyoruz. Ardından da math nesnesini istediğimiz gibi kullanıyoruz.

Math + Number + String + Array + Object APIs;

Hali hazırda var olan bu kütüphanelere eklemeler yapılmış. Örneklerini aşağıda inceleyebilirsiniz

Promises;

Hali hazırda pek çok kütüphane(jquery vb.) ve framework(angularjs vb.) de bulunan promise özelliği, artık javascript’ in native bir özelliği oluyor. Promises bildiğiniz üzere, asenkron programlamanın olmassa olmazıdır.

Örnek;

timeout adındaki metod’ un içinde setTimeout metodu çalışıyor. setTimeout metodu, yapacağı işlemi, kendisine verilen süre geçtikten sonra yapar, bu yüzden asenkron işlemleri Promise sınıfından bir instance elde edip (new Promise), bunun içinde yapıyoruz, ve artık .then() metodu içinde dönen cevabı kullanabiliyoruz.

 

Sürekli güncellenecektir. Sorularınızı http://angulartr.com/forum/category/10/javascript adresinden sorabilirsiniz.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir