رفتار Hoisting در جاوا اسکریپت

در کدنویسی جاوا اسکریپت، می‌توان یک متغیر را بعد از آنکه مورد استفاده قرار گرفت، تعریف کرد. به عبارت دیگر، می‌توان از یک متغیر قبل از تعریف کردن، استفاده کرد.

مثال اول و دوم نتیجه یکسانی دارند.

مثال اول:

x <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">// Assign 5 to x</span>

elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Find an element </span>
elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> x<span class="token punctuation">;</span>                     <span class="token comment">// Display x in the element</span>

<span class="token keyword">var</span> x<span class="token punctuation">;</span> <span class="token comment">// Declare x</span>

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element

elem.innerHTML = x; // Display x in the element

var x; // Declare x

مثال دوم:

<span class="token keyword">var</span> x<span class="token punctuation">;</span> <span class="token comment">// Declare x</span>
x <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">// Assign 5 to x</span>

elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Find an element </span>
elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> x<span class="token punctuation">;</span>                     <span class="token comment">// Display x in the element</span>

var x; // Declare x

x = 5; // Assign 5 to x

elem.innerHTML = x; // Display x in the element

برای درک این مثال‌ها شما باید اصطلاح Hoisting را درک کنید.
Hoisting رفتار پیش‌فرض از حرکت دادن تمام تعاریف به بالای محدوده فعلی (به بالای اسکریپت فعلی یا تابع فعلی) است.

کلمات کلیدی `let` و `const`

در زبان جاوا اسکریپت، متغیرها و ثابت‌ها (constants) که با کلمه کلیدی let یا const تعریف می‌شوند، hoist نیستند.

مقداردهی‌ها (Initializations) در جاوا اسکریپت Hoist نیستند

جاوا اسکریپت فقط تعاریف Hoist را نشان می‌دهد، نه مقداردهی را.

مثال اول و دوم نتیجه یکسانی ندارند.

مثال اول:

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">// Initialize x</span>
<span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span> <span class="token comment">// Initialize y</span>

elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Find an element </span>
elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> y<span class="token punctuation">;</span>           <span class="token comment">// Display x and y</span>

var x = 5; // Initialize x

var y = 7; // Initialize y

elem.innerHTML = x + " " + y; // Display x and y

مثال دوم:

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">// Initialize x</span>

elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Find an element </span>
elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> y<span class="token punctuation">;</span>           <span class="token comment">// Display x and y</span>

<span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span> <span class="token comment">// Initialize y</span>

آیا منطقی به نظر می‌رسد که y در آخرین مثال تعریف نشده است؟
این به این دلیل است که فقط تعاریف (var y)، نه مقداردهی اولیه (۷=) به بالا کشیده می‌شود.
به علت بالا کشیدن، y قبل از استفاده تعریف شده است، اما چون مقداردهی بالا کشیده نشده است، مقدار y تعریف نشده است.

مثال دوم را می‌توان به صورت زیر نوشت:

<span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">// Initialize x</span>
<span class="token keyword">var</span> y<span class="token punctuation">;</span>     <span class="token comment">// Declare y</span>

elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Find an element </span>
elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> y<span class="token punctuation">;</span>           <span class="token comment">// Display x and y</span>

y <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>    <span class="token comment">// Assign 7 to y</span>

var y; // Declare y

y = 7; // Assign 7 to y

تعریف کردن متغیر شما در بالا

Hoisting (برای بسیاری از توسعه دهندگان) یک رفتار ناشناخته یا نادیده گرفته شده از جاوا اسکریپت است.
اگر یک توسعه دهنده Hoist را درک نکند، برنامه‌ها ممکن است با خطا مواجه شوند.
برای اجتناب از بروز خطاها، همواره تمام متغیرها را در ابتدای هر محدوده تعریف کنید.

جاوا اسکریپت در حالت strict اجازه نمی‌دهد که متغیرهای مورد استفاده در صورت تعریف نشدن، استفاده شوند.

Hoisting, Javascript, آموزش استفاده از عملگر جاوااسکریپت, آموزش جاوااسکریپت, اسکریپت, جاوا, جاوااسکریپت, جاوااسکریپت آموزش, جاوااسکریپت کامل, کدنویسی جاوااسکریپت

نوشته‌های پیشین

شغل های پردرآمد در ایران

نوشتهٔ بعدی

۱۰ ابزار برتر تست امنیت رایگان و متن باز

رفتار Hoisting در جاوا اسکریپت