Modern Javascript'e [ES6] Giriş - Part 1

Modern Javascript, ES6 yani ECMAScript 6 / ES 2015 ile başlayan JS devrini ifade eder. Bu sürümlerden sonra Javascript çağ atlayarak modern programlamaya adım atmıştır.

ECMAScript bir standarttır. Javascript ve ActionScript gibi diller ise bu standartın en bilinen implementasyonlarındandır. ECMAScript  ve Javascript terimlerinin ve ilişkilerinin detaylı bir anlatımına ulaşmak için ECMAScript 6 - ES6 - (ES 2015) Nedir? ve Nedir bu ES5, ES6 …? makalelerini okuyabilirsiniz.

React kütüphanesini kullanabilmek için modern Javascript (ESX) kullanımına hakim olmalısınız. Çünkü React JavaScript’in en güncel versiyonu olan ES6 (EcmaScript 6)‘dan bazı özellikleri kullanır.

Bu yazımızda ise React'a başlamak için gerekli olan tüm ES6 konuları üzerinden hızlıca ve basit örneklerle geçeceğiz. İlk olarak bu konuların neler olduğunuz yazalım ve ardından başlayalım;

1. Let
2. Const
3. Arrow Function
4. Default Parameters
5. For Loop
6. Spread Attributes
7. Maps
8. Sets
9. Static Methods
10. Getters / Setters

Let

let, var'a benzer, ancak let scope düzeyindedir. let sadece tanımlandığı blok seviyesinde erişilebilir.

if (true) {
 let a = 40;
 console.log(a); //40
}
console.log(a); // undefined

Yukarıdaki örnekte a değişkeni if ifadesinin içinde tanımlanmıştır ve bu nedenle scope dışında erişilebilir değildir.

Bir başka örneğe bakalım.

let a = 50;
let b = 100;
if (true) {
 let a = 60;
 var c = 10;
 console.log(a/c); // 6
 console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50

Const

Değişkene sabit bir değer atamak için const kullanılır ve değer artık değiştirilemez.

const a = 50;
a = 60; // Hata verir çünkü const değişkenler tekrar assign edilemez.

Başka bir örnek.

const b = "Constant variable";
b = "Assigning new value"; // hata verir.

Başka bir hatalı örnek daha.

const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // hata verir

Fakat diziye yeni eleman ekleyebilirsiniz.

LANGUAGES.push('Java'); // başarıyla ekler.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']

Bu biraz kafa karıştırıcı olabilir fakat şu şekilde düşünmelisiniz. Bir const değişkeni tanımladığınızda, Javascript, değişkenin bellekteki adresine başvurur. Örneğimizde LANGUAGES değişkeni aslında dizi değişkenine ayrılan bellekteki adrese atıfta bulunur. Bu nedenle, aynı adresteki bir dizide eleman ekleyip çıkardığınızda o değişkenin bellekteki adresini değiştirmezsiniz. Program boyunca sadece aynı adresteki diziyi referans almış olursunuz.

Arrow Function

ES6 ile birlikte fonksiyonların syntax'ı bir nebze değiştirilmiştir. Eski syntax:

function oldOne() {
 console.log("Hello World..!");
}

Yeni syntax:

var newOne = () => {
 console.log("Hello World..!");
}

Yeni syntax biraz kafa karıştırıcı olabilir. Ama syntax'ı açıklamaya çalışacağım.

Syntax'ın iki bölümü vardır;

1. İlk kısım sadece bir değişken bildirmek ve ona () fonksiyonunu atamaktır. Sadece değişkenin aslında bir fonksiyon olduğunu söylüyor.
2. Daha sonra ikinci kısım, fonksiyonun gövde kısmını bildiriyor. Süslü parantezli ok kısmı gövde kısmını tanımlar.

Parametrelerle birlikte bir örneğe bakalım.

let NewOneWithParameters = (a, b) => {
 console.log(a+b); // 30
}
NewOneWithParameters(10, 20);

Oldukça basit olduğu için açıklama yapmama gerek olduğunu düşünmüyorum.

Default Parameters

Ruby, Python gibi diğer programlama dillerine aşinaysanız, varsayılan parametreler sizin için yeni bir özellik değildir.

Default parametreler, bir fonksiyonu declare ederken varsayılan olarak verilen parametrelerdir. Ancak fonksiyon çağrılırken değeri değiştirilebilir.

Örneğin:

let Func = (a, b = 10) => {
 return a + b; 
}
Func(20); // 20 + 10 = 30

Yukarıdaki örnekte sadece bir parametre geçiyoruz. Ardından fonksiyon, varsayılan parametreyi kullanır ve işlevi yürütür.

Başka bir örnek bakalım:

let Func = (a, b = 10) => {
 return a + b; 
}
Func(20, 50); // 20 + 50 = 70

Yukarıdaki örnekte, fonksiyon iki parametre alır ve ikinci parametre varsayılan parametrenin yerini alır.

Şimdi netleşmesi için bir örneğe daha bakalım:

let NotWorkingFunction = (a = 10, b) => {
 return a + b;
}
NotWorkingFunction(20); // NAN. Çalışmaz.

Fonksiyonu parametrelerle çağırdığınızda, sırayla atanırlar. Yani ilk değer birinci parametreye atanır ve ikinci değer ikinci parametreye atanır vb.

Yukarıdaki örnekte, 20 değeri a parametresine atanır ve b herhangi bir değere sahip olmaz. Sonuç olarak herhangi bir çıktı alamıyoruz.

Fakat,

NotWorkingFunction(20, 30); // 50;

Başarılı bir şekilde çalışacaktır.

For loop

for..of küçük bir değişiklikle for..in'e çok benzer. for..of, Array gibi liste boyunca yinelenir ve öğelerin değerlerini (indexlerini değil) tek tek döndürür.

let arr = [2,3,4,1];
for (let value of arr) {
 console.log(value);
}

Çıktısı:

2
3
4
1

value değişkeninin dizideki her bir öğeyi çıktı olarak çıkardığını unutmayın. İndexlerini değil!

Başka bir örneğe bakalım:

let string = "Kerteriz";
for (let char of string) {
 console.log(char);
}

Çıktısı:

K
e
r
t
e
r
i
z

Spread attributes

Spread attributes, adından da anlaşılacağı gibi ifadenin yayılmasına yardımcı olur. Basit bir deyişle, bir öğe listesini bir diziye dönüştürür ve bunun tersini de yapabilir.

Spread attributes kullanmadan nasıl yapılır bir bakalım:

let SumElements = (arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
 let sum = 0;
 for (let element of arr) {
  sum += element;
 }
 console.log(sum); // 220. 
}

SumElements([10, 20, 40, 60, 90]);

Yukarıdaki örnek basittir. Diziyi parametre olarak kabul edecek ve toplamını döndürecek bir fonksiyon declare ediyoruz. Basit.

Şimdi aynı örneği spread attributes ile yapalım.

let SumElements = (...arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
 let sum = 0;
 for (let element of arr) {
  sum += element;
 }
 console.log(sum); // 220. 
}

SumElements(10, 20, 40, 60, 90);

Bu örnekte parametre olarak dizi geçmediğimizi unutmayın. Bunun yerine öğeleri parametre olarak iletiyoruz.

Başka bir örneğe bakalım:

Math.max(10, 20, 60, 100, 50, 200); // returns 200.

Math.max, verilen listeden maksimum öğeyi döndüren basit bir fonksiyondur. Parametre olarak dizi kabul etmez.

let arr = [10, 20, 60];
Math.max(arr); // hata verir. Dizi kabul etmez.

Öyleyse kurtarıcımızı kullanalım.

let arr = [10, 20, 60];
Math.max(...arr); // 60

Yukarıdaki örnekte, spread özelliği diziyi eleman listesine dönüştürür.

Maps

Map, key/value çiftlerini tutar. Bir diziye benzer, ancak kendi index'imizi tanımlayabiliriz. Ve index'ler map'lerde unique yani benzersizdir.

Örneğimize bakalım.

var NewMap = new Map();
NewMap.set('name', 'John'); 
NewMap.set('id', 2345796);
NewMap.set('interest', ['js', 'ruby', 'python']);

NewMap.get('name'); // John
NewMap.get('id'); // 2345796
NewMap.get('interest'); // ['js', 'ruby', 'python']

Yukarıdaki örneğin açıklayıcı olduğunu düşünüyorum. set ile map'e key/value çifti tanımlar, get ile belirttiğiniz index'teki değeri çekersiniz.

Map'lerin diğer ilginç özellikleri, tüm indexlerin benzersiz olmasıdır. Ve herhangi bir değeri key veya value olarak kullanabiliriz.

Örneğin:

var map = new Map();
map.set('name', 'John');
map.set('name', 'Andy');
map.set(1, 'number one');
map.set(NaN, 'No value');

map.get('name'); // Andy. John değeri Andy ile değiştirildi.
map.get(1); // number one
map.get(NaN); // No value

Map'lerde kullanılan diğer faydalı yöntemler şunlardır:

var map = new Map();
map.set('name', 'John');
map.set('id', 10);

map.size; // 2. map'in eleman sayısını döner.
map.keys(); // Sadece key'leri döner. 
map.values(); // Sadece value'leri döner.

Yukarıdaki map'i kullanarak örnek yapalım.

for (let key of map.keys()) {
 console.log(key);
}

Çıktısı:

name
id

Yukarıdaki örnekte, map.keys(), haritanın key'lerini döndürür, ancak onu Iterator nesnesinde döndürür. Bu, olduğu gibi görüntülenemeyeceği anlamına gelir. Yalnızca yinelenerek görüntülenebilir.

Aynı map ile diğer bir örnek:

var map = new Map();

for (let element of map) {
 console.log(element);
}

Çıktısı:

['name', 'John']
['id', 10]

Yukarıdaki örnek açıklayıcıdır. for..of döngüsü, dizideki key/value çiftini verir.

Sets

Kümeler, herhangi bir türün benzersiz değerlerini depolamak için kullanılır. Hemen örneğe bakalım:

var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // Duplike veri ekliyoruz.

for (let element of sets) {
 console.log(element);
}

Çıktısı:

a
b

Yinelenen değerlerin görüntülenmediğini unutmayın. Sadece benzersiz değerler görüntülenir.

Ayrıca kümelerin yinelenebilir nesneler olduğunu unutmayın. Bunu görüntülemek için öğeler arasında yineleme yapmalıyız.

Diğer faydalı yöntemlere bakalım:

var sets = new Set([1,5,6,8,9]);

sets.size; // returns 5. .
sets.has(1); // returns true. 
sets.has(10); // returns false. Kümede o eleman var mı kontrol eder.

Yukarıdaki örnekte, size kümenin eleman sayısını döndürür. has fonksiyonu ise kümede o eleman var mı kontrol eder.

Static Methodlar

Çoğunuz statik yöntemleri zaten duymuşsunuzdur. Statik yöntemler ES6'da tanıtılmıştır. Ve onu tanımlamak ve kullanmak oldukça kolaydır.

Örneğin:

class Example {
 static Callme() {
  console.log("Static method");
 }
}
Example.Callme();

Çıktısı:

Static method

Class içinde function anahtar sözcüğünü kullanmadığımızı unutmayın.

Ve sınıf için herhangi bir instance oluşturmadan fonksiyonu çağırabiliyoruz.

Getter ve Setter

Getter ve Setter ES6'da tanıtılan kullanışlı özelliklerden biridir. JS'de sınıf kullanıyorsanız kullanışlı olacaktır.

Örneğin getter ve setter olmadan eski usül bir örneğe bakalım:

class People {
 constructor(name) {
  this.name = name;
 }
 getName() {
  return this.name;
 }
 setName(name) {
  this.name = name;
 }
}

let person = new People("Jon Snow");
console.log(person.getName());
person.setName("Dany");
console.log(person.getName());

Çıktısı:

Jon Snow
Dany

Yukarıdaki örneğin açıklayıcı olduğunu düşünüyorum. People sınıfında, kişinin adını belirlemeye ve almaya yardımcı olan iki fonksiyonumuz var. Oldukça klasik bir yöntem.

Şimdi de getter ve setter ile birlikte örneğimizi inceleyelim.

class People {
 constructor(name) {
  this.name = name;
 }
 get Name() {
  return this.name;
 }
 set Name(name) {
  this.name = name;
 }
}

let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);

Yukarıdaki örnekte, People sınıfında get ve set özelliklerine sahip iki fonksiyon olduğunu görebilirsiniz. get özelliği, değişkenin değerini almak için kullanılır ve set özelliği, değeri değişkene ayarlamak için kullanılır.

Ve getName işlevinin parantez olmadan çağrıldığını görebilirsiniz. Aynı şekilde setName işlevi de parantez olmadan çağrılır ve bu tıpkı değişkene bir değer atamak gibi kolaydır.

Birinci part için bu başlıklar şimdilik yeterli. Bir sonraki yazımız olan Modern Javascript'e [ES6] Giriş - Part 2 başlığıyla devam edebilirsiniz.