حوزه (Scope) در جاوا اسکریپت

حوزه (Scope) در جاوا اسکریپت تعیین می‌کند که متغیرها، توابع و اشیا در کدام بخش از کد قابل دسترسی هستند. انواع مختلفی از حوزه در جاوا اسکریپت وجود دارد:

1. حوزه سراسری (Global Scope)

متغیرهایی که خارج از هر تابع یا بلاک تعریف می‌شوند، دارای حوزه سراسری هستند.
این متغیرها از هر جای کد قابل دسترسی هستند

let globalVar = “من یک متغیر سراسری هستم”;

function test() {

console.log(globalVar); // قابل دسترسی

}

test();

console.log(globalVar); // همچنان قابل دسترسی

2. حوزه تابع (Function Scope)

متغیرهایی که داخل یک تابع تعریف می‌شوند، فقط در همان تابع قابل دسترسی هستند.
خارج از تابع، این متغیرها در دسترس نیستند.

3. حوزه بلوک (Block Scope) – (ES6)

با معرفی let و const در ES6، متغیرهای داخل {} فقط در همان بلاک قابل دسترسی هستند.

{

let blockScopedVar = “من داخل یک بلاک هستم”;

console.log(blockScopedVar); // قابل دسترسی درون بلاک

}

console.log(blockScopedVar); // ❌ خطا: blockScopedVar تعریف نشده است

⚠️ اما var از حوزه بلوک پشتیبانی نمی‌کند:

if (true) {

var noBlockScope = “من از var استفاده می‌کنم”;

}

console.log(noBlockScope); // ✅ قابل دسترسی خارج از بلاک (حوزه بلوک ندارد)

4. حوزه لغوی (Lexical Scope) – (Closures)

توابع داخلی می‌توانند به متغیرهای تعریف‌شده در توابع بیرونی دسترسی داشته باشند.
این ویژگی، پایه Closures در جاوا اسکریپت است.

function outerFunction() {

let outerVar = “من از تابع بیرونی هستم”;

function innerFunction() {

console.log(outerVar); // قابل دسترسی به دلیل حوزه لغوی

}

innerFunction();

}

outerFunction();

5. حوزه ماژول (Module Scope) – (ES6)

در ES6، فایل‌هایی که از export و import استفاده می‌کنند، دارای حوزه ماژول هستند.
متغیرهای تعریف‌شده در یک ماژول، به صورت سراسری در دسترس نیستند.

📌 مثال:
module1.js

export const myVar = “من در یک ماژول هستم”;

main.js

import { myVar } from ‘./module1.js’;

console.log(myVar); // ✅ قابل دسترسی چون import شده است

6. حوزه پویا (`this` Context)

مقدار this بستگی به نحوه فراخوانی تابع دارد.

console.log(this); // در حوزه سراسری، `this` به `window` (در مرورگر) یا `global` (در Node.js) اشاره دارد.

function showThis() {

console.log(this);

}

showThis(); // در حالت غیر strict، `this` به شیء سراسری اشاره دارد.

👉 توابع پیکانی (Arrow Functions) دارای this مستقل نیستند و مقدار this را از محیط اطراف خود به ارث می‌برند:

const obj = {

name: “JS”,

arrowFunc: () => console.log(this), // `this` به window/global اشاره دارد

normalFunc: function() { console.log(this); } // `this` به obj اشاره دارد

};

obj.arrowFunc(); // مقدار `this`، window/global

obj.normalFunc(); // مقدار `this`، obj

نکات کلیدی

✅ از let و const برای حفظ حوزه بلوک استفاده کنید.
✅ از توابع برای ایجاد حوزه تابع استفاده کنید.
✅ حوزه لغوی را برای درک Closures بشناسید.
✅ مقدار this بر اساس نحوه فراخوانی تابع تغییر می‌کند.
✅ ماژول‌ها به سازماندهی بهتر حوزه کمک می‌کنند.

اگر نیاز به توضیح بیشتر درباره هر بخش دارید، بپرسید! 🚀

حوزه (Scope) در جاوا اسکریپت