var در جاوا اسکریپت چیست؟ – از کاربرد تا نحوه استفاده + مثال و کد

«متغیر» (Variable) محفظه‌ای است که داده‌ها را ذخیره می‌کند و در هر زمان می‌توان آن را تغییر داد. در زبان برنامه نویسی جاوا اسکریپت به هر متغیر نامی منحصر به فرد اختصاص داده می‌شود. در جاوا اسکریپت، متغیرها مانند مخزن‌هایی عمل می‌کنند که داده‌های دائماً در حال تغییر را در خود نگه می‌دارند. هدف از انتشار این مطلب آموزشی از «مجله فرادرس» ارائه درک جامعی از var در جاوا اسکریپت، از جمله زمان و نحوه استفاده از آن‌ها، شیوه نام‌گذاری و غیره است. در مطلب پیشِ رو عملکرد درونی متغیرهای جاوا اسکریپت پوشش داده خواهد شد و ملاحظات کلیدی هنگام استفاده از آن‌ها مورد بحث قرار خواهد گرفت. علاوه بر این، قوانین حاکم بر متغیرها، شناسه‌ها و کلمات کلیدی نیز پوشش داده می‌شوند. در مطلب پیش رو منظور از var در جاوا اسکریپت همان «Variable» (متغیر) در جاوا اسکریپت است.

var در جاوا اسکریپت چیست ؟

متغیرهای جاوا اسکریپت محفظه‌هایی هستند که مقادیر داده‌ای را در خود نگه می‌دارند که می‌توان آن‌ها را در حین اجرای برنامه تغییر داد. اصطلاح «variable» به این معنی است که مقادیر ذخیره شده می‌توانند تغییر کنند یا به‌روز شوند. در زبان‌های برنامه نویسی مختلف مانند C/C++»‎» یا «جاوا»، متغیرها به طور گسترده مورد استفاده قرار می‌گیرند. آن‌ها به عنوان نام‌های نمادین یا مکان‌یابی برای مقادیر درون برنامه کاربردی عمل می‌کنند.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

برای مثال، تصور کنید سبد خریدی در دست دارید و در حال خرید اقلام مورد نیاز از فروشگاهی هستید. در این قیاس، سبد خرید نوعی var در جاوا اسکریپت را نشان می‌دهد. اسم این متغیر برای مثال «yourCart» است که به عنوان شناسه این متغیر خاص عمل می‌کند. همانطور که اقلام انتخاب و در سبد خرید ذخیره می‌شوند، مقدار این متغیر به‌روز خواهد شد. مواردی که در سبد خرید قرار می‌گیرند، داده‌های مرتبط با متغیر هستند. کاربر این امکان را دارد که در صورت نیاز مواردی را از سبد خرید خود اضافه یا حذف کند.

این مفهوم به موازات نحوه عملکرد var در جاوا اسکریپت است. آن‌ها می‌توانند انواع مختلفی از مقادیر داده مانند اعداد، رشته‌ها (استرینگ | String) و موارد دیگر را ذخیره کنند. متغیر را می‌توان با استفاده از ۳ کلمه کلیدی «Var »، «Let » و «Const » ایجاد کرد.

محدوده متغیرها در جاوا اسکریپت

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

سه نوع var در جاوا اسکریپت وجود دارند که به شرح موارد زیر هستند:

• متغیرهای سراسری: این متغیرها دامنه سراسری یا جهانی دارند، به این معنی که می‌توانند در هر جایی از کدهای جاوا اسکریپت تعریف شوند. آن‌ها در سراسر برنامه در دسترس هستند.
• متغیرهای محلی: متغیرهای محلی فقط در تابعی که در آن تعریف شده‌اند قابل مشاهده هستند. آن‌ها خارج از آن تابع خاص مهم نیستند.
• متغیرهای بلوک: متغیرهای بلوکی دارای محدوده بلوکی هستند، به این معنی که آن‌ها در بلوکی محصور شده به وسیله { } تعریف می‌شوند، نه لزوماً در تابعی خاص. آن‌ها با استفاده از کلمات کلیدی Letو Constدر برنامه معرفی می‌شوند که در «ECMAScript 2015» معرفی شدند.

در جدول زیر مقایسه‌ای بین متغیرهای سراسری و محلی جاوا اسکریپت آورده شده دارد:

به دلایل زیر هنگام استفاده از متغیرهای سراسری در برنامه باید احتیاط کرد:

• تعیین اینکه کدام توابع جاوا اسکریپت از متغیرهای سراسری استفاده می‌کنند، ممکن است دشوار باشد.
• متغیرهای سراسری در مقایسه با متغیرهای محلی به فضای حافظه بیشتری نیاز دارند.
• چندین تابع با استفاده از متغیری سراسری می‌توانند سرعت برنامه را کاهش دهند.
• با استفاده از متغیرهای سراسری، اشکال‌زدایی می‌تواند چالش برانگیز و غیر قابل اعتماد شود.
• استفاده از متغیرهای سراسری انعطاف‌پذیری برنامه را کاهش می‌دهد، زیرا تغییر متغیر ممکن است نیاز به تغییر چندین بخش از کد داشته باشد.

نکته: توصیه می‌شود استفاده از متغیرهای سراسری به صورت حداقلی باشد و در عوض به متغیرهای محلی برای سازمان‌دهی بهتر کد و قابلیت نگهداری تکیه کرد.

اعلان متغیر در جاوا اسکریپت

در جاوا اسکریپت از ۳ کلمه کلیدی زیر برای اعلان متغیر استفاده می‌شود:

• «Var»
• «Let»
• «Const»

در ادامه ادامه این مطلب از «مجله فرادرس» هر کدام از روش‌های اعلان مذکور با جزئیات مورد بررسی قرار خواهند گرفت.

دستور var برای اعلان متغیر

دستور Varبرای اعلان متغیر استفاده می‌شود و به صورت اختیاری آن را با مقداری دلخواه، مقداردهی اولیه می‌کند. متغیرهای اعلان شده با Varمی‌توانند دوباره تخصیص یا تعریف شوند. اگر متغیری دوباره اعلان شود، ارزش خود را از دست نخواهد داد.

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا در فرادرس

کلیک کنید

«سینتکس» (Syntax) اعلان متغیر با استفاده از Varبه صورت زیر است:

1var varName; //without initializing
2var varName = “DataFlair”; //initialized with a string

با جدا کردن آن‌ها با کاما می‌توان چندین متغیر را در یک خط اعلام کرد:

1var var1 = 12, var2 = “DataFlair”,...;

مثال زیر نحوه اعلان متغیر در جاوا اسکریپت را با کلمه کلیدی Varنشان می‌دهد:

1<html>
2  <body>
3    <script>
4      var variable1 = "DF";
5      document.write("Variable's value is " + variable1);
6      document.write("<br>After redeclaration,<br>");
7      var variable1 = "DataFlair";
8      document.write("Variable's value is " + variable1);
9    </script>
10  </body>
11</html>

خروجی مثال فوق به صورت زیر است:

در جاوا اسکریپت، تمام اعلان‌ها، از جمله اعلان‌های متغیر، قبل از اجرای برنامه پردازش می‌شوند. این رفتار به «بالا بردن var در جاوا اسکریپت» (Hoisting در جاوا اسکریپت) معروف است. به این معنی که اعلان متغیر در هر نقطه از کدها، معادل اعلان آن در بالای کد است. در نتیجه، جاوا اسکریپت اجازه می‌دهد تا متغیرها قبل از اعلان واقعی استفاده شوند. این کار به جلوگیری از اعلان مجدد ناخواسته متغیرها کمک کرده و درک و نگهداری کدها را آسان‌تر می‌کند.

در حالی که ویژگی «var Hoisting» وجود دارد، اما این قابلیت به ندرت به وسیله برنامه نویسان استفاده می‌شود. در عوض، آن‌ها بیشتر از کلیدواژه‌های «Let» یا «Const» برای اعلان‌های متغیر استفاده می‌کنند. این کلمات کلیدی محدوده بلوک را فراهم خواهند کرد و استفاده از متغیرهای ساختار یافته‌تری را اعمال می‌کنند. این کار احتمال خطا را کاهش داده و خوانایی کدها را افزایش می‌دهد. بنابراین، توصیه می‌شود کاربران استفاده از «Let» یا «Const» را برای اعلان‌های متغیر در اولویت قرار دهند و قبل از استفاده از آن‌ها در کدهای جاوا اسکریپت، بهترین شیوه‌های اعلان var در جاوا اسکریپت را یاد بگیرند.

اعلان متغیر با let در جاوا اسکریپت چگونه است؟

کلمه کلیدی let برای اعلان متغیرها در جاوا اسکریپت مشابه کلمه کلیدی var استفاده می‌شود. با این حال، متغیرهای اعلان شده با let محدودیت‌های Scope یا محدوده دارند. آن‌ها را نمی‌توان در محدوده یکسان مجدداً اعلان کرد و تلاش برای انجام این کار منجر به «خطای نحوی» (Syntax Error) خواهد شد.

فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا اسکریپت در فرادرس

کلیک کنید

محدوده متغیرهای let، بلوک یا بلوک‌های تو در تویی هستند که در آن تعریف شده‌اند. اگر کاربری سعی کند به متغیر let در خارج از بلوک آن دسترسی پیدا کند، «خطای مرجع» (ReferenceError) دریافت خواهد کرد.

1let varName1; //without initializing
2let varName1 = “DataFlair” // initialized with a string

مثال زیر برای درک توضیحات بالا مهم است:

1<html>
2  <body>
3    <script>
4      {
5        let variable; // Variable declaration
6        document.write(variable + "<br>"); // Accessed inside the block
7      }
8      document.write(variable + "<br>"); // Cannot access outside the block
9      let variable2 = "DF"; // Variable declaration and initialization
10      document.write("Variable's value is " + variable2);
11      document.write("<br>After redeclaration,<br>");
12      // let variable2 = "DataFlair"; // Variable redeclared (SyntaxError)
13      // document.write("Variable's value is " + variable2); // Uncaught SyntaxError
14    </script>
15  </body>
16</html>

خروجی مثال بالا به صورت زیر است:

در کدهای بالا، اعلان متغیر با Letمنجر به ReferenceError شد. حال در ادامه، همین کدهای بالا را این بار با اعلان کردن مقدار اولیه به عنوان «نظر» (کامنت | Comment) اجرا می‌کنیم:

1<html>
2  <body>
3
4    <script>
5    {
6        let variable; //variable declaration
7      document.write(variable + "</br>"); //accessed inside the block
8      }
9                        //document.write(variable + "</br>"); //cannot access outside the block
10                        let var2 = "DF"; //variable declaration and initialization
11                        document.write("Variable's value is " + var1);
12                        document.write("</br>After redeclaration,</br>");
13                        let var2 = "DataFlair"; //variable redeclared
14                        document.write("Variable's value is " + var1); //Uncaught SyntaxError
15    </script>
16
17  </body>
18</html>

این بار خروجی مثال بالا به صورت زیر خواهد بود: