محدوده (scope) در JS
محدوده متغیر، محدوده در دسترس بودن متغیر را مشخص میکنند.
متغیر ها در جاوا اسکریپت از نظر محدوده (scope) به سه دسته تقسیم می شوند :
- محدوده بلوکی (block scope)
- محدوده تابع (function scope)
- محدوده سراسری (global scope)
در ادامه ی فصل به موارد بالا بیشتر می پردازیم.
محدوده بلوکی (Block Scope) در JS
تا قبل از کنفرانس ES6 (2015) متغیر های جاوا اسکریپت فقط از دو محدوده زیر استفاده می کردند.
- محدوده تابع (function scope)
- محدوده سراسری (global scope)
و بعد از ES6(2015) و با معرفی دو کلمه ی کلیدی let و const محدوده بلوکی (Block scope) نیز معرفی شد.
نکته: متغیر هایی که با let و const در یک بلوک تعریف می شوند، خارج از بلوک در دسترس نخواهند بود.
نکته: زمانی که یک براکت مجعد {} نوشته می شود، اصطلاحا یک بلوک کد (مجموعه کد) ساخته شده است.
<script>
{ // شروع بلوک کد
var x = "pnldev";
let y = "pnldev";
const z = "pnldev";
console.log(x); // چاپ می شود
console.log(y); // چاپ می شود
console.log(z); // چاپ می شود
} // پایان بلوک کد
console.log(x); // چاپ می شود
console.log(y); // ارور می دهد
console.log(z); // ارور می دهد
</script>
نکته: متغیر هایی که با کلمه ی کلیدی var داخل یک بلوک ساخته می شوند، در بیرون از بلوک هم قابلیت دسترسی دارند.
محدوده تابع (Function Scope) در JS
متغیر هایی که در داخل یک تابع تعریف می شوند، دارای محدوده تابع (function scope) هستند.
متغیر های تعریف شده درون تابع، فقط داخل تابع در دسترس هستند.
متغیر های ساخته شده با var، let، const وقتی در تابع تعریف می شوند، عملکرد یکسانی دارند، و از بیرون تابع نمی توان به آن ها دسترسی پیدا کرد.
نحوه ی ساخت متغیر با محدوده تابع:
<script>
function myFunction() {
var x = "pnldev";
let y = "pnldev";
const z = "pnldev";
console.log(x); // چاپ می شود
console.log(y); // چاپ می شود
console.log(z); // چاپ می شود
}
myFunction();
console.log(x); // ارور می دهد
console.log(y); // ارور می دهد
console.log(z); // ارور می دهد
</script>محدوده سراسری (Global Scope) در JS
در جاوا اسکریپت اگر متغیری خارج از محدوده تابع و بلوک، در بدنه ی اصلی تگ <script> قرار بگیرد، محدوده آن سراسری (Global scope) می شود.
متغیر های اعلام شده با var, let ,const زمانی که خارج یک تابع هستند، عملکرد یکسانی دارند.
<script>
var x = "pnldev";
let y = "pnldev";
const z = "pnldev";
function myFunction(){
console.log(x); // چاپ می شود
console.log(y); // چاپ می شود
console.log(z); // چاپ می شود
}
myFunction();
console.log(x); // چاپ می شود
console.log(y); // چاپ می شود
console.log(x); // چاپ می شود
</script>متغیر های اعلام شده با var, let ,const زمانی که خارج یک بلوک هستند، عملکرد یکسانی دارند.
<script>
var x = "pnldev";
let y = "pnldev";
const z = "pnldev";
{
console.log(x); // چاپ می شود
console.log(y); // چاپ می شود
console.log(x); // چاپ می شود
}
console.log(x) // چاپ می شود
console.log(y) // چاپ می شود
console.log(x) // چاپ می شود
</script>><!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
let name = "pnldev";
function myFunction() {
document.getElementById("test").innerHTML = "نمایش دادن " + name ;
}
myFunction();
</script>
</body>
</html>
خلاصه درس
در این فصل با سه نوع scope زیر آشنا شدیم:
- محدوده بلوکی (block scope)
- محدوده تابع (function scope)
- محدوده سراسری (global scope)
| - | var | let | const |
| محدوده بلوکی - block scope | ندارد | دارد | دارد |
