JavaScript Değişken Tanımlama ve Veri Tipleri

İçindekiler

Değişken Nedir?

JavaScript’te Değişkenler ve Veri Türleri kavramını açıklamadan önce değişkene neden ihtiyaç duyulduğunu açıklayalım. Bir script, işini yapmak için ihtiyaç duyduğu verileri geçici olarak saklamak zorundadır. Bu veriler değişkenlerde saklanabilir. Verileri saklamak için kullandığımız değişkenler bellek ünitesinin çeşitli alanlarında tutulmaktadır. İstenildiği zaman buradan çağrılarak kullanılır.

Değişken Tanımlama Kuralları

Değişken tanımlarken bazı kullanımlara dikkat etmek gerekir. Bu kullanımlardan bazıları dil için zorunlu bazıları da programlama mantığı açısından zorunluluk içermektedir. Değişkenlerinizi tanımlarken aşağıdaki kurallara dikkat etmeniz önemlidir.

Kural 1: Değişken isimleri mantıklı kelime(ler) içermelidir.

Örn: İçinde sayı tutulacak bir değişken için s1 yerine sayi1 kullanılması daha uygun olacaktır.

Kural 2: Programlama dili tarafından rezerve edilmiş kelimeler kullanılaz.

Örn: if,else, var,for, undefined vs.

Kural 3: Değişken isimleri sayı ile başlayamaz ama içinde yada sonunda sayı kullanılabilir.

Örn: 1sayi yerine sayi1 kullanılmalıdır.

Kural 4: Değiken isimleri İngilizce dilindeki karakterleri içermelidir. Ayrıca _ ve $ sembolleri de kullanılabilir.

Örn: yaş yerine yas kullanılmalıdır. +isim şeklinde bir değişken tanımlaması yapılamaz.

Kural 5: Zorunlu olmasa da birden fazla kelimeden oluşan değişken isimlerinde Camel Case, Pascal Case yada Snake Case kullanılmadır.

Örn:

Camel Case: İlk kelimenin ilk harfi küçük diğer kelimelerin ilk harfi büyük olarak yazılır. ( ogrenciAd, mezuniyetDurum)

Pascal Case: Her kelimenin ilk harfi büyük olarak yazılır. (OgrenciAd, MezuniyetDurum)

Snake Case: her kelimenin arasına _ işareti yazılır. (ogrenci_ad, mezuniyet_durum)

JavaScript Değişken Tanımlama

JavaScript yazarken, derleyiciye her bir adımı gerçekleştirmek istediğinizi söylemelisiniz. Bu bazen beklediğinizden daha fazla ayrıntı içerir.

Bir duvarın alanını hesaplamayı düşünün; matematikte bir dikdörtgen alanı iki sayı ile çarpılarak elde edilir:

genislik x yukseklik = alan

Bu hesaplamada kafanızdaki gibi hesaplamalar yapabilirsiniz, bu hesaplamayı yapmak için bir senaryo yazarken, bilgisayara çok ayrıntılı talimatlar vermeniz gerekir. Sırayla aşağıdaki dört adımı gerçekleştirmesini söyleyebilirsin:

Genişlik değerini tutsun.
Yükseklik değerini tutsun.
Alanı bulmak için genişliği yükseklik ile çarpın
Sonucu kullanıcıya döndürsün

Bu durumda, genişlik ve yükseklik değerlerini “hatırlamak” için değişkenler kullanırsınız. (Bu ayrıca bir betiğin (bilgisayarın tam olarak ne yapmak istediğine dair çok açık yönergeler içerir) nasıl göründüğünü gösterir. Değişkenleri kısa süreli belleğe kaydedilir, çünkü sayfayı terk ettiğinizde, tarayıcı tuttuğu bilgileri unutacaktır.

Bir değişken, bu değişkenin iyi bir adıdır çünkü bir değişkende saklanan veriler, bir komut dosyasının her çalıştırılışında değişebilir (veya değişebilir).

Herhangi bir duvarın boyutları ne olursa olsun, o duvarın genişliğini yüksekliğiyle çarparak alanını bulabileceğinizi biliyorsunuz. Benzer şekilde, komut dosyaları genellikle farklı verilerle çalıştırıldıklarında bile aynı hedefe ulaşmaları gerekir. Bu nedenle değişkenler kodlarınızdaki değişime neden olabilecek değerleri temsil etmek için kullanılabilir. Sonuç değişkenlerde saklanan veriler kullanılarak hesaplandığı veya hesaplandığı söylenir.

JavaScriptte Değişken Tanımlama

JavaScript’te değişkenler var, let ve const anahtar kelimeleri ile tanımlanır. var anahtar kelimesi javascriptin ilk yıllarından beri kullanılmasına rağmen let ve const ES6 ile javascripte dahil oldu. Aşağıda bu üç kavramı da örnekler açıklayacağız.

JavaScript ile değişken tanımlarken bilinmesi gereken bazı temel kurallar var.

Değişken kullanılmadan önce tanımlanmış olması gerekir.
Bir değişken bir kapsam içinde tanımlanmış ise sadece o kapsam içinde kullanılabilir. Tanımlandığı aralıkta kullanılabilir.
Bir değişken tanımlayıcı kullanılmadan değer atanmış ise bu değişken global olarak tanımlanır ve her yerden ulaşılabilir.

Kural:


var degisken;

var degisken1="deneme";

var degisken2, degisken3, &nbsp;degisken4=15;

var degisken;

var degisken1="deneme";

var degisken2, degisken3,  degisken4=15;

JavaScript Değişken Tanımlama Kuralları

Değişken isimleri büyük-küçük harf duyarlıdır. Yani ad ile AD aynı değişkeni göstermez.
Değişken isimlerinde Türkçeye özgü karakterler kullanılmamalıdır.
Değişken isimleri ?,!,:,%,- gibi özel karakterler içeremez.(_ karakteri hariç)
Değişken ismi olarak JavaScript dilindeki özel kelimeler seçilemez.
Değişken isimlerinde zorunlu olmamasına karşın küçük harf kullanımı tercih edilir. Eğer değişken ismi iki ya da daha fazla kelimeden oluşuyorsa ilk kelime hariç diğer kelimelerin ilk harfi büyük yazılır. (sayi, maasMiktari, kitapSayisi v.b.)
Değişken isimleri sayı ile başlayamaz.

var Kullanımı

İlk olarak var anahtar kelimesini açıklayarak başlayalım.

Javascript dilinin genel kapsam yada fonksiyon kapsamı için uygulamanın her yerinde ulaşılabilecek değişkenler tanımlamak için var anahtar kelimesi kullanılır.
Değer tanımlaması yapılmadan kullanılırsa “undefined” döndürür.
Tanımlanan değişken tekrardan tanımlanabilir.

Örnek 1: Basit Kullanım


        var sayi=5;
        var x, y=8, z; 
        var  aktif = true; 
        var ondalikli= 5.4; 
        var deger="merhaba";

var sayi=5;

var x, y=8, z;

var aktif = true;

var ondalikli= 5.4;

var deger="merhaba";

Örnek 2: Tekrar Tanımlama


        var isim = "Hayri"
        
        var isim ="Ahmet"
        
        console.log(isim)

var isim = "Hayri"

var isim ="Ahmet"

console.log(isim)

Örnek 3: Değer ataması yapılmadan yada tanımlamadan önce kullanıldığında undefined döndürür.


        console.log(isim) //undefined
        
        var isim = "Hayri"
        
        console.log(isim) //Hayri

console.log(isim) //undefined

var isim = "Hayri"

console.log(isim) //Hayri

let kullanımı

let anahtar kelimesi var kelimesinin biraz daha özelleştirilmiş halidir.

var fonksiyon kapsamı alanı içinde kullanılırken let blok kapsamı alanında tanımlanmaktadır.
Tanımlandıktan sonra tekrar tanımlanmaya çalışıldığında hata vermektedir.
Tanımlama yapılmadan önce kullanılamaz. var anahtar kelimesinde undefined veriyordu.

Örnekler:

Örnek 1: Basit kullanım


        let isim = "Hayri"

        console.log(isim)

let isim = "Hayri"

console.log(isim)

Örnek 2: Tanımlanmadan önce kullanılamaz


        console.log(isim)//Cannot access 'isim' before initialization
        
        let isim = "Hayri"

console.log(isim)//Cannot access 'isim' before initialization

let isim = "Hayri"

Örnek 3: Blok kapsamı içinde tanımlanan değişken ile blok kapsamı dışında tanımlanan değişkenler let ile bir birinden ayrılabilir. Aşağıdaki örnekte dışarıdaki isim ile blok içindeki isim değişkenleri aynı değişkenler değildir.


        let isim = "Hayri"
        function deneme(){
            let isim = "Ahmet"
            console.log(isim) //Ahmet
        }
        deneme()

        console.log(isim) //Hayri

let isim = "Hayri"

function deneme(){

let isim = "Ahmet"

console.log(isim) //Ahmet

}

deneme()

console.log(isim) //Hayri

const kullanımı

const anahtar bir değişkene değer atandığında değiştirilemez(sabit tanıması). const ilk değerini aldıktan sonra bellekten silinene kadar bu değeri tutar. Kalan tüm özellikler let ile aynıdır.

Örnek 1:


       const pi = 3.14

       console.log(pi)

const pi = 3.14

console.log(pi)

Örnek 2: Tanımlandıktan sonra değiştirilemez.


       const pi = 3.14

       pi = 3 //ssignment to constant variable.

       console.log(pi)

const pi = 3.14

pi = 3 //ssignment to constant variable.

console.log(pi)

JavaScriptte Kullanılan Veri Tipleri

JavaScriptte 6 temel veri tipi vardır. JavaScript değişken tanımlama yapıldığında bu tiplerden biri olarak değişken tanımlanmış olur.

Boolean: Mantıksal varlığı ifade eder. İki tip değer içerebilir true ve false
Null: Tam olarak null değerini taşıyan veri türüdür.
Undefined: Değişken tanımlanmış ama değer atanmamış ise değişken içindeki değer undefined dir
Number: EcmaScript standartlarına göre 64bit işaretli tek sayı tipi vardır. Tam yada ondalıklı sayılar number tipi ile ifade edilmektedir. Ek olarak +Infinity, -Infinity, and NaN (not-a-number) olmak üzere 3 tane özel sembolik değer vardır.
String: JavaScript dizge üzerinde metinsel verileri temsil etmek için kullandığı veri tipidir. Dizgedeki her öğe 16 bitlik işaretsiz integer bir referansı vardır. Dizgedeki ilk elemanın index numarası 0 dır. Dizgedeki diğer değerler için index numarası 1 artarak devam eder. Özetle: Metinsel bir ifade karakterlerden oluşan bir dizi olarak nitelendirilir.
Symbol ( ECMAScript 6): EcmaScript 6 standartı ile tanımlanmış bir tipdir. Nesne değeri için benzersiz ve sabit bir değeri ifade eder.
Object: Bellekteki belirli bir nesnenin referansını(yolunu) tutmak için kullanılan tiptir. Dizi, Fonksiyon ve Nesneler bu tip ile ifade edilir.

Sayısal Veri Kaydetmek İçin Değişken Kullanımı

Aşağıdaki örnekte üç değişken oluşturulur ve bunlara değerler atanır.
fiyat, bir ürün fiyatı tutar.
miktar, müşterinin istediği ürün sayısını tutar
toplam, müşterinin aldığı ürünlerin toplam tutarını tutar.

Sayıların tırnak işaretleri içinde yazılmadığını unutmayın. Bir değişkene bir değer atandığında, bu değeri göstermek için değişken adını kullanabilirsiniz.

Aşağıdaki kodları HTML dosyası açıp içine yapıştırın.


<html>
    <head>
        <meta charset="utf-8">
        <title>www.tasarimkodlama.com</title>
    </head>
   <body>
       <div id="icerik"> 
           <h2>Ürün Fiyat Hesapla</h2> 
            <div id="ucret">Cost: $5 per tile</div> 
       </div>
       
       <script>
       
        let fiyat,adet,tutar; 

        fiyat = 5; 
        adet = 14; 

        tutar=fiyat * adet;
        const el=document.getElementById('ucret');
        el.textContent = tutar+' ₺' ;
           
       </script>
   </body>
</html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

</head>

<body>

<h2>Ürün Fiyat Hesapla</h2>

</div>

let fiyat,adet,tutar;

fiyat = 5;

adet = 14;

tutar=fiyat * adet;

const el=document.getElementById('ucret');

el.textContent = tutar+' ₺' ;

</script>

</body>

</html>

Metinsel Verileri Kaydetmek İçin Değişken Kullanımı

Şimdilik, <script> etiketi içindeki ilk dört JavaScript satırına konsantre olun. İki değişken bildirilir (kullanıcı adı ve mesaj) ve metinsel verileri tutmak için kullanılır
Sayfadaki HTML nesnelerine müdahale eden kod sonraki satırlarda gösterilmiştir. Bu ifadelerin kullanımı ilerleyen yazılarda gösterilecektir.
Burada önemli olan dizenin(metinsel ifade) tırnak işaretleri içine nasıl yerleştirildiğini not edin. Tırnaklar tek veya çift tırnak olabilir, ancak eşleşmelidir. Tek bir alıntıyla başlarsanız, tek bir alıntıyla sona ermeli yada çift tırnaklı bir alıntı ile başlarsanız, bir çift alıntıyla sona ermelidir.

Ayrıca \ “slash” sembolü ile tek ve çift tırnakları dize içinde kullanbilirsiniz. Aşağıdaki örnekte ikinci metinsel değişkende href ile kullanılan tırnaklar metinsel olması sağlanmıştır. Unutmanız gereken bir nokta da HTML ifadeleri javaScript için metinsel bir ifadedir(DOM ile oluşturma hariç).


<html>
    <head>
        <meta charset="utf-8">
        <title>www.tasarimkodlama.com</title>
    </head>
   <body>
      <hl>Tasarım Kodlama</hl> 
       <div id="icerik"> 
           <div id="baslik">Programalam Eğitimi</div> 
           <div id="mesaj">Mesaj burada</div> 
       </div>
       
   <script>
       let baslik; 
       let mesaj; 
       title= "Tasarım Kodlama ile JavaScript Eğitimi"; 
       message = '<a href=\"https://www.tasarimkodlama.com\">Daha fazla eğitim için tıklayın</a>' ; 

       const elBaslik = document.getElementById('baslik') ; 
       elBaslik.innerHTML =title; 
       const elMesaj = document.getElementById ('mesaj') ; 
       elMesaj.innerHTML =message; 

   </script>
   </body>
</html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

</head>

<body>

<hl>Tasarım Kodlama</hl>

<div id="baslik">Programalam Eğitimi</div>

<div id="mesaj">Mesaj burada</div>

</div>

let baslik;

let mesaj;

title= "Tasarım Kodlama ile JavaScript Eğitimi";

message = '<a href=\"https://www.tasarimkodlama.com\">Daha fazla eğitim için tıklayın</a>' ;

const elBaslik = document.getElementById('baslik') ;

elBaslik.innerHTML =title;

const elMesaj = document.getElementById ('mesaj') ;

elMesaj.innerHTML =message;

</script>

</body>

</html>

Mantıksal Verileri Kaydetmek İçin Değişken Kullanımı

Bir Boolean değişkeni yalnızca true veya false değerine sahip olabilir, sadece iki değer tutmasına rağmen programlamanın temel değişkenlerinden biridir.

Kullanıcının okuyacağı sayfada false veya true kelimeleri çok nadiren yazdırır. Boolean değişkenler iki durumu karşılaştırmak ve bunun sonucunda programı istenilen şekilde dallandırmak için kullanılır.

Aşağıdaki örnekte, true veya false değerleri, HTML öğelerinin class özniteliklerinde kullanılmıştır. Burada ürünün stokta olup olmaması durumu değerlendirilmiş ve stokta olan nesneler için true, olmayan nesneler için false değerleri class nesnesi olarak kullanılmıştır. Daha farklı kullanımlar için site içindeki javascript örneklerine bakabilirsiniz.


<html>
    <head>
        <meta charset="utf-8">
        <title>www.tasarimkodlama.com</title>
        <style>
            .mesaj{
                font-size: 22px;
            }
            
            .mesaj .true{
                color: green;
                font-weight: bold;
            }
            
            .mesaj .false{
                color: red;
                font-weight: bold;
            }

        </style>
    </head>
   <body>
      <h1>Ürün</h1>
       <div id="content"> 
           <div class="mesaj">Masa: <span id="urun1">100</span></div>
           <div class="mesaj">Sehpa: <span id="urun2">0</span></div>
       </div> 
       
   <script>
       var mevcut; 
       var mevcutDegil; 
       mevcut = true; 
       mevcutDegil= false; 
       var urun1 = document.getElementById('urun1'); 
       urun1.className = mevcut; 
       var urun2 = document.getElementById('urun2'); 
       urun2.className =mevcutDegil; 

   </script>
   </body>
</html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

<style>

.mesaj{

font-size: 22px;

}

.mesaj .true{

color: green;

font-weight: bold;

}

.mesaj .false{

color: red;

font-weight: bold;

}

</style>

</head>

<body>

<div class="mesaj">Sehpa: <span id="urun2">0</span></div>

</div>

var mevcut;

var mevcutDegil;

mevcut = true;

mevcutDegil= false;

var urun1 = document.getElementById('urun1');

urun1.className = mevcut;

var urun2 = document.getElementById('urun2');

urun2.className =mevcutDegil;

</script>

</body>

</html>

Çıktı:

Nesneleri Tutmak için Object Veri Tipi Kullanımı

Object referans veri tipi yukarıdaki ilkel veri tiplerinden farklı olarak birden fazla ilkel türü bir arada tutan veri tipleridir. Buradaki ilk olarak Nesne oluşturmak için Object veri tipini kullanacağız.

JavaScriptte Nesne oluşturmak için {} sembolleri kullanılır. Bu semboller arasına anahtar değer çiftleri tanımlanarak veriler kaydedilir.

Sözdizimi:


    const nesne = {
        anahtar:"deger",
        anahtar2:"deger2",
        ....
    }

const nesne = {

anahtar:"deger",

anahtar2:"deger2",

....

}

Basit bir personel nesnesi oluşturalım. Personelin ad, soyaad, maaş, evlilik durumu gibi bilgileri tutuluyor olsun. Bunun için gerekli olan nesne şu şekilde olacaktır.


    const personel = {
        ad:"Hayri",
        soyad:"KOÇ",
        maas:8_500,
        evliMi:false
    }
 
    console.log(personel)
    console.log(typeof personel)

const personel = {

ad:"Hayri",

soyad:"KOÇ",

maas:8_500,

evliMi:false

}

console.log(personel)

console.log(typeof personel)

Çıktı:

Dizi Tutmak için Object Veri Tipini Kullanma

Bir başka nesne türü de dizilerdir. JavaScriptte aynı yada farklı türde veriyi bir değişkende tutmak için diziler kullanılabilir. Diziler ile daha detaylı bilgi için JavaScriptte Diziler konusuna bakabilirsiniz.

JavaScriptte dizi tanımlamak için [] sembolleri içinde dizi değerleri yazılır. Dizilerde dizilerin kendisi dahil her bütün tiplerde verileri tutulabilir.

Sözdizimi:


dizi = [dege1,deger2,....]

dizi = [dege1,deger2,....]

Örnek: Basit bir şekilde bir kaç takımın adını tutan bir dizi tanımlaması yapalım.


    const takimlar = ["GS","BJK","BS","GB"]
 
    console.log(takimlar)
    console.log(typeof takimlar)

const takimlar = ["GS","BJK","BS","GB"]

console.log(takimlar)

console.log(typeof takimlar)

Çıktı:

Fonksiyonları tutmak için de Değişkenleri Kullanma

Değişken yada sabitler fonksiyon oluşturmak için kullanıabilir. Aşağıdaki örnekte selamla adında bir değişken oluşturulup ekrana selam yazdıran fonksiyon ataması yapılmıştır.

Örnek:


    var selamla = function(){
        console.log("Selam")
    }

    selamla()
    
    console.log(selamla)
    console.log(typeof selamla)

var selamla = function(){

console.log("Selam")

}

selamla()

console.log(selamla)

console.log(typeof selamla)

JavaScript Değişken Tanımlama ve Veri Tipleri

Değişken Nedir?

Değişken Tanımlama Kuralları

JavaScript Değişken Tanımlama

JavaScriptte Değişken Tanımlama

JavaScript Değişken Tanımlama Kuralları

var Kullanımı

let kullanımı

const kullanımı

JavaScriptte Kullanılan Veri Tipleri

Sayısal Veri Kaydetmek İçin Değişken Kullanımı

Metinsel Verileri Kaydetmek İçin Değişken Kullanımı

Mantıksal Verileri Kaydetmek İçin Değişken Kullanımı

Nesneleri Tutmak için Object Veri Tipi Kullanımı

Dizi Tutmak için Object Veri Tipini Kullanma

Fonksiyonları tutmak için de Değişkenleri Kullanma

1 Yorum

İptal Et

Değişken Nedir?

Değişken Tanımlama Kuralları

JavaScript Değişken Tanımlama

JavaScriptte Değişken Tanımlama

JavaScript Değişken Tanımlama Kuralları

var Kullanımı

let kullanımı

const kullanımı

JavaScriptte Kullanılan Veri Tipleri

Sayısal Veri Kaydetmek İçin Değişken Kullanımı

Metinsel Verileri Kaydetmek İçin Değişken Kullanımı

Mantıksal Verileri Kaydetmek İçin Değişken Kullanımı

Nesneleri Tutmak için Object Veri Tipi Kullanımı

Dizi Tutmak için Object Veri Tipini Kullanma

Fonksiyonları tutmak için de Değişkenleri Kullanma

Bunları da beğenebilirsiniz

1 Yorum