03.03. Scope, let ve const

ES5’te ve daha öncesinde var değişkeni vardı. Var değişken tanımlama ifadesinde fonksiyon tabanlı bir scope kavramı vardır. Scope, değişkenin kullanılabileceği alanı belirler. ES6 ile birlikte let ve const kavramları gelmiştir. Bu kavramlar blok tabanlı bir scope kavramını işaret eder. Blok bir döngü, try, if, fonksiyon veya class ifadesi içindeki değişkenin farklı bir yerde kullanılmayacağı anlamına gelir. Basit örneklerle kavramları görelim.

Öncelikle değişken tanımlama ile başlayalım.

//ES5: var is function-based
for (var i = 0; i < 3; i++) {
    console.log(i);
}
console.log(i); //çıktı: 3

//ES6: let is block-scoped
for (let j = 0; j < 3; j++) {
    console.log(j)
}
//console.log(j) //ReferenceError: j is not defined

//ES5: var is function-based

for (var i = 0; i < 3; i++) {

console.log(i);

}

console.log(i); //çıktı: 3

//ES6: let is block-scoped

for (let j = 0; j < 3; j++) {

console.log(j)

}

//console.log(j) //ReferenceError: j is not defined

ES5, var i değişkeni döngü bittikten sonrada kullanılabilirken let sadece döngü içinde kullanılabilir. Bu özellik Javascript’in heap bölgesini daha etkin bir şekilde kullanmasını sağlar. Açılan her var değişkeninin bellekte büyük bir yer kaplama soruna karşı alınmış bir önlemdir.

Burada özellikle ES6 örneğini “;” kullanmadan yazdım. ; kullanmadığınızda sorun çıkmıyor, bende alışkanlık olduğu için genelde yazıyorum. Ancak, kullanmaya da bilirsiniz, tabii ki enter yaptığınız sürece bu geçerlidir. Aynı satıra birden fazla komut yazacaksanız, kullanmalısınız. (Python’da benzer bir kural var.)

Şimdi fonksiyon üzerinde konuya bakalım.

//ES5: var is function-based
function dongu_es5() {
    var m = 0
    for (m = 0; m < 3; m++) {
        console.log(m);
    }
}

dongu_es5();
//console.log(m); //ReferenceError: m is not defined

//ES5: var is function-based

function dongu_es5() {

var m = 0

for (m = 0; m < 3; m++) {

console.log(m);

}

dongu_es5();

//console.log(m); //ReferenceError: m is not defined

var değişkeni fonksiyon tabanlı bir scope sahiptir. Eğer fonksiyon içinde tanımlandıysa fonksiyon dışında kullanılamaz. “Reference Error” hatası üretir.

ES6 ile birlikte gelen bir diğer yenilik fonksiyonlar üzerinedir. Örneği verip üzerinden açıklayalım.

//  ES5 function and scopes
(function () {
    var foo = function () { return 1; }
    console.log(foo());
    (function () {
        var foo = function () { return 2; }
        console.log(foo());
    })();
    console.log(foo());
})();

// ES6 functions
{
    function foo () { return 1 }
    console.log(foo());
    {
        function foo () { return 2 }
        console.log(foo());
    }
    console.log(foo());
}

// ES5 function and scopes

(function () {

var foo = function () { return 1; }

console.log(foo());

(function () {

var foo = function () { return 2; }

console.log(foo());

})();

console.log(foo());

})();

// ES6 functions

{

function foo () { return 1 }

console.log(foo());

{

function foo () { return 2 }

console.log(foo());

}

console.log(foo());

}

ES5’te isimsiz bir fonksiyon “(function () …” şeklinde tanımlanır. Bu fonksiyonun içeriği direkt yorumlanır. Ayrıca isimsiz bir fonksiyon bir değişkene atılıp kullanılabilir. Scope açısından her fonksiyonun bölgesi birbirinden ayrıdır. Örneğin yukarıdaki örnekte foo değişkeni içinde fonksiyon saklanmakta ve dış fonksiyondaki foo ile iç fonksiyonda foo birbirinden farklı iki fonksiyonu ifade etmektedir. Burada her foo kendi bölgesindeki sonucu döndürür.

ES6 ile birlikte bir isimsiz fonksiyon “{” başlar ve “{…}” arasındaki bölümler o fonksiyonun bölgesini belirler. React Native kod yazarken çok kullanacağımız bir özelliktir.

Diğer bir değişken türü diğer programlama dillerindeki const ifadesidir. const değer ilk atama işleminde değeri alır ve bir daha değiştirilemez. let’e göre belleği daha etkin kullanır (değiştirme özelliği yok). Eğer değiştirilmeyecek bir değer ise kesinlikle const kullanmanızı öneririm. Aksi takdirde let kullanmanızı öneririm.

const deg = 1903;
console.log(deg);
//deg = 1 //TypeError: Assignment to constant variable.

const deg = 1903;

console.log(deg);

//deg = 1 //TypeError: Assignment to constant variable.

1903

1903

Bu örnekler, ES6 ile birlikte Javascript dünyası bellek bölgesini daha etkin kullanmayı amaçladığını göstermektedir.