javaScript Var, Let ve Const
ES6'da, değişkeni tanımlamanın yeni bir yolu const ve let keyword'leri . ES6'dan önce, geliştiriciler farklı değişkenleri bildirmek için var kullanırdı. Ancak, javascript kod blogunda olası sorunlara veya örtülü hatalara neden olabilir. Bu yazıda const
, let
ve var
keywordlerini karşılaştırma yapalım.
Keyword | Var | Let | Const |
---|---|---|---|
Global Scope | Yes | Yes | Yes |
Function Scope | Yes | Yes | Yes |
Blok Scope | No | Yes | Yes |
Yeniden Atanabilir | Yes | Yes | No |
ES2015'ten önce JavaScript'in yalnızca iki scope(kapsamı) vardı: Global Kapsam ve fonksiyon Kapsamı. ES6 ile local Scope geldi.
Scope: Değişkeni tanımladığınız bölgeye göre isimlendirilir ve değişken de o bölgenin ismiyle anılır.
Global Scope: Bir fonksiyon ve blok dışında bildirilen JavaScript kodun herhangi bir yerindede tanımlanan değişken GLOBAL olur.
Local Scope: Bir fonksiyon içerisinde tanımlanan değişkenlerdir Local(yerel) değişkenlerdir. Dışarıdan bu değişkenlere erişemezsiniz.
Blok Scope: Block scope her türlü { } süslü parantez arasında olan kısma denir. if-for deyimleri gibi.
Global Kapsam
Global olarak ilan edilen değişkenler (herhangi bir fonksiyonun dışında) Global Scope'a sahiptir.
var carName = "Fiat Egea";
//burada carName kod kullanabilirsiniz
console.log(carName);
function myFunction() {
// Buradaki carName kod kullanabilir
console.log("fonksiyondaki..:",carName);
}
myFunction();
Genel değişkenlere bir JavaScript programındaki herhangi bir yerinden erişilebilir.
Fonksiyon Kapsamı
Local(Yerel) olarak bildirilen değişkenler (Fonksiyon içinde) Fonksiyon Kapsamına sahiptir.
// burada carName kod kullanılamaz
function myFunction() {
var carName = "Fiat Egea";
// burada carName kod kullanabilir
}
//burada carName kod kullanılamaz
Local(Yerel) değişkenlere, yalnızca bildirildikleri fonksiyon içinden erişilebilir.
JavaScript Blok Kapsamı
Var
anahtar sözcüğüyle bildirilen değişkenler , Blok Kapsamına sahip olamaz .
Bir { } blokda bildirilen değişkenlere bloğun dışından erişilebilir.
if(true){
var x = 2;
}
// x kod burada kullanılır
console.log(x);
ES2015'ten önce JavaScript'in Blok Kapsamı yoktu .
Let anahtar kelimesi ile bildirilen değişkenler Blok Kapsamına sahip olabilir.
Bir { } bloğunda bildirilen değişkenlere bloğun dışından erişilemiyor:
if(true){
let x = 2;
}
//x kod burada kullanılamaz
Değişkenlerin Yeniden Yazılması
Var anahtar sözcüğünü kullanarak bir değişkeni yeniden yazmak, sorunlara neden olabilir.
Bir bloğun içindeki bir değişkeni yeniden değiştirmek, ayrıca bloğun dışında değişken yazdırılırsa yeni değer yazılır.
var x = 10;
// Burada x değeri 10
if(true){
var x = 2;
// Burada x değeri 2
}
// Burada x değeri 2
Let anahtar sözcüğünü kullanarak bir değişkeni tekrarlayarak Değiştiremezsiniz.
Bir bloğun içindeki bir değişkeni tekrar tanımlamak, bloğun dışındaki değişkenin değerini değiştirmeyecektir.
var x = 10;
// Burada x değeri 10
if(true){
let x = 2;
// Burada x değeri 2
}
// Burada x değeri 10
Döngü Kapsamı
var i = 5;
for (var i = 0; i < 10; i++) {
// kodlar
}
console.log(i);//10
Yukarıdaki örnekte görüldüğü üzere çıktı:10 olur Döngüde i değişkeni i=10 olur ve blok dışındada var
ile tanımlanan değişken enson döngü içinde belirtildiği için yeni değeri döngüde ki değeri alır.
Örneğimizde bu sefer Değişkeni let
ile tanımlarsak:
let i = 5;
for (let i = 0; i < 10; i++) {
// Kodlar
}
console.log(i);//5
Döngüde blok scope'de i değişkeni geçerlidir global scope'de i=5 olduğu için consola 5 yazdı.
Fonksiyon Kapsamı
Var
ve let
keyword'ler fonksiyon scope'da aynı özelliklere sahiptir. Her ikiside fonksiyon scope'a sahiptir, fonksiyon dışında geçerli değillerdir.
function myFunction() {
var carName = "Fiat Egea"; // Function Scope
}
function myFunction() {
let carName = "Fiat Egea"; // Function Scope
}
Global Kapsam
Var
, let
ve const
ile bildirilen değişkenler , blok dışında bildirildiğinde oldukça benzerdir. Her üçünün'de Global Kapsamı olacaktır.
var x = 2; // Global scope
let x = 2; // Global scope
const X = 2; // Global scope
Global Nesne
JavaScript’in global nesnesi web tarayıcılarında window
nesnesidir.
Var
anahtar sözcüğü ile tanımlanan genel değişkenler , global window
nesnesine aittir. window nesnesinin özellikle hız ile sorunları bulunmakta.
Genel nesnenin tüm özellikleri genel değişkenlerdir. Genel kapsamda, aşağıdaki bildirimler bu tür özellikler oluşturur:
- var bildirimi
- Function bildirimi
Ancak şimdi global nesnenin özellikleri olmayan global değişkenler de var. Global kapsamda, aşağıdaki bildirimler böyle değişkenler oluşturur.
- let bildirimi
- const bildirimi
- Class bildirimi
ÖRNEK:
var sayi = 50;
console.log(window.sayi) // 50
let sayi = 50;
console.log(window.sayi) //undefined
Yükselme
Javascript’in tuhaflıklarından biri, değişkenleri ve fonksiyonları, ilan edilmeden önce bile kullanabilmenizdir. Buna hoisting(Yükselme) denir. Yükseltme, bir bildirimi geçerli komut dosyasının veya geçerli fonksiyonun en üstüne taşıyan JavaScript'in varsayılan davranışıdır. Değişken bir fonksiyonda tanımlanırsa, bildirim fonksiyon içindeki en üst düzeye çıkarılır ve fonksiyon dışında tanımlanırsa, bildirim genel bağlamın üst düzeyine çıkarılır.
Var
ile tanımlanan değişkenler en üste Yükseltilir. ( Js hoisting )
Bir değişkeni bildirilmeden önce kullanabilirsiniz:
merhaba();
function merhaba() {
console.log('merhaba');
}
Fonksiyon çalışır consola "merhaba" yazdırır. Başka bir örnek:
ders = 'javaScript';
console.log(ders); //javascript
var ders;
Let
ile tanımlanan değişkenler en üste Yükseltilemez.
Bildirilmeden önce bir let
değişkeni kullanılması ReferenceError ile sonuçlanacaktır.
Geçici Ölü Bölge :Tanımlamadan önce değişkene erişemezsiniz.
ders = 'javaScript';
console.log(ders); //ReferenceError:
let ders;
Yeniden Beyan Etme
Bir programın herhangi bir yerinde Var
değişkeniyle bir JavaScript değişkenini yeniden belirtmek mümkündür :
var x = 2;
// X'in değeri 2
var x = 3;
// şimdi x = 3
console.log(x); //3
javaSript'de yeniden tanımlama işlemi Var
ve let
değişkeni, aynı kapsamda, ya da aynı blokta, izin verilmez:
var x = 2; // İzin verildi
let x = 3; // İzin verilmez
{
var x = 4; // İzin verildi
let x = 5 // İzin verilmez
}
Bir let
değişkeninin aynı kapsamda veya aynı satırda let
ile yeniden bildirilmesine izin verilmez:
let x = 2; // İzin verildi
let x = 3; // İzin verilmez
{
let x = 4; // İzin verildi
let x = 5; // İzin verilmez
}
Yeniden tanımlamak let
ve var
değişkeni aynı kapsamda, ya da aynı blokta, izin verilmez:
let x = 2; // İzin verildi
var x = 3; // İzin verilmez
{
let x = 4; // İzin verildi
var x = 5; // İzin verilmez
}
Const Bildirimi
const PI = 3.14;
console.log(PI); // 3.14
PI = 10; // error
Const anahtar kelime biraz yanıltıcıdır.
Sabit bir değer tanımlamaz. Bir değere sabit bir referans tanımlar.
Bu nedenle, sabit ilkel değerleri değiştiremeyiz, ancak nesne özelliklerini ve dizi öğelerini yine de değiştirebilirsiniz.
// Bir const nesnesi oluşturabilirsiniz:
const car = {type:"Fiat", model:"Egea", color:"white"};
// Bir özelliği değiştirebilirsiniz:
car.color = "red";
// Bir özellik ekleyebilirsiniz:
car.fuel = "diesel";
// Dizi elemanını değiştirme
const COLORS = ["red", "green", "blue"];
console.log(COLORS[0]); // red
COLORS[0] = "yellow";
console.log(COLORS[0]); // yellow
const
anahtar kelime, sabitleri tanımlamayı mümkün kılar. Sabitler salt okunur, const
ile tanımlanan değişkenlere yeni değerler atayamazsınız.
Değişkenleri adlandırmanın yolları veya stilleri
1. snake_case
var ders_adi = "javaScript";
2. camelCase
var dersAdi = "javascript";
Rıdvan açıkgöz 10/02/2019
Hasan 04/07/2019
Mert Emin 08/03/2020
Mert Sevtekin 12/01/2021
yönetici 13/01/2021
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- CSS YATAY MENÜ YAPIMI
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML RESİM EKLEME
- HTML DİV ve SPAN NEDİR?
- HTML ARKAPLANA MÜZİK EKLEME
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME