حوزه تعریف متغیر در جاوااسکریپت و شرح کامل Hoisting

حوزه تعریف متغیر ( Variable Scope )

متغیرهای محلی (Local Variables)

var name = "Majidonline";
​
​function showName () {
var name = "wsschool"; // متغیر محلی و قابل دسترسی فقط درون این تابع
console.log (name); // wsschool
}
console.log (name); // majidonline: متغیر جامع (global)

var name = "Majidonline";
​// در اینجا ما هیچ حوزه‌ای رو برای متغیر تعریف نکرده ایم و یک متغیر جامع هست
​if (name) {
name = "Wsschool"; // مقدار جدید رو درون متغیر در اینجا عوض کردیم
console.log (name); // Wsschool
}
​
​// همانطور که مشاهده می‌کنید در اینجا هم بعد از تغییر مقدار جدید رو نمایش میده چونکه یک متغیر جامع هست
console.log (name); // Wsschool

اگر شما متغیرهای محلی را تعریف نکنید، براتون مشکل درست میشه!

var name = "Majidonline";
​
​function showCelebrityName () {
console.log (name);
}
​
​function showOrdinaryPersonName () {
name = "Wsschool";
console.log (name);
}
showCelebrityName (); // Majidonline
​
​// name is not a local variable, it simply changes the global name variable​
showOrdinaryPersonName (); // Wsschool
​
​// The global variable is now Johnny Evers, not the celebrity name anymore​
showCelebrityName (); // Wsschool
​
​// راه حل این موضوع اینه که متغیر محلی را به صورت زیر تعریف کنیم
​function showOrdinaryPersonName () {
var name = "Wsschool"; // اکنون این متغیر، یک متغیر محلی هست و فقط در حوزه تعریفش قابل دسترسی می‌باشد
console.log (name);
}

متغیرهای محلی در توابع بر متغیرهای جامع اولویت دارند.

var name = "Majidonline";
​
​function users () {
// اینجا یک متغیر به صورت محلی تعریف شده و با متغیر جامع نامشون یکسانه ولی متغیر محلی درون این تابع اولویت بیشتری دارد
​var name = "Wsschool";
console.log (name);
}
users (); // Wsschool

متغیرهای جامع (Global Vsriables)

var myName = "Majidonline";
​
​// or 
firstName = "Majidonline";
​
​// or ​
​var name; //​
name;

function showAge () {
// Age is a global variable because it was not declared with the var keyword inside this function​
age = 94;
console.log(age);// ​
}
​
showAge (); // 94​
​
​// با توجه به اینکه متغیری که تعریف کردیم یک متغیر جامع هست در این قسمت هم در دسترسه و میتونیم ازش استفاده کنیم
console.log(age); // 94

// هر دو متغیر تعریف شده متغیرهای جامع هستند حتی با وجود اینکه متغیر دوم درون بلوک قرار دارد
​var firstName = "Wsschool";
{
​var firstName = "Majidonline";
}
​
​// آخرین مقدار متغیر بر روی مقدار اول اوررایت می‌شود
console.log (firstName); // Majidonline

و مثالی جذابتر

for (var i = 1; i <= 10; i++) {
console.log (i); // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10​
};
​
​// The variable i is a global variable
// متغیر برای تابع زیر آخرین مقداری و که داره نمایش میده
​function aNumber () {
console.log(i);
}
​// متغیر قبل از اینکه از حلقه خارج بشه مقدار 11 رو داره و بعد از چک کردن شرط، چونکه شرط حلقه برقرار نیست از حلقه خارج میشه
aNumber (); // 11​

متغیرهای setTimeout از متغیرهای جامع () استفاده می‌کنند!

//The use of the "this" object inside the setTimeout function refers to the Window object, not to myObj​
​
​var highValue = 200;
​var constantVal = 2;
​var myObj = {
  highValue: 20,
  constantVal: 5,
  calculateIt: function () {
     setTimeout (function () {
         console.log(this.constantVal * this.highValue);
     }, 2000);
}
}
​// The "this" object in the setTimeout function used the global highValue and constantVal variables
​
myObj.calculateIt(); // 400​
​// این موضوع نکته ی مهمی هست که لازمه به یاد داشته باشیم

حوزه جامع (Global Scope) را با متغیرهای بیهوده نامرتب و غیرخوانا نکنید!

// دو متغیری که در حوزه میدان جامع یا گلوبال تعریف شده اند که در واقع نباید اینجا باشند
​var firstName, lastName;
​
​function fullName () {
console.log ("Full Name: " + firstName + " " + lastName );
}

// تعریف متغیرها به صورت محلی 
​
​function fullName () {
var firstName = "majid", lastName = "online";
​
console.log ("Full Name: " + firstName + " " + lastName );
}

متغیرهای Hoisting

function showName () {
console.log ("First Name: " + name);
​var name = "Ford";
console.log ("Last Name: " + name);
}
​
showName ();
​// First Name: undefined​ : دلیل این موضوع اینه که ما تاکید کردیم که متغیر به بالاترین سطح تابع منتقل میشه ولی مقدارش بعد از تعریف در دسترسه 
​// Last Name: Ford​
​
​// در بخش زیر مشخص میکنه که موتور جاوااسکریپت به چه نحوی کدها رو پردازش میکنه :​
​
​function showName () {
var name; // name is hoisted (توجه کنید که مقدارش نامشخصه تا وقتی که مقداری بهش نسبت داده بشه)​
console.log ("First Name: " + name); // First Name: undefined​
​
name = "Ford"; // مقداری بهش نسبت داده شد
​
​// هم اکنون مقدار متغیر در دسترسه
console.log ("Last Name: " + name); // Last Name: Ford​
}

تعریف تابع اورراید( Overrides ) میشه روی تعریف متغیرها، زمانی‌که Hoisting صورت می‌گیره !

// هم متغیر و هم تابع اسم یکسانی دارند
​var myName;
​function myName () {
console.log ("Majidonline");
}
​
​// The function declaration overrides the variable name​
console.log(typeof myName); // function

​var myName = "Majidonline"; // چون به متغیرمون مقدار داده ایم اولویتش بیشتر میشه نسبت به تعریف تابع
​
​function myName () {
console.log ("Majidonline");
}
​
console.log(typeof myName); // string