1. Ana Sayfa
  2. Nasıl Yapılır?

JavaScript Hoisting Nedir?

JavaScript Hoisting Nedir?
javascript-hoisting-nedir
+ - 0

JavaScript Hoisting Nedir?

JavaScript Hoisting Nedir? Bir JavaScript kodu parçasını yürüttüğünüzde, JavaScript motoru genel yürütme bağlamını oluşturur. Küresel yürütme bağlamının iki aşaması vardır: oluşturma ve yürütme.

Oluşturma aşamasında JavaScript motoru, değişken ve işlev bildirimlerini kodunuzun en üstüne taşır. Bu özellik, JavaScript’te Hoisting (yukarı çekme) olarak bilinir.

JavaScript Hoisting

Variable Hoisting

Variable Hoisting , JavaScript motorunun değişken bildirimlerini komut dosyasının en üstüne taşıması anlamına gelir. Aşağıdaki örnek, counter değişkenini bildirir ve değerini 1’e ayarlar:

console.log(counter); // undefined
var counter = 1;

Ancak, JavaScript motoru değişken bildirimini komut dosyasının en üstüne taşıdığı için ilk kod satırı bir hataya neden olmaz. Teknik olarak, kod yürütme aşamasında aşağıdaki gibi görünür:

var counter;

console.log(counter); // undefined
counter = 1;

Teknik olarak konuşursak, genel yürütme bağlamının oluşturma aşaması sırasında, JavaScript motoru değişken counter belleğe yerleştirir ve değerini undefined olarak başlatır.

Let Anahtar Kelimesi

Aşağıdaki, let anahtar sözcüğüyle değişken counter bildirir:

console.log(counter);
let counter = 1;

JavaScript aşağıdaki hatayı veriyor:

"ReferenceError: Cannot access 'counter' before initialization

Hata mesajı, counter değişkeninin zaten yığın belleğinde olduğunu açıklar. Ancak, başlatılmadı.

Arka planda, JavaScript motoru let anahtar sözcüğünü kullanan değişken bildirimlerini kaldırır. Ancak, bu değişkenleri başlatmaz. Var olmayan bir değişkene erişirseniz JavaScript’in farklı bir hata vereceğine dikkat edin:

console.log(alien);
let counter = 1;

Verilen hata:

"ReferenceError: alien is not defined

Function Hoisting

Değişkenler gibi, JavaScript motoru da işlev bildirimlerini kaldırır. İşlev bildirimlerini betiğin en üstüne taşır. Örneğin:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

function add(a, b){
return a + b;
}

Bu örnekte, tanımlamadan önce add() işlevini çağırdık. Yukarıdaki kod aşağıdakine eşdeğerdir:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

function add(a, b){
function add(a, b){
    return a + b;
}

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

Yürütme bağlamının oluşturma aşaması sırasında, JavaScript motoru add() işlev bildirimini yığın belleğine yerleştirir. Kesin olmak gerekirse, JavaScript motoru İşlev türünde bir nesne ve işlev nesnesine atıfta bulunan add adlı bir işlev başvurusu oluşturur.

Function Expressions

Aşağıdaki örnek, eklemeyi normal bir işlevden bir işlev ifadesine değiştirir:

let x = 20,
    y = 10;

let result = add(x,y);
let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

var add = function(x, y) {
return x + y;
}

Kodu çalıştırırsanız, aşağıdaki hata oluşur:

"TypeError: add is not a function   

Genel yürütme bağlamının oluşturma aşaması sırasında, JavaScript Motoru bellekte add değişkenini oluşturur ve değerini undefined olarak başlatır. Aşağıdaki kodu çalıştırırken, eklenti tanımsızdır, dolayısıyla bir işlev değildir:

let result = add(x,y);  

Add değişkeni, yalnızca genel yürütme bağlamının yürütme aşaması sırasında anonim bir işleve atanır.

Arrow Functions

Aşağıdaki örnek, işlev ekle ifadesini ok işleviyle değiştirir:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

var add = (x, y) => x + y; 

Ok işlevleri, işlev ifadelerini tanımlamak için sözdizimsel şeker olduğundan, kod ayrıca işlev ifadesi örneğiyle aynı hatayı verir.

"TypeError: add is not a function 

İşlev ifadelerine benzer şekilde, ok işlevleri yukarı taşınmaz.

ÖZET

  • JavaScript yukarı çekme, değişken ve işlev bildirimlerini komut dosyasının en üstüne taşıyan yürütme bağlamının oluşturma aşamasında gerçekleşir.
  • JavaScript motoru, let anahtar sözcüğü kullanılarak bildirilen değişkenleri yukarı çeker, ancak bunları var anahtar sözcüğüyle bildirilen değişkenler olarak başlatmaz.
  • İşlev ifadeleri ve ok işlevleri yukarı çekilmez.

Yazar Hakkında

Bu Yazıyı Yorumla