Ecmascript 6 ile ne geldi sorusuna en güzel cevabı ne gelmediki olarak verebilirim belki bugüne kadarki javascript değişikliklerinin bir o kadarını 1 versiyonda(ES6) getirdiler ve Eğer modern javascript yazabileceğiniz Typescript, Babel v.b. compiler’lar kullanıyorsanız bu makalenin devamına şiddetle bakmanızı ve yeni özellikleri yeniden kullanılabilir, okunabilir kodlar yazmak kullanmanızı öneririm.

İçerik göster

Ecmascript 6 ile ne geldi?

Typescript ile tanıştığım günden bugüne javascript’e olan bağlılım kat be kat arttı ve gün geçtikçe aramızdaki bu aşk giderek dahada yoğunlaşıyor kimisi dillere aşık olunamaz/olunmamalı desede ben çoktan aşık oldum ❤ her ne kadar platonik olsada bu durumdan memnunum 🤩.

Şimdi hangi özelliklere değişneceğimize liste olarak gözatalım.

let, const ile değişken tanımlama.
Fonksiyonlardaki değişiklikler.
Spread operatörleri.
Arrow(ok) fonksiyonları.
Object’lerdeki değişiklikler ve desctucturing
Class özelliği
Template string
Promise
Döngüler

let ve const ile değişken tanımlama

Javascript’de değişken tanımlarken klasik olarak var keyword’ünü kullanırız ve var keyword’ü ile global değişken tanımlamarı dahi yapabiliyoruz ve istediğimiz her yerden erişebiliyoruz kontrollü bir kullanımı olmadığında bu durum çeşitli sorunlara yol açabiliyor. Şimdi sadece belirli bir scope’dan erişebileceğimiz değişkenler oluşturmak için let keyword’ünü kullanacağız ve eğer değeri değişmeyecek değişkenleriniz var ise o zaman const keyword’ü ile değişken tanımlamaları yapabilirsiniz böylelikle değerinin değişmemesini istediğiniz verileri güvenle kullanabilirsiniz.

o zaman hemen var ve let arasındaki en ince ayırımlardan birine gözatalım var keyword’ü ile tanımlanmış değişkenin döngüye ait bir değişken olduğunu varsayarkan döngü içinde anonymous fonksiyonlar içerisinden bu değişkene erişmeye çalıştığımızda her zaman değişkenin en son değerinin varolduğunu göreceğiz.

Örnek Kod

Üstteki örneğimizde script.js dosyası içeriğinde 2 farklı döngü göreceksiniz ve index.html dosyası içerisinde 6 a etiketi yer alıyor 3 a etiketinde var ve diğer 3 a etiketinde let css sınıfının tanımlandığını görüyoruz var css sınıfına sahip a etiketlerine tıkladığınızda 3 tanesininde sonucunun var: You clicked on link 3 olduğunu görüyoruz ama let sınıfına sahip a etiketlerine tıkladığınızda ise tıklanılan her bir a etiketi için index değeri olan 0, 1, 2 değerleri ile beraber çıktı oluştuğunu göreceğiz tam olarak istediğimiz sonuçta bu.

Fonksiyonlardaki değişiklikler

Varsayılan değerli parametreler

C# v.b. gelişmiş programlama dillerinde metodların parametrelerine değer girilmediğinde varsayılan olarak ayarlanacağı değeri belirleyebiliyorduk javascript dünyasındada artık bu özgürlüğe sahibiz. Örnek sözdizimi ise şu şekilde.

class Person {
    constructor(public name = "Murat", public surname = "Öner") {
        
    }
}

var person = new Person()

alert(`${person.name} ${person.surname}`)

class Person {

constructor(public name = "Murat", public surname = "Öner") {

}

var person = new Person()

alert(`${person.name} ${person.surname}`)

Person sınıfından yeni bir örnek almaya çalıştığınızda contructor’ındaki name ve surname parametrelerine birşey girmezseniz o zaman name için Murat ve surname için ise Öner değeri ayarlanacak.

Rest parametreleri

Sihirbaz olarak nitelendirdiğim spread operatörünü belirttiğiniz türde sınırsız sayıda parametre olarak geçebilmek için Rest parametrelerini kullanacağız. C#’da params keyword’ü ile bu özelliği aktif olarak kullanabiliyoruz. Şimdi javascript’de nasıl kullanabildiğimiz görelim. Çok basit bir sum adında bir fonksiyon oluşturup …numbers parametresi ile istediğimiz sayıda sayısal değer geçip tüm değerleri topluyoruz.

function sumRest(...numbers) {
    return numbers.reduce((val, cur) => val + cur);
}

alert(sumRest(1,2,3,17,2))

function sumRest(...numbers) {

return numbers.reduce((val, cur) => val + cur);

}

alert(sumRest(1,2,3,17,2))

Çok basit sumRest adında “…(spread operatörü)” ile istediğimiz sayıda sayısal değer geçip array fonksiyonu olan reduce fonksiyonu ilede tüm değerleri toplayıp geri dönderiyoruz.

Arrow(Ok) Fonksiyonları

C#’da sıklıkla kullandığımız lambda expression benzeri bir sözdizimi olan bu özellik ile kolayca fonksiyon tanımlamalarını yapabiloruz ortalık function keyword’leri dolmadan geliştirme yapabiliyoruz.

/*
    Arrow fonksiyonları olmadan önce kullanılan klasik fonksiyon tanımı.
*/
var func1 = function() {
    
}

/*
    ES6 ile arrow fonksiyonlarının kullanımı bu kadar basit.
*/
let func2 = () = {
    
}

/*
    Eğer arrow fonksiyonunuz parametre alıyorsa ve parametre sayısı 1 tane ise o zaman parantez açıp kapamanıza gerek yok alttaki örnekte olduğu gibi.
*/
let log = message => {
    console.log(message)
}

log('Tek parametre olduğu için () parantezleri açıp kapatmadan parametreli arrow fonksiyon tanımı yapıyorum ama birden fazla parametreniz var ise o zaman () parantezlerini kullanmalısınız.')

Arrow fonksiyonları olmadan önce kullanılan klasik fonksiyon tanımı.

var func1 = function() {

}

ES6 ile arrow fonksiyonlarının kullanımı bu kadar basit.

let func2 = () = {

}

Eğer arrow fonksiyonunuz parametre alıyorsa ve parametre sayısı 1 tane ise o zaman parantez açıp kapamanıza gerek yok alttaki örnekte olduğu gibi.

let log = message => {

console.log(message)

}

log('Tek parametre olduğu için () parantezleri açıp kapatmadan parametreli arrow fonksiyon tanımı yapıyorum ama birden fazla parametreniz var ise o zaman () parantezlerini kullanmalısınız.')

Spread Operatörü

C#’da aslında çok uzun süredir kullandığımız metodlara istediğimiz sayıda ve belirttiğimiz tipte değer geçebilmek için kullanılabiliyor fakat tek özelliği sadece metodlara istediğimiz sayıda değer geçebilme değil şaşıracağınız sayıda özelliği bulunan bu spread operatörüne belki benim gibi aşık olabilirsiniz. ❤

Hemen bu sihirli operatörün kullanım örneklerine gözatalım.

İlk bahsettiğimiz örnek olan metodlara istediğimiz sayıda ve belirlediğimiz tipte veri girişi sağlayabileceğimiz örneği yapalım.

function add(...x) {
 let result = 0;
 for (var i = 0; i < x.length; i++) {
 result += x[i];
 }
 return result;
}
 
let nums = [2, 5, 5];
let result = add(...nums); //12

function add(...x) {

let result = 0;

for (var i = 0; i < x.length; i++) {

result += x[i];

}

return result;

}

let nums = [2, 5, 5];

let result = add(...nums); //12

Üstteki kodda göreceğiniz üzere bir parametre tanımlı ama “…” spread operatörü ile tanımlandığı için istediğimiz sayıda parametre geçebiliyoruz.

Class özelliği

Artık OOP vazgeçilmezlerinden olan class’ları javascript tarafındada özgürce kullanabiliyoruz inheritance, constructor, extends, public, private property veya get ve set özelliği verebileceğiniz propertyleri özgürce oluşturabilirsiniz.

Bu konuda herhangi bir örnek yapmayacağım nedeni ise daha önce javascript’de class işlemleri ile alakalı detaylı bol örnek kodlu bir makalem yer alıyor o makaleyede Javascript’de class tanımlama ve diğer class işlemleri

Template string

C# 6 ile beraber kullanımına alıştığımız string interpolation adındaki özelliğe ES6 de template string adında aynı mantıkla çalışan bu özelliği kullanabiliyoruz. ES6 öncesinde bu durum tüm programlama dillerinde olduğu gibi “+” karakteri kullanılarak yapılabiliyordu ve halen yapılabiliyor ama uzun string birleştirmeleri bazen kafa karışıklığına sebep olabiliyor ve kod okunabilirliğini maalesefki azaltıyor. Şimdi javascript’de bu Template String özelliğini nasıl kullanabildiğimizi görelim. Ayrıca birden fazla satır için Template String özelliğini kullanabiliyoruz.

const name = "Murat"
const surname = "Öner"
document.write(`${name} ${surname} adlı kişinin bloğundasınız.`)

// Birden fazla satır için kullanabileceğimiz örnek sözdizimi
document.write(`
  ${name} ${surname} adlı kişinin bloğundasınız.
  <br/>
  <br/>
  <strong>Tarih:</strong> ${new Date()}
`)

const name = "Murat"

const surname = "Öner"

document.write(`${name} ${surname} adlı kişinin bloğundasınız.`)

// Birden fazla satır için kullanabileceğimiz örnek sözdizimi

document.write(`

${name} ${surname} adlı kişinin bloğundasınız.

<br/>

<strong>Tarih:</strong> ${new Date()}

Döngüler

Javascript’de döngü için en sık kullanılan hiç şüphesiz diğer diller olduğu gibi for döngüsüdür. ES6 ile artık 3 farklı sözdizimi ve işleyişi ile for döngüsüne sahibiz bu for döngülerini çoğu kaynakta for, forin, forof olarak görebilirsiniz. Hemen hatırlatmasını yapalım for ve forin zaten javascript ilk sürümlerinden gelen özellikler olduğundan herhangi bir sıkıntı olmadan yıllardır kullanıyoruz fakat forof ES6 ile bize katıldı. ForOf’da Iterable nesneler üzerinde döngü kurabiliyoruz bu iterable nesneler ise şöyle oluyor: String, Array, Array benzeri arguments, NodeList nesneleri, TypedArray, Map ve Set tipler üzerinde forof ile döngü kurulabilmektedir. Örnek söz dizimi ise alttaki gibidir.

ForOf sözdizimi

const arry = [
    { name: 'murat', surname: 'öner', age: 27 },
    { name: 'sakine', surname: 'öner', age: 27 },
]

for( const item of arry ) {
    document.write(`Ad: ${item.name}<br>`)
}

const arry = [

{ name: 'murat', surname: 'öner', age: 27 },

{ name: 'sakine', surname: 'öner', age: 27 },

]

for( const item of arry ) {

document.write(`Ad: ${item.name}<br>`)

}

Üstteki kod bloğunda göreceğiniz gibi forof ile 2 elemanı olan array nesnesi üzerinde dönüp diğer dillerde foearch mantığı ile birebir aynı çalışan forof ile döngüdeki herbir eleman takma ad ile tanımladığımız item adındaki değişkene sıradaki eleman aktarılıyor ve item üzerinden elemanların özelliklerine erişebiliyoruz.

✅ ES6 ile kullanımımıza sunulmuş bu özellikleri sorunsuz tüm tarayıcılar tarafından desteklenecek şekilde özgürce kullanabilmek için polyfill yada typescript yada babel gibi javascript compiler’larından birini kullanmalısınız yoksa diğer türlü …çalışmıyor… gibi kelimelerin geçtiği cümleler ile geri dönüşler yaşamanız büyük olasıdır.

5/5 - (3 votes)

Kategoriler

Bloga e-posta ile abone ol

Ecmascript 6 ile ne geldi?

Ecmascript 6 ile ne geldi?

let ve const ile değişken tanımlama

Örnek Kod

Fonksiyonlardaki değişiklikler

Varsayılan değerli parametreler

Rest parametreleri

Arrow(Ok) Fonksiyonları

Spread Operatörü

Class özelliği

Template string

Döngüler

ForOf sözdizimi

Bir yanıt yazın Yanıtı iptal et

Ecmascript 6 ile ne geldi?

let ve const ile değişken tanımlama

Örnek Kod

Fonksiyonlardaki değişiklikler

Varsayılan değerli parametreler

Rest parametreleri

Arrow(Ok) Fonksiyonları

Spread Operatörü

Class özelliği

Template string

Döngüler

ForOf sözdizimi

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin