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

تعریف متغیر در جاوااسکریپت: تفاوت var ، let و const
73 / 100 امتیاز سئو

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

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

آیا می دانید تفاوت بین var،let و const چیست؟ آیا میدانید کدام یک را انتخاب کنید؟

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

تفاوت var،let و const

کلمه کلیدی var

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

اسکوپ تابع یا Function Scope

برای درک var ، ابتدا باید اسکوپ آن را بدانیم. مثال ساده زیر را ببینید.

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

در کد بالا ، متغیر i رو داریم که در داخل حلقه for به اصطلاح declare شده است. خروجی کنسولی که برای این کد مشاهده خواهید کرد در زیر نشان داده شده است.

 
0
1
2
3
4
5

مسئله عجیب این است که اگرچه متغیر i در داخل حلقه for ایجاد شده است اما هنوز هم خارج از محدوده for-loop قابل دسترسی است. به این دلیل که متغیرهای var در اسکوپی که اعلام شده اند قابل دسترسی هستند.

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

اسکوپ عمومی یا Global Scope

بیایید به مثال دیگری نگاه کنیم.

 
var name = 'Ali';

در این مثال ، من متغیر name را با استفاده از کلمه var خارج از تابع اعلام (declare) کرده ام. جاوا اسکریپت با این متغیر به عنوان متغیر عمومی رفتار می کند و آن را به آبجکتwindow  متصل می کند.

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

متغیرهای var دارای اسکوپ تابع هستند؛ اگر درون تابع اعلام نشوند، اسکوپ عمومی خواهند داشت.

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

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

کلمه کلیدی let

معمولاً خواست ما این است که متغیرها را درون یک بلوک کد قرار داشته باشیم. اگر متغیر را درون بلوک کد اعلام کنیم – به عنوان مثال حلقه for-loop – ما می خواهیم این متغیر درون همان بلوک کد زندگی کند و خارج از آن غیرقابل دسترسی باشد. این ویژگی در جاوااسکریپت فقط با استفاده از کلید واژه 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)
}

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

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

اگر در خارج از بلوک کد for-loop بخواهیم خروجی کنسول (console log) را بگیریم خطا error بر میگرداند. چراکه کنسول متغیر را نمی شناسد. این حالت در واقع نتیجه مطلوب است که ما با استفاده از let به جای var بدست می آید.

let محدود به بلوک است و دسترسی به متغیرهای اعلام شده در یک بلوک کد امکان از خارج از آن وجود ندارد.

اکنون که تفاوت های اصلی بین var و let را فهمیدیم، می توانیم در مورد کلمه کلیدی const بحث کنیم.

Const

const از مواردی هست که در نسخه ES6 اضافه شده است. همانند letکلید واژه const نیز دارای اسکوپ بلوک است. تفاوت بین const و let را می توان با یک مثال ساده در زیر درک کرد.

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

در مثال بالا ، با استفاده از const متغیری با نام name و با استفاده از let متغیری با نام age ایجاد شده است. مشخص است که می توان مقدار دیگری را به age اختصاص داد و کاملاً هم درست کار خواهد کرد.

در همان مثال ، نمی توان مقدار دیگری به متغیر name دارای کلمه const اختصاص داد.

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

اگر این مثال اجرا شود این خطا را ایجاد می کند: TypeError: Assignment to constant variable.

نتیجه گیری اینجاست که کلمه کلیدی const به شما امکان نمی دهد مقادیر را دوباره به یک متغیر ثابت اختصاص دهید. در حالی که کلمه let به شما اجازه می دهد مقادیر را به متغیرهایی که قبلاً مقدار گرفته اند، اختصاص دهید (مثال بالا: age).

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

 
const user = {"name": "Ali", "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 ) یک آبجکت را دستکاری کنیم. می توانیم name و age آبجکت user را تغییر دهیم اگرچه آبجکت user با const ساخته شده است.

البته نمی توان کل آبجکت را دوباره اختصاص داد. ایده کلی این است که در آبجکت هایی که با ساخته شده اند، می توان خصوصیات (properties) آبجکت را تغییر داده و دوباره اختصاص داد اما خود آبجکت را به هیچ وجه نمی توان تغییر داد.

جمع بندی تفاوت var،let و const

به انتهای پست  “تعریف متغیر در جاوااسکریپت: تفاوت var ، let و const” رسیده ایم. هنوز مواقعی وجود دارد که بخواهید به جای بلوک کد ، اسکوپ کد ها را در یک تابع داشته باشید.

let و const موارد اضافه شده بسیار خوبی در استاندارد ES6 هستند، تا بتوان کد قابل پیش بینی تری نوشت.

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

اگر “تعریف متغیر در جاوااسکریپت: تفاوت var،let و const” را دوست داشتید، لطفاً را به اشتراک بگذارید
منبع

0 Shares:
دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چهار × سه =

شاید از اینا هم خوشتان آید