قبل از ES2015، جاوا اسکریپت تنها دو نوع اسکوپ داشت: سطح عمومی یا گلوبال اسکوپ و سطح تابع یا فانکشن اسکوپ. اسکوپ یا حوزه، به جاهایی گفته میشود که متغیرها قابل دسترسی و استفاده هستند
متغیرهایی که به صورت عمومی (خارج از توابع) تعریف می شوند، شامل حوزه سراسری (Global Scope) می شوند.
// خارج از توابع و در محیط گلوبال تعریف می شوند
// و در هر جای برنامه قابل دسترسی هستند
var person = "Ali";
function myFunction() {
// در داخل تابع می توانیم متغیر را فراخوانی کنیم
console.log(person);
}متغیرهایی که به صورت محلی تعریف شده اند، شامل حوزه تابع یا لوکال (Function Scope) می شوند.
// در این قسمت کسی نمی تواند متغیر
// person
// را فراخوانی کرده یا مقدار دهی کند
function myFunction() {
var person = "Ali";
// در داخل تابع فقط می توان متغیر را فراخوانی کرد
console.log(person);
}قبل از معرفی ES6، تنها راه ساخت متغیرها در جاوا اسکریپت استفاده از var بود که باعث بروز مشکلاتی می‌شد. متغیرهایی که با var تعریف می شوند، ممکن است یا حوزه سراسری (Global Scope) داشته باشند و یا لوکال (Function Scope). یک متغیر وقتی بیرون از یک تابع تعریف شده باشد حوزه سراسری دارد و در همه قسمت های برنامه در دسترس است.
وقتی یک متغیر با var درون یک تابع تعریف می شود، حوزه این متغیر لوکال است. یعنی فقط داخل همان تابع یا بلاک به آن دسترسی داریم:
function webbookies() {
var w = 10;
}
webbookies();
alert(w); // error: w is not definedدر جاوا اسکریپت وقتی متغیری مثلاً w با استفاده از var تعریف می شود، می توان متغیر دیگری با همان نام قبلی با استفاده از var تعریف کرد.
به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Let</h1>
<p>The message is:</p>
<p id="su1demo"></p>
<script>
var message = "webbookies.com";
var grade = 80;
if(grade > 70){
var message = "Changed";
}
document.getElementById("su1demo").innerHTML = message; //"Changed"
</script>
</body>
</html>
در اینجا همانطور که می بینید متغیر message در سطح بلاک (block) دوباره تعریف شده و مقداردهی شده است. اما مقدار متغیر سطح سراسری را نیز تغییر داده است. برای جلوگیری از بروز چنین مشکلاتی بود که let و const معرفی شدند.
let
متغیرهایی که با let تعریف می شوند، دارای حوزه بلاکی (Block Scoped) هستد. بلاک به قسمتی از کد گفته می شود که بین براکت { } قرار می گیرد. متغیرهایی که با let درون بلاک تعریف می شوند، فقط در همان بلاک قابل دسترسی هستند.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Let</h1>
<p>The message is:</p>
<p id="su1demo"></p>
<script>
let message = "webbookies.com";
var grade = 80;
if(grade > 70){
let message = "Changed";
}
document.getElementById("su1demo").innerHTML = message; //"webbookies.com"
</script>
</body>
</html>همانطور که می بینید مقدار message در اینجا پس از اجرای if تغییری نمی کند. در واقع متغیر message تعریف شده در بلاک if با متغیر سراسری تعریف شده متفاوت است و فقط در محدوده بلاک خود معتبر است.
تعریف مجدد متغیر (redeclaration) با let
متغیرهایی که با let تعریف می شوند نمی توانند در همان بلاک مجددا تعریف شوند:
let a = 1; let a = 2; // خطا var b = 5; let b = 6; // خطا
اما اگر متغیر همنام دیگری در بلاک دیگری وجود داشته باشد می توان این کار را انجام داد:
let person = "Ali";
if (true) {
let person = "Amir";
alert(person); //"Amir"
}
alert(person); //"Ali"به یک مثال برای درک بهتر تعریف متغیرها دقت کنید:
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
// Here i is 10در اینجا پس از اجرای حلقه مقدار i مساوی 10 می باشد.
ولی:
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
// Here i is 5در اینجا چون متغیر i در سطح بلاک for دوباره تعریف شده است بعد از اجرای حلقه متغیر i از بین رفته و مقدار متغیر i گلوبال در نظر گرفته می شود.
بالا بردن (Hoisting)
مکانیزمی است که باعث می شود، قبل از اجرای برنامه، متغیرها و توابع، به بالاترین سطح حوزه خودشان جابجا شوند.
به کد زیر توجه کنید:
alert(a); // undefined var a = "Ali";
این کد درواقع بدین صورت تفسیر می شود:
var a; alert(a); // undefined a = "Ali";
متغیرهای let نیز موقع تفسیر، به بالای حوزه بلاک خود منتقل می شوند. برخلاف var که با مقدار undefined پیاده سازی می شوند، متغیرهای let با هیچ مقداری پیاده سازی نمی شوند. بنابراین وقتی متغیری را قبل از پیاده‌سازی استفاده می کنیم، با پیام خطا مواجه می شویم.
alert(a); let a = 1; // ReferenceError
ديدگاه كاربران
دیدگاهی وجود ندارد