JavaScript: Başlangıçtan İleri Seviyeye
Bölüm 10 / 312 dk okuma

Scope ve Hoisting

Global, function, block scope kavramları ve hoisting'in nasıl çalıştığı.

Scope = bir değişkenin "görünür" olduğu kapsam.

Üç scope tipi

Global scope

<script> veya dosyanın en üst seviyesinde tanımlanmış değişkenler. Her yerden erişilebilir.

const SITE = "czay.dev"; // global
 
function logla() {
  console.log(SITE); // ✅
}

Function scope

function içinde tanımlanmış değişkenler sadece o fonksiyonda görünür.

function calc() {
  const local = 42;
}
console.log(local); // ❌ ReferenceError

Block scope

{} ile sınırlanmış kapsam. let ve const block scope'tadır:

if (true) {
  let x = 1;
  const y = 2;
}
console.log(x); // ❌ ReferenceError

var ise function scope'tadır — bu yüzden modası geçti:

if (true) {
  var z = 99;
}
console.log(z); // 99 (!) — block sınırını aşar

Lexical scope (kapsam zinciri)

İç fonksiyon dış fonksiyonun değişkenlerine erişebilir:

function dis() {
  const a = 1;
 
  function ic() {
    const b = 2;
    console.log(a, b); // 1 2 — dış kapsamı görür
  }
 
  ic();
  console.log(b); // ❌ tersine çalışmaz
}

Bu zincire scope chain denir. Bir değişken aranırken JavaScript önce iç kapsama, bulamazsa dış kapsama, en sonunda global'e bakar.

Hoisting

JavaScript çalıştırma öncesi tanımları "yukarı çeker". Davranış değişkene göre farklıdır:

var hoisting

console.log(x); // undefined ← hata yok!
var x = 5;

Yani aslında şuna dönüşür:

var x;        // tanım yukarı çekildi
console.log(x); // undefined
x = 5;

let/const hoisting

Tanım yukarı çekilir ama erişim yasaktır (Temporal Dead Zone):

console.log(y); // ❌ ReferenceError: Cannot access 'y' before initialization
let y = 5;

Function declaration hoisting

Tüm tanım yukarı çekilir, fonksiyon önceden çağrılabilir:

selamla(); // ✅ "Merhaba"
function selamla() {
  console.log("Merhaba");
}

Function expression hoisting yapmaz:

selamla(); // ❌ TypeError
const selamla = function () { ... };
💡Pratik

Hoisting'i bilmek lazım ama ona güvenerek kod yazma. Modern kuralı uygula: önce tanımla, sonra kullan.

Bu bölümü bitirdin mi?

İlerlemen tarayıcıda saklanır, eğitim listesinde görünür.

Paylaş