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


برای تعریف متغیر در جاوا اسکریپت به دلخواه می توان از کلمات کلیدی var و let استفاده کرد‌؛ اما تفاوت هایی بین این دو وجود داره که اگر در جریان اونا نباشید، ممکنه در پروژه های بزرگ با مشکل مواجه شید. به همین واسطه در این مطلب به بررسی کامل تفاوت let و var در جاوا اسکریپت میپردازیم.

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

همان طور که اطلاع دارید کلمات Hoist و Hoisting یکی از مباحث جاوا اسکریپت بوده و به معنی بالا بردن می باشند.

منظور از Hoisting یا همان بالا بردن این است که وقتی شما کدی را در خط 4 تعریف می کنید، مرورگر هنگام اجرای فایل شما آن خط را بالا برده و به قبل تر از خط 4 می رساند.

متغیر هایی که با کلمه کلیدی var تعریف می شوند، از ویژگی Hoisting پیروی می کنند.

در این حالت شما می توانید قبل از تعریف متغیر، از آن استفاده کنید.

به عنوان مثال در خط 2 از متغیری به اسم number استفاده کرده و در خط 4 آن را تعریف کنید! (مگر می شود قبل از تعریف متغیر از آن استفاده کرد؟!)

به کد زیر دقت کنید:

1

2

3

num1 = 10

console.log(num1) // 10

var num1

همان طور که مشاهده می کنید به کمک خط 2 مقدار 10 در کنسول نمایش داده می شود.

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

در این حالت اصطلاحا گفته می شود خط سوم Hoisting شده است، یعنی بالا رفته است.

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

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

1

2

3

num1 = 12

console.log(num1) // Error

let num1

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

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

📷

در ادامه مبحث تفاوت let و var در جاوا اسکریپت به بررسی دومین تفاوت میپردازیم. یکی دیگر از مهم ترین تفاوت های var و let قابلیت ReDecluration است. کلمه Declurate یعنی تعریف کردن، اعلام کردن و ReDeclurate یعنی تعریف مجدد.

وقتی یک متغیری را تعریف می کنیم، اصطلاحا آن را Declurate می کنیم و وقتی همان متغیر را دوباره تعریف می کنیم یعنی آن را ReDeclurate (تعریف دوباره، تعریف مجدد) کردیم.

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

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

1

2

3

4

5

6

7

8

9

10

11

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

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

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

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

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

1

2

3

4

5

6

7

8

var num1 = 10

{

var num1 = 20

console.log(num1) // 20

}

console.log(num1) // 20

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

اما اگر متغیر num1 با کلمه کلیدی let تعریف شده بود، داخل scope نمی توانستیم مقدار آن را تغییر دهیم.

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

1

2

3

4

5

6

7

8

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 تعریف می شوند متغیر نمی گوییم، بلکه آن ها را با اسم ثابت می شناسیم.

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

1

2

3

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 تعریف می شوند:

از Hoisting پیروی می کنند.

قابلیت تعریف مجدد دارند.

قابلیت مقداردهی مجدد دارند.

دارای Global Scope (ناحیه سراسری) هستند.

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

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

اما در مورد کلمات کلیدی var و let پیشنهاد می کنم طبق Clean Code و Best Practice به هیچ وجه از کلمه var استفاده نکنید و سعی کنید همیشه از کلمه کلیدی let برای تعریف متغیر هایتان استفاده کنید.

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

سخن پایانی

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

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

منبع:

https://sabzlearn.ir/the-difference-between-let-and-var-in-javascript/