ECMAScript 5.1'e Giriş

By Çağlar Yeşilyurt

İçindekiler Listesi:

1. Giriş
2. Tarayıcı Desteği
3. ES5'ın Katı Modu
4. JSON
5. Nesnelere Eklemeler
6. Dizilere İlaveler
7. Function.prototype.bind
8. Ek Referenslar

Giriş

ECMAScript 5.1 (yada sadece ES5) ECMAScript standardının — önergede JavaScript temel alınmıştır — en son gözden geçirimidir. HTML5 önergesinin sürecine benzer şekilde, ES5 varolan JavaScript kullanımlarını, dile ve ECMAScript nesnelerine olan eklemeleri standart bir şekle sokar. ES5 "strict mode" olan bilinen bu dilin bir strict türevini de tanıtır.

Bu makalede dile ait en yararlı değişiklikleri ve eklemeleri tanıtacağız. Tam liste için, http://www.ecmascript.org/ adresinden resmi ECMAScript dil önergesi (PDF indirmesi, 3MB) adresinden erişilen belgenin Ek D ve E bölümlerine bakın; bu içeriği HTML biçiminde Michael[tm] Smith'in resmi olmayan açıklamalı HTML sürümünden de indirebilirsiniz.

Tarayıcı Desteği

Opera 11.60'ın sürülmesiyle beraber, beş büyük tarayıcı ES5 desteklemektedir, uygulamaya dayalı hatalar için kaydedin. Aksine bir şey ifade edilmezse, bu makalede bahsedilen her şey aşağıdaki tarayıcı sürümleri(ve daha yüksek sürümleri) ile beraber kullanılabilmektedir:

• Opera 11.60
• Internet Explorer 9*
• Firefox 4
• Safari 5.1**
• Chrome 13

* IE9 strict mode desteğini sağlamamaktadır — bu IE10 ile beraber eklendi.

** Function.prototype.bind desteği son Webkit sürümünde bulunmasına rağmen Safari 5.1 halen Function.prototype.bind desteğine sahip değil.

Daha eski tarayıcılara bu destek için, Juriy Zaytsev'in mükemmel ECMAScript 5 uyumluluğu tablosuna bakın.

ES5 için Strict Mode

Katı mod, geliştirici için dilin daha tutucu bir çeşidini kullanmasını sağlar — geliştiriciler için ek güvenilirlik ve kullanıcılar için ek güvenlik sağlar. Katı mod, Javascript dosyasının ya da fonksiyonunun başına "use strict" yönergesi yerleştirilerek etkinleştirilebilir. "use strict" yönergesi sadece bir katar olduğu için eski tarayıcılar tarafından güvenli bir şekilde yok sayılacaktır.

"use strict";

function strict(){
  "use strict";
  //...
}

function sloppy(){
  eval("window.foo = 'bar'");
}

Katı mod kullanırken pek çok şey sürpriz bir şekilde ya da sorunlu bir davranış olarak çalışma anında hata üretecektir. Örneğin:

• Tanımlanmamış bir değişkene değer atamak, global bir değişken oluşturmak yerine ReferenceErrorhatası fırlatır.
• Aynı özelliği bir nesneye birden fazla kez atamak SyntaxError(söz dizimi hatası) fırlatır.
• with ifadesinin kullanımı SyntaxError(söz dizimi hatası) fırlatır.

MDSN'deki katı mod makalesi tüm bu farkları özetleyen yararlı bir tablo içerir.

JSON

ES5 bir nesneyi JSON biçimine dönüştürme (JSON.stringify) ve bu biçimden eski haline geri dönüştürme (JSON.parse) için genel bir JSON nesnesi tanımlar.

Eski tarayıcılar için, Douglas Crockford'un json2.js dosyasını kullanmayı göz önünde bulundurun. Bu dosya, tarayıcının bu özelliği doğal olarak destekleyip desteklemediğini test ettikten sonra eski tarayıcılarda aynı işlevlerin kullanılabilmesini sağlar.

JSON.parse(yazi [, fonksiyon])

JSON.parse JSON olarak biçimlendirilmiş yazıyı alır ve bir ECMAScript değeri olarak geri döndürür. İsteğe bağlı kullanılabilecek parametre ise iki ayrı parametreye sahip, anahtar ve değer, bir fonksiyondur. Bu fonksiyon sonuçlar üzerine işlem yapar — filtreleme yapmaya veya geri dönecek değeri değiştirmeye olanak sağlar.

>> var sonuc = JSON.parse('{"a": 1, "b": "2"}');
Object

>> sonuc.b
"2"

Eğer ayrıştırma işlemine kadar değerin tam sayı olduğundan emin olmak istiyorsanız, isteğe bağlı fonksiyonu aşağıdaki gibi kullanabilirsiniz.

var sonuc = JSON.parse('{"a": 1, "b": "2"}', function(anahtar, deger){
  if (typeof deger == 'string'){
    return parseInt(deger);
  } else {
    return deger; 
  }
})

>> sonuc.b
2

JSON.stringify(deger [, yerdegistirici [, bosluk]])

JSON.stringify geliştiricilerin bir ECMAScript değerini alıp bunu JSON biçimindeki karakter dizisine dönüştürmesini sağlar. Basitçe, JSON.stringify bir değer alır ve geriye bir karakter dizisi döndürür.

>>> var mike = JSON.stringify({mike: "taylor"})
undefined

>> mike
'{"mike": "taylor"}'

>> typeof mike
"string"

Karakterleştirilmiş değeri değiştirmeye ihtiyacımız varsa yada seçilen bazı değerleri filtrelemek gerekiyorsa, bunu yer değiştirici fonksiyon aracılığıyla yapabiliriz. Örneğin nesnemizdeki 13 sayısını karakterleştirme işlemi sırasında filtrelemek istiyorsak,

var sayilar = {
  "birinci": 7,
  "ikinci": 14,
  "ucuncu": 13
}

var sansliNumaralar = JSON.stringify(sayilar, function(anahtar, deger){
  if (deger == 13) {
    return undefined;
  } else {
    return deger;
  }
});

>> sansliNumaralar
'{"birinci": 7, "ikinci": 14}'

Eğer yer değiştirici fonksiyon undefined değeri geri döndürürse , anahtar/değer çifti son JSON'da yer almayacaktır. Bir alana neyin geri döndüğünü öğrenirken okunabilirliği arttırmak için bir boşluk parametresi de kullanabiliriz. Bu parametrenin alabileceği değerler, JSON katarı ya da bir katarın her bir girinti seviyesindeki boşluğun sayısını gösterecek bir numara olabilir. Bir sayı 10'un üzerinde ise yada bir karakter dizisi 10 karakterden fazla karaktere sahipse, 10'a yada ilk 10 karaktere düşürülecektir.

var sansliNumaralar = JSON.stringify(sayilar, function(anahtar, deger) {
  if (deger == 13) {
    return undefined;
  } else {
    return deger;
  }
}, 2);

>> sansliNumaralar
'{
  "birinci":7,
  "ikinci":14
}'

Nesne Eklemeleri

Object constructor aşağıdaki yöntemler eklendi:

• Object.getPrototypeOf
• Object.getOwnPropertyDescriptor
• Object.getOwnPropertyNames
• Object.create
• Object.defineProperty
• Object.defineProperties
• Object.seal
• Object.freeze
• Object.preventExtensions
• Object.isSealed
• Object.isFrozen
• Object.isExtensible
• Object.keys

Bu eklemelerin yararlarından biri nesnenin özellikleri üzerindeki denetimi arttırmaktır. Örneğin neyin değiştirilebileceğini, silinebileceğini, listelenebileceğini belirleyebilmemizi sağlar. Bu, bir nesnenin özellik tanımlamalarına program niteliğinde erişme yoluyla yapılır. Örneğin:

var kedi = {};

Object.defineProperty(kedi, "ad", {
  value: "Maru",
  writable: false,
  enumerable: true,
  configurable: false
});

Object.defineProperty(kedi, "beceri", {
  value: "kutuları keşfetme",
  writable: true,
  enumerable: true,
  configurable: true
});

kedi nesnemiz için, onun adı değiştirilemez ama for-in döngüsünde değeri görüntülenebilir. Diğerleri arasında, Maru kutuları keşfetmede iyi, ama bu gelecekte değişebilir çünkü beceri özelliği writable(yazılabilir) ve configurable(ayarlanabilir) olarak kaldı.

İleride, bir makalede nesne eklemelerinin tümünü ayrıntılarıyla keşfedeceğiz.

Dizilere İlaveler

Aşağıdaki yöntemler dizi prototype nesnesine eklenmiştir:

• Array.prototype.indexOf
• Array.prototype.lastIndexOf
• Array.prototype.every
• Array.prototype.some
• Array.prototype.forEach
• Array.prototype.map
• Array.prototype.filter
• Array.prototype.reduce
• Array.prototype.reduceRight

Dmitry Soshnikov ES5 dizi "ilaveleri" adresinde bulunan hakkında detaylı bir makale yazdı.

Dmitry'nin makalesinde yer almayan tek şey Array.isArray. Görebileceğiniz gibi bu, prototype nesnesinin değil doğrudan Array kurucusunun üzerindedir. Array.isArray beklemediğiniz kadar tatlıdır — parametrenin [[Class]] dahili özelliği "Array" olup olmamasına göre true ya da false döndüren bir yöntemdir.

Array.isArray("NO U")
>> false

Array.isArray(["NO", "U"])
>> true

In ES3'te değerin bir dizi olup olmadığını belirlemenin tek güvenilir yolu "the Miller Device" kullanımıydı. Aşağıdaki örnekte dahili olan [[Class]] özelliğini dizininkiyle karşılaştırabilirsiniz.

Object.prototype.toString.apply(value) === '[object Array]'

Function.prototype.bind(thisArg [, arg1 [, arg2, …]])

Function.prototype.bind this değerithisArg parametresine bağlanan yeni bir fonksiyon nesnesi geri döndürür. Bu, temel olarak, diğer nesnenin bir faaliyet alanındayken bir fonksiyon çalıştırmanıza olarak sağlar.

function locate(){
  console.log(this.location);
}

function Maru(location){
  this.location = location;
}

var kitty = new Maru("cardboard box");

var locateMaru = locate.bind(kitty);

locateMaru();

Bu örnekte location fonksiyonunu Maru nesnesinin içeriğindeyken çağırıyoruz. locate global nesnenin bir özelliği olduğu için, onun this değeri global nesnedir(window). Bu durumda, bir kediye bakıyoruz, Location nesnesine değil. Öyleyse this değeri her zaman kitty olan locateMaruadında yeni bir yöntem oluşturabiliriz.

Ek Referanslar

• John Resig tarafından ECMAScript 5 Nesnesi ve Özellikleri
• Yehuda Katz tarafından JavaScript Fonksiyon Yürüymesini ve "this"i Kavrama
• Angus Croll tarafından JavaScript Katı Mod
• Detaylarda ECMA-262-5: Dmitry Soshnikov tarafından Giriş
• Juriy Zaytsev tarafından ECMAScript 5 uyumluluk tablosu

Çağlar Yeşilyurt

An enthusiastic about new web technologies.
Web Developer at Opera Turkey | http://www.operaturkiye.net
W3C Web Education Turkish Project Coordinator
Technical Blog | http://www.zettlina.com
Twitter @hcneerg

This article is licensed under a Creative Commons Attribution 3.0 Unported license.