İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

JavaScript Scope Nedir?

JavaScript Scope Nedir?
javascript-scope-nedir
+ - 0

JavaScript Scope Nedir? Yazılım geliştirirken değişkenlerden, objelerden, fonksiyonlardan yararlanırız ve kod içerisinde bunları belirli yerlerde çağırırız. Bu değişkenlerin ya da kod içerisindeki objelerin, fonksiyonların erişilebilirlik kapsamı vardır, bu kapsama scope adı verilir.

Scope diğer programlama dillerinde de bulunmaktadır. Javascript’te 2 tip temel scope bulunmaktadır. Bunlar Global Scope ve Local Scope. Başlıktaki scope kavramlarına birazdan bakacağız.

Global Scope

Program içerisinde fonksiyonların dışında tanımlanan ve her yerden erişilebilen scope tipidir. Global Scope’da tanımlı bir değişkene dosya içerisinde her yerden erişilebilir. Bu değişkenlere de global değişken adı verilir. Uygulama içerisinde çok fazla global değişken kullanımı önerilmez.

Çünkü local değişkenler işi bitince bellekten silinir ancak global değişkenler varlığını sürdürmeye devam eder. Bu durum da ileride memory(bellek) sorunlarına yol açabilir. O yüzden olabildiğince global değişken tanımlamaktan kaçınalım.

JavaScript Scope
globalDegisken, Global Scope’da tanımlıdır ve örnekteki gibi fonksiyon içinden de erişilebilir.

Local Scope

Değişken bir fonksiyon içerisinde tanımlanmışsa bunun kapsamına Local Scope adı verilir. Tanımlanan değişken de bir local değişkendir. Daha iyi anlamak için üstteki örneğimizi genişletelim.

scope nedir

Üstteki örnekte fonksiyon1 içinde tanımlanan değişken local bir değişkendir ve fonksiyon dışından erişilemez. Üstte çalışır bir örneği bulunmaktadır. Gelin şimdi fonksiyon dışında local değişkene erişmeye çalışsak ne olur onu görelim.

scope nedir

Fonksiyon dışında local değişkenimiz erişilebilir olmadığı için konsolda ReferenceError hatası aldık. Şimdi buraya kadar her şey normaldi. Peki bir if bloğu içerisinde değişkenimizi tanımlamış olsaydık if içerisinde bir local değişken gibi davranır mıydı?

Javascript’te ES6 öncesinde block scope olmadığı için local scope kavramı function scope kavramı ile neredeyse aynı sayılırdı. Ancak birazdan göreceğimiz let ve const tanımları ile block scope kavramı ortaya çıktı. Yani local scope tanımı konuyu anlamak için tek başına yeterli olmamakta.

Kullandığınız anahtar kelimeye göre değişkenlerin kapsamı değişiyor. var kullanırsanız function scope, let ya da const kullanırsanız block scope tabanlı oluyor.

Block scope: Süslü parantezler { } arasında tanımlı olan scopedur. Bu bir if bloğu, for, while ya da herhangi bir keyword kullanmadan { } da olabilir.

scope nedir

If bloğu oluşturduk ve yeni bir değişken tanımladık. Beklentimiz diğer dillerde olduğu gibi yeniDegisken adındaki değişkenimizin yalnızca if bloğu içerisinde erişilebilir olması.

Ancak ‘var’ ile oluşturulan değişkenler bu şekilde davranmıyor. Javascript’in uzun yıllardır kullanılan standart versiyonunda(ES5) değişkenler function scope tabanlı. Yani tanımlı olduğu fonksiyonda geçerli. If ya da for içerisinde değişkenler kendi yeni bir scope oluşturmuyor.

Tanımlı olduğu fonksiyon içerisinde her yerde erişilebilir oluyorlar. O zaman şunu diyebiliriz ki ES5’de var ile tanımlı değişkenler function scope tabanlıdır. Bu durum ECMAScript 6 ile değişmiştir. ECMAScript bir script dili standartıdır ve Javascript’in standartlarını da belirler. ES6 beraberinde birçok yeni özellik ile gelmiştir. Birçok Javascript geliştiricisi de dilin yeni standartında gelen değişiklikleri kullanmaya başlamıştır. Ancak şöyle bir sorun var ki, ES5 standartını hemen hemen tüm tarayıcılar desteklerken, ES6 henüz tam desteklenmemektedir. Bu sebeple Babel gibi ES6 kodunu ES5’e çeviren transpilerlar çıkmıştır. ES6 ile gelen birçok özellikten birisi de “let” ve “const” kavramlarıdır. Bu yeni keyword, var tanımlamasına alternatiftir ve üstteki sorunu çözmüştür.

ES5’de var function scope tabanlı olduğu için bir takım güvenlik sorunlarına ve okunabilirlik sorunlarına sebep oluyordu. let ve const kullanımı ile bu çözüldü. Şimdi bir örneğini görelim.

let: ES6 ile gelen var alternatifidir ve block scope tabanlıdır.

const: ES6 ile gelen ve daha önce olmayan, ES5’de yazımı için biraz uğraştıran bir değişkendir. Adından da anlaşılabileceği gibi, sabit(constant) yani tanımlandıktan sonra değeri değiştirilemez ya da yeniden aynı isimle tanımlanamaz.

scope nedir
let ile block scope örneği

Üstteki örnekte tanımladığımız yeni değişkene block scope dışarısından erişilemediğini gördük. Tüm bunları birkaç cümle ile toparlayalım.

“var” function scope tabanlıdır. Tanımlı olduğu fonksiyon onun erişilebilirlik kapsamıdır.

“let” ve “const” block scope tabanlıdır. Ona en yakın süslü parantezler { } arasında erişilebilirdir.

Function scope bulunduğu fonksiyon içerisinde geçerlidir.

Block scope bulunduğu süslü parantezler(brackets) { } içerisinde geçerlidir.

Yazı Kaynakları
Tuğrul Bayrak'a yazı için teşekkür ederiz.

Yazar Hakkında

Bu Yazıyı Yorumla