JavaScript Hoisting: Detayl\u0131 Anlat\u0131m<\/p>\n
Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle JavaScript’te s\u0131k kar\u015f\u0131la\u015f\u0131lan ve bazen kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na yol a\u00e7abilen bir konuyu, Hoisting<\/strong>‘i detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. \u00d6ncelikle, Hoisting’in ne oldu\u011funu basit\u00e7e a\u00e7\u0131klayal\u0131m. K\u0131saca, JavaScript’in, kodunuzdaki de\u011fi\u015fken ve fonksiyon tan\u0131mlar\u0131n\u0131, kodun \u00e7al\u0131\u015ft\u0131r\u0131lmaya ba\u015flamadan \u00f6nce, kodun en ba\u015f\u0131na ta\u015f\u0131mas\u0131 i\u015flemidir. Ancak, bu ta\u015f\u0131ma i\u015flemi tam olarak bekledi\u011finiz gibi olmayabilir. Bu nedenle, Hoisting’i anlamak, JavaScript kodunuzu daha iyi yazman\u0131za ve olas\u0131 hatalar\u0131 \u00f6nlemenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n \u015eimdi, Hoisting mekanizmas\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131na daha yak\u0131ndan bakal\u0131m. \u00d6rne\u011fin, bir de\u011fi\u015fkeni fonksiyon \u00e7a\u011f\u0131rmadan \u00f6nce tan\u0131mlamadan kulland\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcn. Normalde bu bir hata olarak kar\u015f\u0131m\u0131za \u00e7\u0131kar. Ancak JavaScript’te, Hoisting sayesinde, kodunuz \u00e7al\u0131\u015ft\u0131r\u0131lmadan \u00f6nce bu de\u011fi\u015fkenin tan\u0131ml\u0131ym\u0131\u015f gibi davran\u0131r. Fakat dikkat edilmesi gereken nokta, de\u011fi\u015fkenin de\u011feri G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, Hoisting, sadece de\u011fi\u015fkenlerle s\u0131n\u0131rl\u0131 de\u011fildir; fonksiyonlar i\u00e7in de ge\u00e7erlidir. Fonksiyon tan\u0131mlar\u0131n\u0131 kodun daha alt sat\u0131rlar\u0131nda da \u00e7a\u011f\u0131rabilirsiniz. \u00c7\u00fcnk\u00fc JavaScript, fonksiyon tan\u0131mlar\u0131n\u0131 da kodun ba\u015f\u0131na ta\u015f\u0131r. Bu durum, de\u011fi\u015fkenlerdeki gibi, Bu \u00f6rnekte, Hoisting, JavaScript’in beklenmedik davran\u0131\u015flar\u0131na yol a\u00e7abilecek bir \u00f6zelliktir. Bu nedenle, kodunuzda Hoisting’i anlamak ve ona g\u00f6re kod yazmak olduk\u00e7a \u00f6nemlidir. Kodunuzun daha okunabilir ve hata ay\u0131klamas\u0131 daha kolay olmas\u0131 i\u00e7in, de\u011fi\u015fken ve fonksiyonlar\u0131n\u0131z\u0131 her zaman tan\u0131mlamalar\u0131ndan \u00f6nce kullanmaktan ka\u00e7\u0131nmal\u0131s\u0131n\u0131z. Bu, kodunuzun daha anla\u015f\u0131l\u0131r olmas\u0131na ve olas\u0131 hatalar\u0131 \u00f6nlemenize yard\u0131mc\u0131 olacakt\u0131r. Ayr\u0131ca, Umar\u0131m bu makale, JavaScript Hoisting’i anlaman\u0131za yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi i\u00e7in buraya<\/a> ve kendi web sitem fatihsoysal.com<\/a> bakabilirsiniz. Herhangi bir sorunuz varsa, yorum b\u0131rakmaktan \u00e7ekinmeyin!<\/p>\n #Etiketler: javascript, hoisting, javascript hoisting, de\u011fi\u015fken kald\u0131rma, fonksiyon kald\u0131rma, scope, kapsam, programlama, web geli\u015ftirme, let, const, var, temporal dead zone, tdz<\/p>\n <\/body>Hoisting Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
undefined<\/code> olarak atan\u0131r. Yani, de\u011fi\u015fkenin de\u011feri, tan\u0131mland\u0131\u011f\u0131 sat\u0131ra kadar ula\u015fmaz. Bu durum, kodun beklenmedik \u015fekilde \u00e7al\u0131\u015fmas\u0131na neden olabilir. Bu durumu daha iyi anlamak i\u00e7in bir \u00f6rne\u011fe bakal\u0131m:<\/p>\n\nconsole.log(myVar); \/\/ undefined yazd\u0131r\u0131r\nvar myVar = 10;\n<\/code><\/pre>\nmyVar<\/code> de\u011fi\u015fkeni console.log<\/code> sat\u0131r\u0131ndan \u00f6nce tan\u0131mlanmam\u0131\u015ft\u0131r. Ancak Hoisting sayesinde, console.log<\/code> sat\u0131r\u0131 \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, myVar<\/code> de\u011fi\u015fkeni undefined<\/code> de\u011ferine sahiptir. Sonras\u0131nda myVar<\/code> de\u011fi\u015fkenine 10 de\u011feri atan\u0131r.<\/p>\nFonksiyon Hoisting’i<\/h2>\n
undefined<\/code> de\u011feriyle kar\u015f\u0131la\u015fman\u0131za neden olmaz. Fonksiyonun tam olarak tan\u0131mlanm\u0131\u015f hali kullan\u0131l\u0131r. \u0130\u015fte bir \u00f6rnek:<\/p>\n\nmyFunction(); \/\/ \"Merhaba!\" yazd\u0131r\u0131r\n\nfunction myFunction() {\n console.log(\"Merhaba!\");\n}\n<\/code><\/pre>\nmyFunction<\/code> fonksiyonu \u00e7a\u011f\u0131r\u0131l\u0131yor ve daha sonra tan\u0131mlan\u0131yor. Ancak, Hoisting sayesinde, fonksiyonun \u00e7a\u011fr\u0131m\u0131 sorunsuz bir \u015fekilde \u00e7al\u0131\u015f\u0131r. \u00c7\u00fcnk\u00fc JavaScript, fonksiyon tan\u0131m\u0131n\u0131 kodun ba\u015f\u0131na ta\u015f\u0131m\u0131\u015ft\u0131r. Bu durum, fonksiyon ifadeleri (function expressions) i\u00e7in ge\u00e7erli de\u011fildir. Fonksiyon ifadeleri, de\u011fi\u015fkenler gibi undefined<\/code> de\u011ferine sahip olur.<\/p>\nHoisting ile \u0130lgili Dikkat Edilmesi Gerekenler<\/h2>\n
var<\/code> yerine let<\/code> ve const<\/code> kullan\u0131m\u0131 ile scope (kapsam) y\u00f6netimini daha iyi kontrol edebilirsiniz. let<\/code> ve const<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler hoisting’e tabi tutulsalar da, Temporal Dead Zone (TDZ) ad\u0131 verilen bir b\u00f6lgeye girerler ve bu b\u00f6lgede kullan\u0131lamazlar. Bu durum, hata riskini azalt\u0131r. <\/p>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript Hoisting: Detayl\u0131 Anlat\u0131m Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle JavaScript’te s\u0131k kar\u015f\u0131la\u015f\u0131lan ve bazen kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8115","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n