بررسی کامل تفاوت let و var در جاوا اسکریپت

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

تفاوت let و var در جاوا اسکریپت اگر در حوزه برنامه نویسی وب فعالیت داشته باشید، قطعا با زبان جاوا اسکریپت کار کرده اید و همان طور که می دانید در تمام زبان های برنامه نویسی مفهومی به اسم متغیر (Variable) وجود دارد که نحوه تعریف آن در هر زبان متفاوت بوده و وابسته به سینتکس آن زبان است.
برای تعریف متغیر در زبان جاوا اسکریپت به دلخواه می توان از کلمات کلیدی var و let استفاده کرد‌ اما تفاوت هایی بین آن ها وجود دارد که اگر از این تفاوت ها اطلاع نداشته باشید، ممکن است در پروژه های بزرگ با مشکل مواجه شوید.
در این مقاله از آکادمی آموزش برنامه نویسی سبزلرن به 4 مورد از مهم ترین تفاوت های var, let و const در جاوا اسکریپت می پردازیم.

قابلیت Hoisting، اولین تفاوت var و let

همان طور که اطلاع دارید کلمات Hoist و Hoisting یکی از مباحث جاوا اسکریپت بوده و به معنی بالا بردن می باشند.
منظور از Hoisting یا همان بالا بردن این است که وقتی شما کدی را در خط 4 تعریف می کنید، مرورگر هنگام اجرای فایل شما آن خط را بالا برده و به قبل تر از خط 4 می رساند.
متغیر هایی که با کلمه کلیدی var تعریف می شوند، از ویژگی Hoisting پیروی می کنند.
در این حالت شما می توانید قبل از تعریف متغیر، از آن استفاده کنید.
به عنوان مثال در خط 2 از متغیری به اسم number استفاده کرده و در خط 4 آن را تعریف کنید! (مگر می شود قبل از تعریف متغیر از آن استفاده کرد؟!)
به کد زیر دقت کنید:

num1 = 10
console.log(num1) // 10
var num1

همان طور که مشاهده می کنید به کمک خط 2 مقدار 10 در کنسول نمایش داده می شود.
متغیر num1 قبل از تعریف شدن در خط 3، در خط 2 مورد استفاده قرار گرفته است.
در این حالت اصطلاحا گفته می شود خط سوم Hoisting شده است، یعنی بالا رفته است.

اما اگر همین متغیر به جای var با کلمه کلیدی let تعریف شده بود، از ویژگی Hoisting پیروی نمی کرد و در نتیجه ما نمی توانستیم در خط 2 (قبل از تعریف num1) از آن استفاده کنیم.
برای درک بهتر به کد زیر توجه کنید:

num1 = 12
console.log(num1) // Error
let num1

در این حالت چون که let از ویژگی Hoisting پیروی نمی کند، کد های خط سوم در همان خط 3 باقی مانده و بعد از اجرا شدن خط 2 اجرا می شود، یعنی کد های خط 3 به بالاتر منتقل نمی شوند. به همین دلیل در خط 2 برای نمایش متغیر num1 با Error مواجه می شویم.

ویژگی ReDecluration، دومین تفاوت var و let

یکی دیگر از مهم ترین تفاوت های var و let قابلیت ReDecluration است. کلمه Declurate یعنی تعریف کردن، اعلام کردن و ReDeclurate یعنی تعریف مجدد.
وقتی یک متغیری را تعریف می کنیم، اصطلاحا آن را Declurate می کنیم و وقتی همان متغیر را دوباره تعریف می کنیم یعنی آن را ReDeclurate (تعریف دوباره، تعریف مجدد) کردیم.
متغیر هایی که با کلمه کلیدی var تعریف می شوند، از این قابلیت برخوردار هستند و می توانند دوباره تعریف شده و مقدار دهی شوند اما متغیر هایی که با کلمه کلیدی let تعریف می شوند از این قابلیت برخورداد نیستند و اگر آن ها را دوباره تعریف کنیم، با خطا مواجه می شویم.

به تکه کد زیر توجه کنید:

var num1 = 12
console.log(num1) // 12

var num1 = 24
console.log(num1) // 24

let num2 = 12
console.log(num2) // 12

let num2 = 24
console.log(num2) // Error

همان طور که مشاهده می کنید متغیر num1 را دو بار تعریف کردیم و در هر دفعه تعریف بدون هیچ مشکلی آن را در console نمایش دادیم.
اما برای متغیر num2 که با let تعریف کردیم، اجازه نداریم آن را دوباره تعریف کنیم، در غیر این صورت با Error مواجه می شویم.

پس یکی دیگر از تفاوت های var و let در جاوا اسکریپت، قابلیت تعریف دوباره آن ها است.

محدودیت Scope، سومین تفاوت var و let

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

به عنوان مثال متغیری که داخل یک تابع تعریف می شود، فقط به داخل تابع محدود است و خارج از تابع نمی توانیم به آن دسترسی داشته باشیم. در همچین حالتی گفته می شود متغیر دارای local scope (ناحیه محلی) می باشد. اما اگر متغیری در root صفحه مورد نظر تعریف شود، اصطلاحا Global Scope است و در سرتاسر آن صفحه قابل دسترسی و استفاده است.

متغیر هایی که با کلمه کلیدی var تعریف می شوند، به طور پیش فرض به صورت Global Scope تعریف می شوند اما متغیر هایی که با کلمه let تعریف می شوند، همیشه و همیشه بدون استثنا محدود به scope و ناحیه خودشان هستند و در خارج از ناحیه خود قابل دسترسی و استفاده نیستند.

به تکه کد زیر توجه کنید:

var num1 = 10

{
    var num1 = 20
    console.log(num1) // 20
}

console.log(num1) // 20

همان طور که مشاهده می کنید ابتدا یک متغیر به اسم num1 در root صفحه دلخواهمان تعریف کردیم و سپس توانستیم داخل Scope (منظور همان آکُلادها است.) دیگر به آن دسترسی پیدا کرده و حتی مقدار آن را تغییر دهیم.
اما اگر متغیر num1 با کلمه کلیدی let تعریف شده بود، داخل scope نمی توانستیم مقدار آن را تغییر دهیم.برای درک بهتر به تکه کد زیر توجه کنید:

let num1 = 10

{
    let num1 = 20
    console.log(num1) // 20
}

console.log(num1) // 10

این بار متغیر num1 را با کلمه کلیدی num1 تعریف کردیم و همان طور که مشاهده می کنید یک متغیر به اسم num1 داخل root صفحه و یک متغیر با همین اسم داخل Scope تعریف کرده ایم. در حالی که متغیر num1 که داخل Scope قرار دارد، هیچ ارتباطی به num1 خارجی ندارد.

مقدار متغیرِ num1 در Scope برابر با 20 بوده و متغیرِ num1 که داخل root صفحه تعریف شده است، مقدار 10 را دارد.
این طور می توان گفت که متغیری که داخل Scope تعریف شده است، محدود به داخل همان Scope بوده و در خارج از آن قابل دسترسی نیست و به متغیر num1 که خارج از آن تعریف شده است، هیچ ارتباطی ندارد. تفاوت let و var در جاوا اسکریپت

کلمه کلیدی const در جاوا اسکریپت

کلمه const یکی دیگر از کلمات کلیدی جاوا اسکریپت است که برای تعریف Variable استفاده می شود. کلمه const مخفف constant بوده و به معنی ثابت می باشد.
یعنی اگر قصد داشته باشید متغیری را با کلمه کلیدی const تعریف کنید، به صورت ثابت تعریف می شود و شما در طی پروژتون به هیچ وجه نمی توانید مقدار داخل آن را تغییر دهید.
شاید کمی سردرگم شده باشید! مگر می شود یک متغیری ثابت باشد! کلمه متغیر یعنی چیزی که در حال تغییر باشد اما const یعنی ثابت!
پس از این به بعد به variable هایی که با کلمه کلیدی const تعریف می شوند متغیر نمی گوییم، بلکه آن ها را با اسم ثابت می شناسیم.

به تکه کد زیر توجه کنید:

const userAge = 21

userAge = 22 // TypeError

همان طورکه مشاهده می کنید، اگر یک ثابت را با کلمه کلیدی const تعریف کنید و بخواهید مقدار آن را تغییر دهید با Type Error مواجه می شوید. تفاوت let و var در جاوا اسکریپت

ثابت ها زمانی تعریف و استفاده می شوند که قصد داشته باشیم اطلاعات مورد نظرمان را در طی پروژه تغییر ندهیم، مثل لینک Api یا ApiKey یا مرچنت کد زرین پال برای ایجاد درگاه بانکی و … .
برای همچین اطلاعاتی که قصد نداریم مقدار آن ها را تغییر دهیم، با const تعریفشان می کنیم تا حتی به اشتباه و اتفاقی مقدار آن ها تغییر پیدا نکنند و به مشکل نخوریم.
ثابت ها در مقایسه با متغیر هایی که با کلمه کلیدی let تعریف می شوند، هیچ تفاوتی به جز ثابت بودنشان ندارند. یعنی 3 ویژگی پیروی نکردن از Hoisting، دارا نبودن قابلیت ReDecluration و محدود بودن به Scope برای ثابت ها نیز وجود دارند.

پس یکی دیگر از تفاوت های var, let و const در جاوا اسکریپت قابلیت ReAssignable بودن آن ها است. کلمه Assign به معنی اختصاص دادن (در حوزه برنامه نویسی به معنی مقداردهی کردن و اختصاص دادن یک مقدار به متغیر دلخواه است) بوده و کلمه ReAssignable به معنی قابل مقدار دهی دوباره بودن است.
متغیر هایی که با کلمه کلیدی var و let تعریف می شوند ReAssignable و قابل مقداردهی دوباره هستند اما ثابت ها همچین قابلیتی ندارند.

نکته بسیار مهم در مورد var و let

شاید برایتان پیش آمده باشد که متغیری با بدون هیچ کلمه کلیدی تعریف کرده باشید و در کمال تعجب با هیچ وارنینگ (هشدار) و خطایی مواجه نشدید! نکته جالب این جاست که اگر شما متغیری را بدون هیچ کلمه کلیدی تعریف کنید، به طور دیفالت (پیش فرض) با کلمه var تعریف می شوند و تمام ویژگی های متغیر هایی که با var تعریف می شوند را به خود می گیرند.
به عنوان مثال متغیری که بدون هیچ کلمه کلیدی تعریف می شود، دقیقا متغیر متغیر هایی که با var تعریف می شوند:

1. از Hoisting پیروی می کنند.
2. قابلیت تعریف مجدد دارند.
3. قابلیت مقداردهی مجدد دارند.
4. دارای Global Scope (ناحیه سراسری) هستند.

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

همان طور که توضیح داده شد، ثابت ها فقط برای ذخیره سازی اطلاعاتی استفاده می شود که به هیچ وجه قصد تغییر آن ها را طی برنامه نداشته باشیم.
اما در مورد کلمات کلیدی var و let پیشنهاد می کنم طبق Clean Code و Best Practice به هیچ وجه از کلمه var استفاده نکنید و سعی کنید همیشه از کلمه کلیدی let برای تعریف متغیر هایتان استفاده کنید.
چون در صورت استفاده از کلمه var، (طبق موارد گفته شده) ممکن است در پروژه های بزرگ مقیاس دچار مشکل شده و برایتان دردسر ایجاد کند.

سخن پایانی

در این مقاله سعی کردیم در مورد تفاوت های var، let و const در جاوا اسکریپت صحبت کنیم تا شما عزیزان در پروژه های خود تفاوت آن ها را به خوبی درک کرده و بدانید کجا باید از کدوم کلمه کلیدی استفاده کنید.
اگر در درک مطالب گفته شده ابهام و مشکلی دارید، پیشنهاد می کنم ویدئوی این مقاله را مطالعه کرده و در صورت وجود هر گونه سوال و ابهام در قسمت کامنت ها مطرح کنید تا پاسخ داده شود.
ضمنا، کلمات کلیدی var، let و const به صور مفصل تر و عملی در دوره جاوا اسکریپت سبزلرن تدریس شده اند و اگر قصد دارید در این موارد خیلی عمیق تر شوید، پیشنهاد می کنم به دوره آموزش جاوا اسکریپت رایگان سبزلرن مراجعه کنید. وب سایت geeksforgeeks نیز در این رابطه مطالبی اراعه داده است که خواندن ان خارج از لطف نیست .

امیدواریم این مقاله برایتان مفید واقع شده باشد.

تا مقاله بعدی خدانگهدار.