تفاوت var و let و const در جاوااسکریپت

تعریف متغیر با const و var و let در جاوا اسکریپت

بالاخره برای تعریف متفیر از var استفاده کنیم یا Let؟ این سوال اکثرا برنامه نویسانی است که تازه با استاندارد ES6 آشنا شدند و گیج شدند که از کدوم باید استفاده کنند. استاندارد ES2015 یا همان ES6 قابلیت ها و ویژگی های جدید و تازه ای به جاوااسکریپت افزوده است. یکی از این قابلیت ها افزودن دو روش جدید let و const در کنار var که از قبل برای ایجاد متغیر ها در جاوااسکریپت وجود داشت. در این مقاله قصد داریم به صورت تخصصی به تفاوت میان const و var و let بپردازیم، تا با دید بهتری از قابلیت های هرکدام از آن ها بدست می آورید، بتوانید بهترین استفاده را از آن ها داشته باشید.

بهتر است قبل از شروع بررسی هر کدام به صورت جداگانه، به مرور و بررسی مجدد چند مفهوم کلیدی بپردازیم.

آموزش رایگان جاوااسکریپت 

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

حوزه یا دامنه دسترسی متغیر به مکان هایی اشاره دارد که متغیر درون برنامه از آن بخش قابل دسترسی و استفاده است. در جاوااسکریپت دو نوع حوزه کلی با نام های global scope و function scope وجود دارد. متغیر هایی که به صورت سراسری و خارج از توابع تعریف می شوند دارای global scope یا همان دامنه سراسری هستند. متغیر هایی که به صورت محلی تعریف می شوند و به عبارتی داخل تابع هستند، دارای function scope یا دامنه تابعی هستند.

تفاوت این دو حالت به این صورت است که متغیر هایی با دامنه سراسری از هر بخش دلخواه و مورد نظر شما قابل دسترسی است. اما متغیر هایی با دامنه تابعی ( یا محلی تنها از داخل خود تابع در دسترس هستند.

Hoisting

Hoisting فرآیند و مکانیزمی است که متغیرها و توابع تعریف شده را قبل از اجرا شدن برنامه، به بالاترین موقعیت scope خودشان انتقال می دهد. می شود اینطور بیان کرد که دیگر اهمیتی ندارد که متغیر ها و توابع را در چه بخشی Declare خواهید کرد، آنها با بالای scope خودشان در حالت سراسری یا محلی انتقال داده می شوند.

Var

از زمان تولد جاوا اسکریپت، var سنتی ترین روش برای اعلام متغیرها بوده است. متغیرهای اعلان شده دارای محدوده تابع هستند، به این معنی که دامنه آنها به تابعی که در آن مشخص شده اند محدود می شود. دسترسی به متغیری که با استفاده از کلمه کلیدی var در داخل یک بلوک، مانند یک حلقه یا عبارت شرطی، اعلام شده است، همچنان امکان پذیر خواهد بود.

Let

let که در ECMAScript 6 (ES6) اضافه شده است، متغییر let برای تعریف یک متغیر محلی (local variable) با scope بلوکی (block scope) استفاده می‌شود. این به معنی آن است که متغیرهای تعریف شده با let فقط در داخل بلوکی که تعریف شده‌اند قابل دسترسی هستند.

Const

ثابت ها (const)، که متغیرهایی هستند که نمی توانند مقدار اولیه آنها تغییر کند، با استفاده از کلمه کلیدی جدید ES6 const فراخوانی می شوند. Const محدود به بلوکی است که در آن تعریف شده است، مانند let. بنابراین const انتخاب خوبی برای اعلام متغیرهایی است که در حین اجرای یک بلوک کد نباید تغییر کنند.

مشکل Var

قبل از ES6 تنها راه ایجاد متغیر ها درون جاوااسکریپت var بود. در کنار مزیت های استفاده از var مشکلاتی هم در استفاده از آن وجود داشت. به دلیل وجود این مشکلات توسعه دهندگان به فکر ایجاد راهکار های جدید همچون let و const افتادند.

قبل از اینکه به سراغ ویژگی های var برویم بهتر است با مشکل اساسی آن آشنا شویم. تا درک کنیم دلایل ایجاد روش های ایجاد متغیر دیگر چه چیزی بوده است. به مثال زیر توجه کنید:

var greeter = "hello";
var times = 6;
.
.
.
if (times > 5) {
    var greeter = "hi";
]

console.log(greeter)   // "hi"

وقتی متغیری با var تعریف می شود، این امکان وجود دارد که متغیر دیگری با همان نام، با استفاده از var تعریف شود. پس از برقراری شرط، متغیر greeter دوباره تعریف می شود و مقدار آن نیز متفاوت می گردد. اگر این کار را خودمان متناسب با نیازمان انجام داده باشیم مشکلی ندارد. اما در صورتی که متغیر greeter قبلا درون کد ما تعریف شده باشد و ما از وجود آن بی خبر باشیم، احتمال اینکه با مشکل و باگ مواجه شویم بسیار زیاد است. و ردیابی این مشکل نیز کار راحتی نیست.

تفاوت های بین var و let و const

دامنه تمام متغیر های تولید شده با کلید واژه var محدود به توابع یا همان function scope است. به این معنا که این متغیر ها در تابع مختص خود در دسترس برنامه نویس هستند. اما let دامنه تعریف Block Scope دارد. به این معنا که وقتی متغیری با کلید واژه let ایجاد شده باشد، داخل بلوکی که در آن تعریف شده و تمامی بلوک های تو در توی آن قابل استفاده و دسترسی خواهد بود.

تفاوت var با let

پس دقت کنید که در هنگام استفاده از let ، تلاش برای دسترسی به خارج از بلوکی که متغیر در آن ایجاد شده است، باعث ایجاد reference error خواهد شد. به این دلیل که let دارای دامنه تابعی یا function scope نیست. در حالی که این قضیه برای کلید واژه var صدق نمی کند چون block scope نیست و function scope است.

تفاوت let با const

Const تقریبا مشابه let است با این تفاوت که وقتی مقداری را با استفاده از کلید واژه const به یک متغیر منتسب کردید، دیگر نمی توانید به همان متغیر یک مقدار جدید نسبت دهید. دقت داشته باشید که وقتی یک متغیر با const ایجاد و مقدار دهی می گردد، به این معناست که نمی توان مقدار دیگری به آن نسبت داد اما می توان مشخصات دیگر آن را تغییر داد. در واقع با استفاده از const به همه کسانی که با کد شما مواجه می شوند اعلام می کنید که این متغیر نباید تغییر کند، ولی در صورتی که متغیر قابلیت تغییر داشته باشد، می توانید از var و let استفاده کنید.

Function scope یا Block scope

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

Const و let دارای block scope هستند و اگر بخواهید به متغیری با این حالت، قبل از فرارسیدن محل اعلانش دسترسی پیدا کنید، با خطای ReferenceError مواجه می شوید.

در نهایت تفاوت بین let و const این است که وقتی مقداری به const انتساب یابد، دیگر نمی‌توان مقدار دیگری به آن انتساب داد درحالی که در مورد let این کار قابل انجام است.

بالاخره از کدوم استفاده کنیم؟ let یا const یا var

از let یا var یا const استفاده کنیم؟

با توجه به استاندارد اکما اسکریپت و از ورژن ES6 به بعد استاندارد تعریف متغیر به ترتیب زیر است:

1. به صورت پیش فرض برای تعریف متغیر در جاوااسکریپت از const استفاده کنید.
2. اگر میخواهید مقدار متغیر در ادامه کد تغییر کنه از let استفاده کنید.
3. اگر میخواهید کد غیر استاندارد بنویسید از var استفاده کنید.

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

در جاوا اسکریپت مدرن، به طور کلی توصیه می‌شود از var به دلیل منسوخ شدن آن استفاده نکنید. از let برای متغیرهایی که باید در محدوده خود تخصیص داده شوند استفاده کنید. از const برای متغیرهایی که باید در طول برنامه ثابت باشد و تغییر نمیکند استفاده کنید.