Function scope & Block scope (Javascript)

https://www.stevethedev.com/storage/app/uploads/public/5aa/d54/a47/5aad54a47d2e0123286333.png

Bilindiği üzere ES6 yayınlanmasıyla birlikte aslında Javascript dünyasında günümüze kadar büyük gelişmeler oldu. Özellikle browserlerın yeni özellikler kazanması, NodeJS Foundation’ın doğması ile birlikte geleneksel javascript kodlama yaklaşımında da büyük değişiklikler oldu.

Bu değişikliklerden biri olan değişken tanımlama/bildirimi (variable decleration) konusunda bazı farklılıklar oluştu. Uzun süredir javascript kodlama yapanların da bildiği üzere kafa karışıklığına sebep olan, veya tam net anlaşılamayan bazı konularda — ki ilerleyen dönemlerde yazmayı da düşündüğüm “this” kavramı gibi — , değişkenlerin tanımlanması, farklı scope alanlarında gösterdiği davranışlar vs. zaman zaman çeşitli sorunlara yol açıyordu. Bu değişken tanımlanması ve scope kavramından kaynaklanan sorunlara çözüm için bazı gelişmeler oldu.

Çeşitli kod örnekleri ve anlatımlar ile var, let ve const keyword ile tanımlanan değişkenlerin aralarındaki farklara değineceğim.Öncelikle bazı kavramları tanımlamak gerekiyor.

Scope nedir?

Kapsam diye bahsedilir ancak kapsam da kasıt nedir, niye gereklidir?Tanımladığımız değişken, metot, obje vs görünürlük ve erişebilirlik durumlarını belirler. Bir değişkenin veya metodun başka kod blokları tarafından görünür olması, erişebilir olması, yazılım tasarımına göre değişkenlik gösterecektir elbette. İşte bu görünür olma veya erişebilir olma scope kavramı ile bahsedilir. Diğer dillerde olduğu gibi Javascript’te de bir scope kavramı vardır.

Global Scope

Tanımlanan tüm fonksiyon ve kod bloklarının dışında tanımlanan değişkenleri ifade eder. Bu değişkenler başka scope alanlarda kullanılabilir, değiştirilebilir.

global scope javascript

Local Scope

Fonksiyonlar içerisinde tanımlanan objeler,değişkenler için bu kavramı kullanabiliriz. Her fonksiyonun kendi local scope u bulunmaktadır.

Local scope da ikiye ayrılır. Function scope ve Block Scope.Block scope ES6 ile birlikte gelen bir özelliktir.

local scope javascript

Function Scope

Bir değişken bir fonksiyon içinde tanımlandıysa, bu değişken bu fonksiyon içinde görünür olur. Bu fonksiyon dışında erişebilirliği yoktur. var keyword function scope erişilebilirliği için değişken tanımlama için kullanılır.

function scope javascript

Block Scope

Block scope if, switch, for, while gibi scope alanları için söylenebilir. let ve const keyword, block scope larda değişken tanımlanmasına izin verir. Bu sayede bu tanımlanan değişken sadece bu alanlarda erişilebilir olur.

block scope javascript

Lexical Scope

Lexical scope kavramı da, bir scope (parent) içerisinde yer alan bir child scope un, bu parent scope da tanımlanan değişkenlere erişim yetkisi olması olarak tanımlanabilir.

lexical scope javascript

var — let — const farklılıkları

var

Eski tip veya genelsel değişken bildirimi yapma yoludur. Eskiden beri aslında çeşitli karmaşıklıklara veya hata durumlarına ki örnek vermek gerekirse tekrar atama yapılma, tekrar tanımlanabilme, kod blokları içerisinde değerinin değişmesinin kolayca gözden kaçması, bir döngü içerisinde overwrite edilmesi vb durumlar çeşitli hata durumlarına ve kafa karışıklıklarına sebep oluyordu.

var keyword javascript

var keyword javascript

let

let keyword ile birlikte bloklardan bahsedebiliriz. Blok dediğimiz kavram aslında { } süslü parantez içerisinde kalan kısımlardır. If blokları, döngüler vs bunlara birer örnektir. let ile birlikte aslında belirtilen bir objenin scope daki değeri veya scope da erişebilinir olup olmaması önem kazandı.

let keyword javascript

let keyword ile tanımlanmış bir değişkeni tekrar aynı isimle tanımlamaya çalıştığımızda hata verir. Update edebiliriz ancak tekrardan aynı isimde tanımlayamayız.

let javascript

Bir diğer örnek de ise let keyword ile bir değişken yaratılıp,daha sonradan bu değişkene değer atama ve değeri overwrite etme işlemi yapılıyor.

ley overwrite javascript

let keyword ile tanımlanan değişkenlerin scope içinde tanımlıysa scope dışında görünür/erişilebilir olmaması ile aşağıdaki örnekten görebilirsiniz.

let javascript

const

const değişkenler 1 kere tanımlanır, yeniden atama yapılamaz, kısaca sabit değişkenlerdir. Aynı isimde değişken yaratılması veya const ile belirtilen nesnenin değerinin değişmesi gibi durumların önüne geçmek için kullanışlıdır.

Bir const değişkene değer ataması yapıldıktan sonra yeniden değer ataması yapılamaz. Aynı zamanda bir const değişkene default bir değer ataması yapılması gerekmektedir.

const javascript

Bir const değişken tanımlayalım ve bu değişkene bir array ataması yapalım. Daha sonra bu array const değişkene push ile yeni bir eleman eklersek herhangi bir hata almayız.

const array javascript

const bir değişkeni başka bir değişkene atadığımızda ve bu değeri değiştirdiğimizde, herhangi bir hata almayız.

const assign javascript

Daha önce const ile tanımlanan değerlerin block scope olduğundan bahsetmiştik. Aşağıdaki örnekte de aynı isimle belirtilen const değişkenlerin scope içindeki aldığı değerleri gösteriyor.

const block scope javascript

Son olarak da const olarak belirtilen object lerin props ları ile alakalı bir örnek göstermek istiyorum.

const object javascript

Ancak aşağıda gösterilen kod bloklarında tekrar değer verme veya değişken bildirimi durumlarında hata verilecektir.

const object javascript

Umarım faydalı olabilmişimdir :)

İyi günler dilerim