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

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

اگر شما در مورد تفاوت های بین کلمه های کلید let, var و const گیج شده اید، این پست برای شما است.

var

چنیدن سال قبل و قبل از معرفی ES6 (ES2015) تنها راه تعریف متغیر در جاوا اسکریپت استفاده از var بود.

Function Scope

برای درک var ابتدا باید scope مربوط به اون رو بفهمیم.به مثال ساده زیر توجه کنید تا اطلاعات بیشتری در مورد اون کسب کنیم

function begin () {
 for (var i=0; i<5; i++) {
  console.log(i) 
 }
// i is accessible outside the for loop
 console.log(i)
}

function begin () {

for (var i=0; i<5; i++) {

console.log(i)

}

// i is accessible outside the for loop

console.log(i)

}

در قطعه کد بالا ما یک متغیر به نام i داریم که درون loop تعریف شده است.خروجی console کد بالا مشابه زیر است

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

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

Global Scope

حالا به مثال زیر توجه کنید:

var name = 'Adhithi';

1	var name = 'Adhithi';

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

از آنجایی که var یک block-scope را ارائه نمی دهد و همچنین خود را به شیء window متصل می کند و در معرض global scope قرار می گیرد، منجر به مشکلات و رفتار های غیرمنتظره در برنامه شما خواهد شد.

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

let

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

حالا در مثال قبلی به جای var از let استفاده می کنیم

function begin () {
 for (let i=0; i<5; i++) {
  console.log(i) 
 }
// i is not defined and will return an error
 console.log(i)
}

function begin () {

for (let i=0; i<5; i++) {

console.log(i)

}

// i is not defined and will return an error

console.log(i)

}

خروجی که ما بعد از اجرای کد بالا بعد از جایگزین کردن let به جای var می بینیم با مثال قبلی متفاوت است

0
1
2
3
4
Uncaught reference error: i is not defined

Uncaught reference error: i is not defined

console log خارج از for یک error را برمیگرداند، i را نمیشناسد و برای ما عبارت i is not defined را بر میگرداند.این یک نتیجه مطلوب است که ما با استفاده از let به جای var به آن رسیدیم.

تا اینجا ما تفاوت بین var و let رو فهمیدیم و در ادامه در مورد const صحبت خواهیم کرد.

آموزش مقدماتی تا پیشرفته جاوا اسکریپت (javascript) - کاملا پروژه محور

const

const ویژگی دیگر است در ES6 به جاوا اسکریپت اضافه شد.شبیه let است و فقط در بلوکی که تعریف شده است،قابل دسترسی است.با مثال ساده زیر می تونید تفاوت بین let و const رو درک کنید.

const name = 'Adhithi';
let age = 25;
// can reassign age
age = 27;

const name = 'Adhithi';

let age = 25;

// can reassign age

age = 27;

در مثال بالا ما متغیر name رو با استفاده از const و متغیر age رو با استفاده از let تعریف کردیم.همنطور که مشاهده می کنید من برای age میتونم یک مقدار جدید در نظر بگیرم و بدون هیچ مشکلی کار می کند.

در یک مثال مشابه من نمیتوانم برای name یک مقدار جدید در نظر بگیرم

const name = 'Adhithi';
let age = 25;
age = 27;
// cannot re-assign name. will throw error
name = 'Adhithi Ravichandran';

const name = 'Adhithi';

let age = 25;

age = 27;

// cannot re-assign name. will throw error

name = 'Adhithi Ravichandran';

در مثال بالا هنگام بروز رسانی name ما error دریافت می کنیم:TypeError: Assignment to constant variable

نکته ای که در اینجا وجود دارد این است که ما نمیتوانیم متغیری که از نوع const تعریف شده است رو value مربوط به اون رو تغییر و بروز رسانی کنیم در حالی که در متغیر هایی که از نوع let تعریف شده اند، این مشکل وجود ندارد.

به مثال زیر توجه کنید تا متوجه شوید const object در جاوا اسکریپت چگونه کار می کنند

const user = {"name": "Adhithi", "age": 10}
//Can manipulate object properties
user.name = "Josh";

//Cannot re-assign the entire object
user = {"name": "Josh", "age": "12"}  //Uncaught TypeError: Assignment to constant variable

const user = {"name": "Adhithi", "age": 10}

//Can manipulate object properties

user.name = "Josh";

//Cannot re-assign the entire object

user = {"name": "Josh", "age": "12"} //Uncaught TypeError: Assignment to constant variable

در مثال بالا ما میتوانیم properties مربوط به object رو تغییر بدهیم.ما می توانیم properties های نام و سن رو در user Object تغییر بدهیم هرچند که از نوع const است.

اما ، ما نمی توانیم کل شی را دوباره اختصاص دهیم. ایده این است که در صورت Const اشیاء ، می توان خصوصیات فردی شیء را تغییر داده و دوباره اختصاص داد اما خود شیء به طور کامل قابل تغییر نیست.

منبع :بلاگ مشفق همدانی