Hoisting Nedir?

.card { background: #fff; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */ padding: 20px; width: 100%; /* Tam genişlik */ box-sizing: border-box; text-align: left; margin: 20px auto; /* Üst ve alt boşluk */ } .question { font-size: 1.5em; margin-bottom: 10px; color: #333; font-weight: bold; } .answer { font-size: 1.2em; color: #555; line-height: 1.5; } .answer ul { margin-top: 10px; padding-left: 20px; } .answer ul ul { margin-top: 5px; padding-left: 20px; list-style-type: circle; } .answer li { margin-bottom: 10px; } Hoisting Nedir? Hoisting, JavaScript'te değişkenlerin ve fonksiyonların tanımlamalarının, çalışma zamanından önce belleğe taşınmasıdır. Tanımlamalar fiziksel olarak yukarı taşınmaz, fakat JavaScript motoru, kodu çalıştırmadan önce değişken ve fonksiyon tanımlamalarını algılar. Hoisting Özellikleri: Fonksiyonlar hoist edilir: Fonksiyonlar, tanımlandıkları yerden önce çağrılabilir. Değişkenler kısmen hoist edilir: var ile tanımlanan değişkenler: Belleğe taşınır fakat başlangıç değeri atanmaz (undefined olur). let ve const ile tanımlanan değişkenler: Hoist edilir ancak tanımlanmadan önce kullanıldığında hata alınır. body { margin: 0; font-family: Arial, sans-serif; } .editor5-container { display: flex; flex-direction: column; height: 60vh; } .editor5-header { display: flex; justify-content: space-between; align-items: center; background-color: #f7f7f7; border-bottom: 2px solid #ccc; padding: 10px; font-size: 18px; font-weight: bold; color: #00796b; } .copy-button5 { background-color: #00796b; color: white; border: none; padding: 8px 16px; cursor: pointer; border-radius: 4px; font-size: 14px; transition: background-color 0.3s, color 0.3s; } .copy-button5.copied { background-color: #4caf50; color: white; } .CodeMirror { height: 100%; } HoistingExamples.js Kopyala function initializeCodeMirror(editorId5, code5) { const editor5 = CodeMirror.fromTextArea(document.getElementById(editorId5), { mode: { name: "javascript", jsx: true }, theme: 'dracula', lineNumbers: true, autoCloseBrackets: true, matchBrackets: true, tabSize: 2, readOnly: true }); editor5.setValue(code5.trim()); const copyButton = document.getElementById('copyButton5'); copyButton.addEventListener('click', async () => { try { await navigator.clipboard.writeText(editor5.getValue()); copyButton.textContent = 'Kopyalandı!'; copyButton.classList.add('copied'); setTimeout(() => { copyButton.textContent = 'Kopyala'; copyButton.classList.remove('copied'); }, 2000); } catch (err) { console.error('Kod kopyalanırken bir hata oluştu: ', err); } }); return editor5; } const code5 = ` // Hoisting Örnekleri // 1. Fonksiyon Hoisting // Fonksiyonlar tanımlandıkları yerden önce çağrılabilir. hoistedFunction(); // Çalışır function hoistedFunction() { console.log("Bu bir hoisted fonksiyondur."); } // 2. var ile Hoisting // var ile tanımlanan değişkenler belleğe taşınır fakat başlangıç değeri atanmaz (undefined). console.log(varVariable); // undefined var varVariable = "Bu bir var değişkenidir."; console.log(varVariable); // "Bu bir var değişkenidir." // 3. let ve const ile Hoisting // let ve const ile tanımlanan değişkenler hoist edilir ancak tanımlanmadan önce kullanılamaz. console.log(letVariable); // Hata: letVariable tanımlanmadan önce kullanılamaz let letVariable = "Bu bir let değişkenidir."; console.log(constVariable); // Hata: constVariable tanımlanmadan önce kullanılamaz const constVariable = "Bu bir const değişkenidir."; `; initializeCodeMirror('editor5', code5);

Hoisting Nedir?

İlgili Makaleler

IIFE Nedir?

Property Nedir?

Scope Türleri Nelerdir?

Passing Data by Value Nedir?

Bir yanıt yazın Yanıtı iptal et