ROYTO
Published in

ROYTO

Photo by Clay Banks on Unsplash

JavaScript’te Değişken, Scope ve Fonksiyon Kavramlarını Anlamak

Bu yazıda, JavaScript’te ki değişken (variable), bağlam (scope) ve fonksiyon (function) kavramlarını inceleyeceğiz.

programlama dili web uygulamaları geliştirmek, ve ’in yanı sıra web sayfalarına ek özellikler ekleyerek işlev kazandırmamızı sağlayan bir programlama dilidir. Eğer , ve hakkında daha fazla bilgi edinmek isterseniz, buradaki yazımı okumanızı öneririm.

Değişkenler (Variables)

Değişkenler, hangi programlama dilinde olursa olsun öğrenilmesi gereken en temel konular arasındadır. Değişkenleri bir defa öğrendikten sonra farklı programlama dillerinde ki kullanımlarına alışmak çok kolay olur.

Peki, bu değişkenler ne işe yarar?

Değişken tanımlamak temel olarak verilerinizi bilgisayarın belleğinde (RAM’de) saklamanızı sağlar. Siz yeni bir değişken oluşturduğunuz zaman RAM’de yeni değişkeninizin boyutu kadar bir yer ayrılır ve veriniz o yere kaydedilir. Fakat unutulmaması gereken nokta ise bilgisayarınızı kapatıp açtığınızda RAM’deki veriniz silinir. Bu yüzden değişkenler bilgisayar belleğinde geçici olarak dururlar. C gibi makine diline yakın programlama dillerinde değişkenleri saklayacağımız yerlere — belleğe doğrudan müdahale edebilirken daha gelişmiş programlama dillerinde (JavaScript, Python gibi) buna gerek kalmamıştır. Bu durumun getirdiği güzelliklerden bir tanesi ise bellekte yaşayabileceğiniz bug’ların önüne geçilmesini sağlamış olmasıdır. Dilerseniz değişkenleri birde JavaScript’in içerisinde inceleyelim;

JavaScript’in en son sürümüyle birlikte (bu yazı yazıldığında en son sürüm ES6) toplam 3 farklı değişken tanımlama yöntemimiz oldu. Bunlar; , ve

Değişken ön ekleri

Yukarıda bu üç farklı değişken tanımlama yöntemini görüyorsunuz. 'ler ise değişkenlerimizin isimleri. Yanlarındaki sayılar ise değişkenlerimizin değerleri. JavaScript üzerinde yazdığınız zaman ekrana 24 sayısını yazdıracaktır. Burada ekrana çıktı yazdıran bir fonksiyondur fakat şimdi bunu kafanıza takmayın, ileride fonksiyonları da açıklayacağım. Şimdi ise gelelim ve ’un kelime anlamlarına. Unutmayın, bazen bir şeyi ezberlemek yerine onun nedenini bilmek büyük bir sorunun çözümüne yardımcı olabilir ve aynı zamanda akılda daha kalıcı olur.

  • “Variable (Değişken)” kelimesinin kısaltılmış halidir.
  • let belirteci, günümüz İngilizce’sinden gelmektedir. Örneğin; “ deger2 is equal to 12” yani, “deger2 12'ye eşit olsun.”
  • const ise İngilizce’de “” yani sabit kelimesinden kısaltılmış halidir.

Bir değişkeni ile tanımladığımız zaman o değişkenin değerini daha sonra değiştiremiyoruz. Örneğin sayısı bir sabittir dolayısıyla yazdığınız programın ilerleyen bölümlerinde değiştirmeye gerek duymayacağımızdan dolayı değişkenimizi, “” olarak tanımlarsak doğru yapmış oluruz. Eğer değişkenine yeni bir değer atamaya kalkarsanız, değişkeni ile tanımladığınızdan dolayı hata alırsınız. Değişken tanımlamalarını doğru kullanırsanız şayet, bilgisayar belleğinizi de doğru kullanmış olursunuz.

Geri kalan diğer değişken tanımlama yöntemlerini Scope bölümü içerisinde anlatacağım. Çünkü temel olarak ve ’ın farkını anlatabilmek için Scope kavramını anlamak gerekiyor.

Bağlam (Scope)

Scope kavramını anlamak ve anlatmak bazen güç olabiliyor. Eğer program içerisinde scope ile ilgili problemleriniz varsa, büyük problemleriniz var demektir 😖 Bu yazıda scope’un derinlerine inmeyeceğiz bunun sebebi scope kavramının sandığınızdan daha derin bir konu olması. Ben size buz dağının biraz daha görünen kısımlarını anlatacağım.

Scope, değişkenlerinize nereden erişebileceğinizi belirleyen kurallar bütünüdür. Şimdi bunu size let ve var’ın farklılıklarını kullanarak açıklıyayım.

  • , block-scope bir değişken tanımlama yöntemidir. dediğimiz yapılar ise küme parantezlerinin arasında kalan yerdir. ile tanımlanan değişkenlerin değeri daha sonra değiştirilebilir fakat aynı değişkeni tekrar tanımlayamazsınız.
  • ise globally-scope bir değişken tanımlama yöntemidir. Değerini daha sonra değiştirebilir ve tekrar aynı değişkeni tanımlayabilirsiniz.
İç içe duran block yapıları

Şimdi basit bir JavaScript programı yazarak block-scope ve globally-scope kavramlarını daha iyi anlayalım;

Yukarı da let’in tekrardan tanımlanamayacağını söylemiştik fakat yukarıda ki koda bakarsanız hem fonksiyonun dışarısında hem de fonksiyonun içerisinde aynı değişkeni tekrar tanımlamışız buna rağmen herhangi bir hata almadan kodumuz çalışmış. Peki buna ne sebep oldu? Tabi ki Scope!

let ile tanımlanan değişkenleri tekrar tanımlanamayacağını söyledik fakat aynı zaman da let’in block-scope özellikte olduğunu da söyledik. Kodu dikkatli incelerseniz fonksiyonda küme parantezleri ({}) var. Dolayısıyla burada bir block yapısı vardır. Fonksiyon içerisinde let ile tanımladığınız değişkenin özelliğinin block-scope olması demek, değişkenin bağlamının aslında bulunduğu block’un içi olması demektir. Mevcut örneğimizi biraz daha geliştirelim;

Yukarıdaki kodu çalıştırdığımız zaman bize “SyntaxError: Identifier ‘hayvan’ has already been declared” hatasını verir. Bu hata bize adlı değişkenin daha önceden tanımlandığını bildirir. Bu hatanın nedeni ise aynı block içerisinde iki kere “” diyerek tanımlama yapmamızdan dolayıdır. Eğer aynı block içerisinde let’i kullanmadan yazsaydık kodumuz düzgün çalışırdı çünkü değer tanımlaması değil değer ataması yapmış olurduk.

Şimdi gelin yukarıda ki örneği biraz değiştirerek birde ’ın ne olduğuna bakalım;

Hatırlıyorsak eğer ile hem değişken tanımlamasını tekrar yapabiliyorduk hem de değer ataması yapabiliyorduk. Yukarıdaki kodda gördüğünüz üzere aynı fonksiyonun içerisinde iki kere ’ı kullanarak değişken tanımlaması yaptık ve hiçbir hata almadan kodumuz düzgün bir şekilde çalıştı.

ile değişken belirteçlerinin temel farkları böyleydi, şimdi ise Scope’ta değişkenlere erişim kurallarını inceleyelim;

Scope’ta Değişkenlere Erişim

veya ile tanımlanan değişkenler, block-scope olduğu için içeride ki block’ta tanımlanmış bir değişkene dışarıdan erişemiyoruz. Örneğin;

Yukarıdaki kodu çalıştırdığımızda “ReferenceError: sehir is not defined” yani isimli değişken tanımlanmadığı bildirir. Fakat dışarıda tanımladığımız bir değişkene içeriden erişmeye çalıştığımız zaman bunu başarıyla yapabiliriz;

Yukarıda ki kod başarıyla çalışır. için durum böyleyken yazının başında da belirttiğimiz üzere globally-scope’tur yani, ile tanımlanmış bir değişken block yapısının içerisindeyse bile ona dışarıdan erişebilirsiniz.

Yukarıdaki kod düzgün bir şekilde çalışır. Fakat burada önemli bir not düşmek gerekir. her ne kadarglobally-scope olsa dahi fonksiyonların içerisindeki r ile tanımlama yapılmış değişkenlere, fonksiyonun dışarısından erişemeyiz;

Yukarıda ki kodu çalıştırdığımızda “ReferenceError: sehir is not defined” hatasını verir. Fonksiyon içerisinde ile tanımlaması yapılmış değişkenlere dışarıdan erişemediğimiz için bazı kaynaklarda için function-scope’ta denilmektedir.

Bu yazıyı okuduğunuza göre JavaScript veya programlamada yeni olduğunuzu varsayarak scope’u giriş seviyesinde yeterince anlattığımı düşünüyorum. Hız kesmeden son olarak fonksiyonlardan bahsedelim.

Fonksiyonlar (Functions)

Fonksiyonların temel mantığı tekrar tekrar aynı kodu yazmak yerine o kodu bir yapının içerisine bir seferde yazıp yapıyı gereken yerde çağırmaktan geçiyor. Bu sayede yazılımcılıkta en tehlikeli şeylerden birisi olan kod tekrarından kurtulmuş oluyorsunuz. Ayrıca yazdığınız kod daha anlaşılır ve daha kısa oluyor.

Fonksiyonların lisede öğrendiğimiz fonksiyonlardan aslında hiçbir farkı yok. Hatırlarsanız lisede aldığımız temel matematik eğitiminde fonksiyonları olarak tanımlıyorduk ve yerine bir değer verip bir çıktı elde ediyorduk. JavaScript’te de aslında aynı mantık çalışıyor. Hemen bir örnek verelim;

JavaScript’te fonksiyon tanımlamak için ön ekini yazmak gerekir. Böylelikle JavaScript bizim bir fonksiyon yazdığımızı anlar. Daha sonra fonksiyon ismini yazarız ve parantezler içerisini parametre isimlerini yazarız. Yukarıda ki örnekte parametre isimleri ve'dir. Parametre isimleri demem sizi yanıltmasın aslında parametreler de birer değişkendir.

Bir fonksiyon sadece 2 parametre değil 2'den daha fazla parametre alabilir. Parametre sayısı size bağlıdır, isterseniz hiç parametre vermeyebilirsiniz. Bu durumda “ yazmanız yeterli olacaktır.

Yukarıda ki örnekte açıkça gördüğünüz üzere fonksiyonumuz aslında bir toplama işlemi yapıyor ve ’ı çağrıldığı yere götürüyor. toplam değişkenini çağrıldığı yere götürmesini sağlayan yapımız ’dür. Return kelimesinin İngilizce’deki karşılığı demektir. Şimdi buna bir örnek verelim;

En başta fonksiyonumuzu tanıttık, daha sonra isimli fonksiyonumuzu dışarıdaki bir değişkene parametre değerleri olacak şekilde atadık. Bu ne yaptı? Fonksiyon ilk olarak değerlerini kendi içinde topladı ve bunu fonksiyon içindeki toplam değişkenine atadı. Daha sonra da değişkenini yardımıyla döndürdü yani ’ı çağrıldığı yere geri götürdü. Bu sayede oldu. Bunu yazdırdığımızda bize çıktısını verdi. Return’ü anlamak yeni başlayan insanlar için oldukça kafa kurcalayıcı olabilir. Bu yüzden endişelenmeyin ve kendinize biraz zaman tanıyıp bol bol alıştırma yapın. Eğer ’ün mantığını biraz daha iyi anlamak isterseniz buradaki yazımı okuyabilirsiniz.

Son olarak bahsetmek istediğim şey ise return’ün kullanılmadığı senaryolar;

Yukarıda ’ü kullanmadık fakat dikkat ettiyseniz topla fonksiyonunu da herhangi bir değişkene atamadık. Eğer atasaydık hata alacaktık çünkü topla fonksiyonu herhangi bir değer döndürmüyor. Yani çağrılacağı yere herhangi bir değer götürmüyor olacaktı.

Yazımı noktalamadan önce bu yazıyı buraya kadar sıkılmadan okuduysanız size çok teşekkür ederim. Umarım bu yazı size değişkenler, scope ve fonksiyonlar hakkında edinmek istediğiniz bilgiyi vermiştir. 😃

--

--

Resmî Olmayan Yazılım Topluluğu, üniversite öğrencileri tarafından kurulmuş bir yazılım oluşumudur. Herkesin algoritmalar, yazılım dilleri ve benzeri konularda katkı sağlayabileceği ve kendine yeni vizyon katabileceği bir ortam oluşturmak temel odağımızdır.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store