{"id":19041,"date":"2025-04-24T04:45:13","date_gmt":"2025-04-24T01:45:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-hoisting-detayli-anlatim-ve-ornekler\/"},"modified":"2025-04-24T04:45:13","modified_gmt":"2025-04-24T01:45:13","slug":"javascript-hoisting-detayli-anlatim-ve-ornekler","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-hoisting-detayli-anlatim-ve-ornekler\/","title":{"rendered":"JavaScript Hoisting: Detayl\u0131 Anlat\u0131m ve \u00d6rnekler"},"content":{"rendered":"

<\/p>\n

JavaScript Hoisting: Detayl\u0131 Anlat\u0131m ve \u00d6rnekler<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn JavaScript’te s\u0131k kar\u015f\u0131la\u015f\u0131lan, ancak tam olarak anla\u015f\u0131lamayan bir kavram olan “Hoisting”i detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Hoisting, JavaScript’in \u00e7al\u0131\u015fma zaman\u0131 davran\u0131\u015f\u0131n\u0131 anlamak i\u00e7in olduk\u00e7a \u00f6nemlidir. \u00d6ncelikle, hoisting’in ne oldu\u011funu basit\u00e7e a\u00e7\u0131klayal\u0131m: JavaScript yorumlay\u0131c\u0131s\u0131, kodun \u00e7al\u0131\u015ft\u0131r\u0131lmadan \u00f6nce de\u011fi\u015fken ve fonksiyon tan\u0131mlar\u0131n\u0131 kodun en \u00fcst\u00fcne “kald\u0131r\u0131r”. Bu, kodun yaz\u0131ld\u0131\u011f\u0131 s\u0131raya g\u00f6re de\u011fil, beyan edildi\u011fi s\u0131raya g\u00f6re \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir. Ancak bu, de\u011fi\u015fkenlere ve fonksiyonlara de\u011fer atamas\u0131n\u0131 da yukar\u0131ya ta\u015f\u0131d\u0131\u011f\u0131 anlam\u0131na gelmez. Bu durum bazen beklenmedik sonu\u00e7lara yol a\u00e7abilir.<\/p>\n

De\u011fi\u015fken Hoisting’i<\/h2>\n

\u00d6ncelikle de\u011fi\u015fken hoisting’ini ele alal\u0131m. Bir de\u011fi\u015fkeni tan\u0131mlamadan \u00f6nce kullanmaya \u00e7al\u0131\u015f\u0131rsan\u0131z, JavaScript undefined<\/code> de\u011ferini d\u00f6nd\u00fcr\u00fcr. Bunun nedeni, de\u011fi\u015fkenin deklarasyonunun kodun ba\u015f\u0131na ta\u015f\u0131nmas\u0131, ancak de\u011fer atamas\u0131n\u0131n ta\u015f\u0131nmamas\u0131d\u0131r. A\u015fa\u011f\u0131daki \u00f6rne\u011fe bakal\u0131m:<\/p>\n

\nconsole.log(myVar); \/\/ undefined \u00e7\u0131kt\u0131s\u0131 verir\nvar myVar = 10; \n<\/code><\/pre>\n
Yukar\u0131daki kodda, myVar<\/code> de\u011fi\u015fkenini tan\u0131mlamadan \u00f6nce konsola yazd\u0131rmaya \u00e7al\u0131\u015f\u0131yoruz.  JavaScript, myVar<\/code>‘\u0131 hoisting yapar ve bu nedenle bir hata vermez. Ancak de\u011fi\u015fkene hen\u00fcz bir de\u011fer atanmad\u0131\u011f\u0131 i\u00e7in undefined<\/code> \u00e7\u0131kt\u0131s\u0131 al\u0131r\u0131z. Bu durumu daha iyi anlamak i\u00e7in, JavaScript’in asl\u0131nda arka planda ne yapt\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnelim:<\/p>\n
\nvar myVar; \/\/ hoisting sonras\u0131 durum\nconsole.log(myVar); \/\/ undefined\nmyVar = 10;\n<\/code><\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, JavaScript yorumlay\u0131c\u0131s\u0131, var myVar = 10;<\/code> sat\u0131r\u0131n\u0131,  var myVar;<\/code> \u015feklinde kodun ba\u015f\u0131na ta\u015f\u0131m\u0131\u015ft\u0131r.  Ancak myVar = 10;<\/code> k\u0131sm\u0131 ta\u015f\u0131nmam\u0131\u015ft\u0131r.  Sonu\u00e7 olarak,  console.log(myVar);<\/code> sat\u0131r\u0131  undefined<\/code> de\u011ferini g\u00f6r\u00fcnt\u00fcler.<\/p>\n
Fonksiyon Hoisting’i<\/h2>\n
Fonksiyon hoisting’i de\u011fi\u015fken hoisting’inden biraz farkl\u0131d\u0131r.  JavaScript’te, fonksiyon deklarasyonlar\u0131 (fonksiyon ifadeleri de\u011fil) kodun ba\u015f\u0131na tamamen ta\u015f\u0131n\u0131r. Yani, fonksiyonu tan\u0131mlamadan \u00f6nce \u00e7a\u011f\u0131rabilirsiniz ve bu durumda sorunsuz \u00e7al\u0131\u015f\u0131r.  \u015eimdi bir \u00f6rne\u011fe bakal\u0131m:<\/p>\n
\nmyFunction(); \/\/ \"Merhaba D\u00fcnya!\" \u00e7\u0131kt\u0131s\u0131 verir\n\nfunction myFunction() {\n  console.log(\"Merhaba D\u00fcnya!\");\n}\n<\/code><\/pre>\n
Bu kodda, myFunction()<\/code> fonksiyonunu tan\u0131mlamadan \u00f6nce \u00e7a\u011f\u0131r\u0131yoruz.  Ancak kod hata vermez ve “Merhaba D\u00fcnya!” \u00e7\u0131kt\u0131s\u0131n\u0131 al\u0131r\u0131z.  \u00c7\u00fcnk\u00fc JavaScript, myFunction<\/code> fonksiyonunun tan\u0131m\u0131n\u0131 kodun ba\u015f\u0131na ta\u015f\u0131r.  Bu, fonksiyon ifadeleri i\u00e7in ge\u00e7erli de\u011fildir. Fonksiyon ifadeleri hoisting yap\u0131lmaz ve tan\u0131mlanmadan \u00f6nce \u00e7a\u011fr\u0131l\u0131rlarsa hata verirler.<\/p>\n
Hoisting’in Olas\u0131 Sorunlar\u0131<\/h2>\n
Hoisting, kod okunabilirli\u011fini azaltabilir ve beklenmedik hatalara yol a\u00e7abilir.  Bu nedenle, de\u011fi\u015fken ve fonksiyonlar\u0131n\u0131z\u0131 kodunuzun ba\u015f\u0131nda tan\u0131mlaman\u0131z, daha temiz ve anla\u015f\u0131l\u0131r bir kod yazman\u0131za yard\u0131mc\u0131 olur.  Bu, kodun daha kolay hata ay\u0131klanmas\u0131n\u0131 ve bak\u0131m\u0131n\u0131n yap\u0131lmas\u0131n\u0131 sa\u011flar.  Ayr\u0131ca,  kendi web sitemde<\/a>  JavaScript ile ilgili daha fazla makale bulabilirsiniz.<\/p>\n
\u00d6nemli Not:<\/strong>  let<\/code> ve const<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler hoisting yap\u0131lmaz.  Bunlar\u0131 tan\u0131mlamadan \u00f6nce kullanmaya \u00e7al\u0131\u015f\u0131rsan\u0131z, bir “ReferenceError” hatas\u0131 al\u0131rs\u0131n\u0131z.<\/p>\n
Umar\u0131m bu makale, JavaScript hoisting’ini anlamak i\u00e7in size yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi i\u00e7in a\u015fa\u011f\u0131daki kaynaklara g\u00f6z atabilirsiniz:<\/p>\n