Scope در جاوا اسکریپت، به محدوده‌ای اشاره دارد که یک متغیر یا تابع در آن تعریف شده و قابل دسترسی است. به عبارت دیگر، حوزه نشان‌دهنده محدوده‌ای است که یک متغیر یا تابع در آن قابل دسترسی است. می‌توان حوزه‌ها را به صورت لایه‌ای یا سلسله‌مراتبی در نظر گرفت. به عبارت دیگر، یک حوزه فرزند می‌تواند به متغیرها و توابعی که در حوزه والد خود تعریف شده‌اند دسترسی داشته باشد، اما حوزه والد به متغیرها و توابعی که در حوزه فرزند تعریف شده‌اند دسترسی ندارد. در این مطلب از مجله مکتوب ما اطلاعاتی در رابطه با اسکوپ در جاوا اسکریپت ارائه خواهیم کرد.
اسکوپ در جاوا اسکریپت چیست؟
حوزه (محدوده | Scope) در جاوا اسکریپت به محدوده‌ای اشاره دارد که در آن می‌توان به متغیرها و توابع دسترسی داشت. به زبان ساده، حوزه مشخص می‌کند که کجاها می‌توانید از یک متغیر یا تابع استفاده کنید و کجاها نمی‌توانید. باتوجه به اهمیت متغیرها در جاوا اسکریپت و کلا در برنامه نویسی، شناخت محدوده‌های هر متغیر نیز اهمیت خاصی دارد و به شما کمک می‌کند تا از تداخلات نام‌های متغیرها جلوگیری به‌عمل آورید.
در ادامه این مطلب اسکوپ در جاوا اسکریپت را با جزئیات بیشتری مورد بحث قرار خواهیم داد.
اهمیت و کاربرد Scope در جاوا اسکریپت
در بخش قبلی، مفهوم scope را شرح دادیم. استفاده از Scope مزایای زیادی را به‌دنبال دارد. از جمله می‌توان گفت که تعیین دسترسی و سازمان‌دهی متغیرها با دانستن مفهوم Scope مقدور خواهد بود. در فهرست زیر، برخی از مهم‌ترین موارد کاربرد Scope در زبان جاوا اسکریپت ارائه شده است.
- سازمان‌دهی متغیرها
- جلوگیری از تداخل
- در دسترس بودن متغیرها در بخش مورد نیاز از برنامه
- امنیت
- خوانایی بالای کدها
- نگهداری آسان‌تر از برنامه
انواع محدوده در جاوا اسکریپت
در جاوا اسکریپت، سه نوع حوزه مختلف وجود دارد. این سه نوع حوزه مختلف در جاوا اسکریپت کنترل دسترسی به متغیرها و توابع را مدیریت می‌کنند و اصول مختلفی برای ایجاد و استفاده از آنها وجود دارد. در ادامه، شرح مختصری از انواع Scope در جاوا اسکریپت را ارائه داده‌ایم.
- محدوده سراسری (Global Scope): در این محدوده، متغیرها و توابع در سطح بالای برنامه تعریف می‌شوند و در سراسر کد قابل دسترسی هستند.
- محدوده بلوکی (Block Scope): این محدوده در جاوا اسکریپت از زمان معرفی let و const معرفی شد. در این حوزه، متغیرها و توابع تنها در داخل بلوک کد مشخصی (مانند شرط‌ها یا حلقه‌ها) موجود هستند و در خارج از آن دسترسی ندارند.
- محدوده تابعی (Function Scope): این حوزه معمولاً به وسیله کلمه کلیدی var برای تعریف متغیرها ایجاد می‌شود. در این حوزه، متغیرها و توابع تنها در داخل توابع تعریف شده‌اند قابل دسترسی هستند و در خارج از توابع، آنها معتبر نیستند.
محدوده سراسری یا Global scope
متغیرهایی که خارج از توابع یا بلوک‌ها یا می‌توان گفت خارج از بدنه‌ی آکولادهای تابع ({}) تعریف شده‌اند، دارای حوزه سراسری هستند.
- در یک برنامه جاوا اسکریپت، متغیرهای سراسری از هر نقطه‌ای قابل دسترسی هستند.
- حوزه var، let و const بسیار مشابه هم هستند زمانی که خارج از توابع تعریف شوند.
مثال: در این مثال، تمامی متغیرها را خارج از تابع تعریف می‌کنیم و حالا می‌توانیم از هر نقطه‌ای در برنامه جاوا اسکریپت به این متغیرها دسترسی پیدا کنیم.
var global_variable1 = "maktabkhooneh";let global_variable2 = "maktab";const global_variable3 = "khooneh";function check_global_variables(){ console.log(global_variable1); console.log(global_variable2); console.log(global_variable3);}check_global_variables(); |
خروجی مثال فوق به صورت زیر است:
maktabkhoonehmaktabkhooneh
محدوده تابعی یا Function Scope
متغیرهایی که در داخل یک تابع تعریف می‌شوند، دارای حوزه محلی یا تابعی هستند، که به این معناست که متغیرهایی که در داخل تابع تعریف می‌شوند، خارج از آن تابع قابل دسترسی نیستند.
زمانی که یک متغیر در داخل یک تابع تعریف می‌شود، متغیرهایی که با var ،let و const تعریف شده‌اند به ظاهر بسیار مشابه به نظر می‌رسند.
* توجه: توابع و اشیاء به عنوان متغیرها در جاوا اسکریپت هستند.
متغیرهایی که در داخل تابع تعریف می‌شوند، دارای حوزه تابعی هستند. زمانی که با var درون تابع تعریف می‌شوند، دارای حوزه تابعی هستند. تابع از پرانتزهای دور برای ذخیره بدنه تابع استفاده می‌کند. بنابراین، حوزه بلوکی و حوزه تابعی برای بدنه تابع یکسان است.
مثال: در این مثال، یک متغیر را درون یک تابع تعریف می‌کنیم و سپس سعی می‌کنیم به آن از خارج از تابع دسترسی پیدا کنیم.
function check_function_scope(){ var variable1 = "maktabkhooneh"; let variable2 = "maktab"; const variable3 = "khooneh"; console.log(variable1); console.log(variable2);}check_function_scope();console.log(variable3);خروجی کد بالا به صورت زیر است:
maktabkhoonehmaktabReferenceError: variable3 is not defined
خروجی کد بالا نشان می‌دهد که گرچه در مثال بالا، سعی کردیم به متغیر خارج از تابع دسترسی پیدا کنیم، اما به دلیل حوزه تابعی، خطای ارجاع رخ داد.
حوزه‌ی بلوکی یا Block scope
تا پیش از ECMA6 (2015)، ما فقط دو نوع حوزه، یعنی حوزه سراسری و حوزه تابعی داشتیم، اما وقتی کلمات کلیدی Let و Const در ES6 معرفی شدند، حوزه بلوکی را فراهم کردند. متغیرهایی که داخل { } (پرانتزهای کروی) تعریف می‌شوند، تنها می‌توانند در داخل همان حوزه دسترسی داشته باشند و از خارج از آن قابل دسترسی نیستند.
متغیرهایی که با var تعریف می‌شوند، حوزه بلوکی ندارند و تنها let و const حوزه بلوکی دارند. در این مثال، متغیر را در داخل حوزه بلوکی تعریف خواهیم کرد.
{ var variable_1 = "khooneh"; const variable_2 = "maktabkhooneh"; let x=2; x*=2; console.log(x); console.log(variable_2);}console.log(variable_1); |
خروجی مثال فوق به صورت زیر است:
۴maktabkhoonehkhooneh
خروجی در مثال بالا به‌خوبی نشان می‌دهد که ما با موفقیت به متغیر با کلمه کلیدی var دسترسی پیدا کردیم، زیرا var حوزه بلوکی ندارد.
محدوده لغوی یا Lexical scope
Lexical scope در جاوا اسکریپت کاربرد زیادی دارد. به این معنی که محدوده دسترسی به متغیرها توسط مکان تعریف آنها در کد تعیین می‌شود. این متغیرها فقط در همان بلوک کد یا بلوکهای تو در تو قابل دسترسی هستند. به عبارت دیگر، متغیری که درون تابع تعریف می‌شود و تنها می‌توان به آن درون همان بلوک یا بلوکهای تودرتو دسترسی پیدا کرد، به حوزه لغوی معروف است.
مثال: در این مثال، متغیر را درون تابع تعریف خواهیم کرد و قصد داریم درون تابع تودرتو به آن دسترسی پیدا کنیم.
function outerFunction() { const outerVariable = "Hello"; function innerFunction() { const innerVariable = "maktabkhooneh"; console.log(`${outerVariable} ${innerVariable}`); } innerFunction();}outerFunction(); |
خروجی مثال فوق به صورت زیر است:
Hello maktabkhooneh
متغیرهای سراسری در HTML
متغیرهای سراسری که با کلمه کلیدی var تعریف می‌شوند، قسمتی از شیء window هستند. شیء window حوزه سراسری در HTML است.
عمر متغیرهای جاوا اسکریپت
چند نکته درخصوص عمر متغیرها در زبان برنامه نویسی جاوا اسکرپیت وجود دارد که دانستن آن برای آموزش برنامه نویسی این زبان الزامی خواهد بود.
- عمر یک متغیر جاوا اسکریپت زمانی شروع می‌شود که تعریف می‌شود.
- زمانی که تابع به پایان می‌رسد، متغیرهای تابع (محلی) پاک می‌شوند.
- زمانی که یک پنجره مرورگر را ببندید، متغیرهای سراسری پاک می‌شوند.
دیگر مفاهیم مرتبط با Scope در جاوا اسکریپت
برای اینکه بهتر متوجه مفهوم scope شوید، نیاز است تا دیگر تعاریف مربوط به متغیرها و حوزه‌های دسترسی در جاوا اسکریپت را بدانید. باید ذکر کنیم که متغیرهای تعریف شده با let، var یا const در جاوا اسکریپت، رفتارهای متفاوتی را در خصوص حوزه‌های دسترسی از خود نشان می‌دهند. در این بخش، تلاش کرده‌ایم تا برخی از پرکاربردترین مفاهیم را ارائه دهیم.
متغیر const در جاوا اسکریپت
متغیرهایی که با const تعریف می‌شوند، دارای حوزه بلوکی (Block scope) هستند. این بدان معناست که تنها در داخل بلوکی که تعریف شده‌اند قابل دسترسی هستند و نمی‌توان آنها را دوباره تعریف یا تغییر داد.
var در جاوا اسکریپت
متغیرهایی که با var تعریف می‌شوند، دارای حوزه تابعی (Function Scope) هستند. این به این معناست که اگر در داخل یک تابع تعریف شوند، تنها در همان تابع قابل دسترسی هستند و اگر خارج از تابع تعریف شوند، در حوزه سراسری قرار می‌گیرند. var متغیرها را به بالای حوزه (Hoisting) می‌برد.
کاربرد let در جاوا اسکریپت
متغیرهایی که با let تعریف می‌شوند، دارای حوزه بلوکی (Block scope) هستند. این متغیرها تنها در داخل بلوک {} که تعریف شده‌اند قابل دسترسی هستند و برخلاف var، به بالای حوزه برده نمی‌شوند.
strict mode در جاوا اسکریپت
strict mode حالت سخت‌گیرانه‌ای است که با فعال کردن آن، برخی از خطاهای رایج جاوا اسکریپت شناسایی می‌شوند و کد ایمن‌تری نوشته می‌شود. در این حالت، مثلاً تعریف متغیر بدون کلمه کلیدی var, let یا const باعث خطا می‌شود.
This در جاوا اسکریپت
کلمه کلیدی this به شیئی اشاره دارد که تابع در آن اجرا شده است. در حوزه‌های مختلف، مقدار this در جاوا اسکریپت می‌تواند متفاوت باشد، مثلاً در یک تابع عادی، this به شیء سراسری اشاره دارد و در یک تابع به عنوان متد یک شیء، به همان شیء اشاره می‌کند.
کلوژر در جاوا اسکریپت
closure در جاوا اسکریپت یک تابع است که به متغیرهای حوزه‌ای که در آن تعریف شده دسترسی دارد، حتی پس از اینکه آن حوزه پایان یافته است. کلوژرها می‌توانند برای ایجاد توابع خصوصی یا حفظ وضعیت در توابع استفاده شوند. در مکتب خونه، در مطالب مجزا در خصوص closure در جاوا اسکریپت صحبت کرده‌ایم.
حوزه‌ی پویا یا Dynamic scope
برخلاف حوزه لغوی یا Lexical scope، حوزه پویا (Dynamic Scope) که در برخی زبان‌های برنامه‌نویسی وجود دارد، محدوده دسترسی به متغیرها بر اساس زنجیره‌ای از فراخوانی‌ها در زمان اجرا تعیین می‌شود.
- نکته: زبان برنامه نویسی جاوا اسکریپت از حوزه پویا استفاده نمی‌کند.
جمع‌بندی
در این مطلب در خصوص حوزه‌ها در جاوا اسکریپت صحبت کردیم. ابتدا با بیانی ساده، مفهوم scope را شرح داده و گفتیم که scope تعیین می‌کند تا هر متغیر جاوا اسکریپت در کدام بخش‌های برنامه، قابل دسترسی خواهد بود. سپس کاربردها و اهمیت scope را ذکر کردیم و نشان دادیم که این مفهوم نقش مهمی در امنیت، خوانایی، سازمان‌دهی و دسترسی متغیرها خواهد داشت.
در بخش‌های دیگر این مطلب، در خصوص انواع Scope در زبان برنامه نویسی جاوا اسکریپت صحبت کردیم. این انواع در سه شاخه‌ی حوزه‌ی سراسری، حوزه‌ی بلوکی و حوزه‌ی تابعی بحث شدند. با ذکر مثال‌های ساده، سعی کردیم تا این حوزه‌ها و تفاوت آنها با یکدیگر را مشخص کنیم.
در انتهای مطلب نیز مفاهیم مشابه برای حوزه‌ها در جاوا اسکریپت را شرح دادیم. برای این منظور، توضیح دادیم که چطور می‌توان متغیرهایی را با let، var یا const تعریف کرد. سپس بیان کردیم که هریک از این انواع متغیرها چه تفاوتی با هم داشته و ویژگی‌های خاص آنها چیست.
شما با یادگیری مفهوم Scope در javascript می‌توانید کدهایی بدون خطا، امن‌تر و حرفه‌ای‌تر را ایجاد کنید. اگر به‌خوبی این مفاهیم را درک کنید، از بروز بسیاری از مشکلات و تداخلات متغیرها در کدهای خود جلوگیری به‌عمل می‌آورید.
رفرنس: geeksforgeeks
