متغییر ها در جاوا اسکریپت (JavaScript) و تفاوت بین var و let و const

.برای تعریف یک متغییر در جاوا اسکریپت (JavaScript) ما باید از کلمه کلیدی var استفاده کنیم و سپس نام متغییر را مشخص کنیم به طور مثال :

var myVar;
console.log(myVar)

1 2	var myVar; console.log(myVar)

اگه علاقه مند بودید میتونید محتوای این مقاله روهم در ویدئو زیر ببینید.

در مثال بالا نام متغییر را myVar قرار دادیم و هیچ مقداری برای آن مشخص نکردیم سپس از console.log(myVar) استفاده کردیم.

خروجی : حال اگر خروجی را در console نگاه کنیم، مبینیم که undefined قرار داده شده است. (مطابق شکل) چون ما متغییر را تعریف کردیم اما value برای آن در نظر نگرفتیم.

اما برای برطرف کردن این مشکل ما باید به متغییر یک مقدار نسبت دهیم به صورت زیر :

var myVar;
myVar = 10
console.log(myVar)

var myVar;

myVar = 10

console.log(myVar)

در قطعه کد بالا ما به متغییر myVar مقدار عددی 10 را نسبت می‌دهیم. در این حالت در console مقدار 10 نمایش داده می‌شود (مطابق شکل) :

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

Static Typing و Dynamic Typing :

اما قبل از اینکه بحث را ادامه دهیم بهتر است درمورد دو type مختلف صحبت کنیم:

در بعضی از زبان های برنامه نویسی برای اینکه بخواهید یک متغییر را تعریف کنید که یک نوع خاص از یک value را درون خودش نگهداری می‌کند. مثل Number یا String، باید مشخص کنید که این متغییر Number است یا String که به آن Static Typing می‌‌گویند.

معمولا از این کار برای جلوگیری از یک تبدیل ناخواسته value استفاده می‌شود.

اما یک سری زبان‌های برنامه‌نویسی دیگری هستند که متغییرها در زمان‌های مختلف می‌توانند هر نوع داده را نگهداری کنند. به آن Dynamic Typing می‌گویند. جاوااسکریپت جزء این زبان‌های برنامه‌نویسی است.

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

مثال : حال فرض کنید یک متغییر دیگر با نام myVar2 تعریف میکنیم و مقدار آن را “hello” قرار می‌دهیم سپس از console.log(myVar2) استفاده می‌کنیم به صورت زیر :

var myVar2;
myVar2 = "hello"
console.log(myVar2)

var myVar2;

myVar2 = "hello"

console.log(myVar2)

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

var myVar2 = "hello"
console.log(myVar2)

1 2	var myVar2 = "hello" console.log(myVar2)

خروجی در هر دو حالت hello خواهد بود (مطابق شکل ) :

مثال : یک متغییر با نام age تغریف می کنیم و به آن مقدار می‌دهیم به صورت زیر :

var age = "42"
console.log(typeof age)

1 2	var age = "42" console.log(typeof age)

با استفاده از typeof می‌توانیم مشخص کنیم که متغییر از چه نوعی است. که در این حالت خروجی ما string خواهد بود :

با استفاده از متد ()Number می‌توان نوع متغییر را به Number تغییر داد به عنوان مثال :

var age = "42"
console.log(typeof Number(age))

1 2	var age = "42" console.log(typeof Number(age))

همچنین می‌توان مقدار age را یک مقدار عددی قرار داد به صورت زیر :

تفاوت ها و شباهت های Null و Undefined در جاوا اسکریپت

var age = 42
console.log(typeof age)

1 2	var age = 42 console.log(typeof age)

خروجی در هر دو حالت number خواهد بود :

پس درواقع این همان Dynamic Typing است که اجازه می‌دهد متغییر ما هر نوع type را داشته باشد.

تفاوت بین var و Let و Const :

اکنون میخواهیم به ES6 یک گذر کوتاه داشته باشیم و درمورد let و const صحبت کنیم که مشکل var را برطرف کرده‌اند.

حال شاید این سوال برای شما پیش بیاید که مشکل var چیست ؟

برای پاسخ به این سوال بهتر است که با یک مثال پیش بریم :

for(var i = 0; i<5; i++){
    console.log(i)
}
console.log(i)

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

console.log(i)

}

console.log(i)

فرض کنید شما یک حلقه for همانند مثال بالا دارید. درون حلقه با استفاده از console.log(i) مقدار i در console نمایش داده می‌شود.

حال بعد از حلقه for از یک console.log(i) مجددا استفاده می‌کنیم. در این حالت خروجی به صورت زیر است :

در خروجی اعداد 0 تا 4 مربوط به حلقه for و عدد 5 مربوط می‌شود به خط کدی که خارج از بلاک حلقه for قرار گرفته است. درصورتی که ما نباید در خارج از بلاک حلقه for به i دسترسی داشته باشیم و علت اینکه ما به i دسترسی داریم این است که var، از نوع function scope است (function scope اسکوپی است که یک function آن را به وجود می‌آورد.).

به همین دلیل در ES6 از دو کلمه کلیدی دیگری برای تعریف متغییر معرفی کرده‌اند. یکی let و دیگری const است.

حال اگر در مثال قبل در حلقه for متغییر i را از نوع let قرار دهیم به صورت زیر :

for(let i = 0; i<5; i++){
    console.log(i)
}
console.log(i)

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

console.log(i)

}

console.log(i)

خروجی به صورت زیر خواهد بود :

در این حالت یک error مربوط به خط کدی که خارج از بلاک حلقه for قرار دارد مشاهده می‌ کنید که این error به ما می‌گوید که i تعریف نشده است چون let از نوع block scope است (block scope اسکوپی است که یک {} آن را به وجود می آورد مثل (for if switch).) به همین دلیل خارج از scope نمی‌توان به آن دسترسی داشت.

علاوه بر let، در ES6 نیز const را تعریف کرده‌اند و به این معنی است که شما یک متغییر دارید که مقدار آن ثابت است و قابل تغییر نیست. به عنوان مثال :

const taxRate = 0.08
console.log(taxRate)

1 2	const taxRate = 0.08 console.log(taxRate)

خروجی :

حال فرض کنید در یک جایی از برنامه ناخواسته مقدار taxRate را تغییر دادید. اگر مجددا console.log(taxRate) بگیریم، میبینیم که یک خطا رخ داده و آن هم این است که یک assignment به یک متغییر ثابت و غیر قابل تغییر رخ داده است.(مطابق شکل)

پس متغییرهایی که به صورت const تعریف شده‌اند مقدارشان ثابت و غیرقابل تغییر است. امیدوارم متغییر در جاوا اسکریپت رو به خوبی در این مقاله بررسی کرده باشیم و براتون مفید واقع بشه.

نکته : این مقاله قسمتی کوچیکی از آموزش مقدماتی تا پیشرفته جاوا اسکریپت (کاملا پروژه محور) بود. که اگه علاقه مند بودید میتونید از اینجا ویدئو های پیش نمایش و پروژه های این دوره رو ببینیدو در این دوره ثبت نام کنید.

متغییر ها در جاوا اسکریپت (JavaScript) و تفاوت بین var و let و const

Static Typing و Dynamic Typing :

تفاوت بین var و Let و Const :

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Static Typing و Dynamic Typing :

تفاوت بین var و Let و Const :

مطالب زیر را حتما مطالعه کنید

آموزش کار با timing event ها

معرفی DOM به زبان ساده

constructor function در جاوااسکریپت

factory function در جاوا اسکریپت

this در جاوا اسکریپت (JavaScript)

تفاوت for in و for of

دیدگاهتان را بنویسید لغو پاسخ