var VS let VS const

همون طور که می‌دونیم استفاده از var keyword تو ورژن قدیمی جاوااسکریپت (ES5) تنها راهی بود که می‌تونستیم متغیرها رو تعریف کنیم.

تو ورژن جدیدتر (ES6) دو keyword جدید (let, const) هم اضافه شدن. تو این پست می‌خوایم تفاوت‌ها و شباهت‌های var، let و const رو با هم بررسی کنیم.

همین اول کار باید این رو بدونیم که مقدار const برخلاف let و var غیرقابل تغیر هست.

const yearOfBorn = 1990;
yearOfBorn = 1992;
console.log(yearOfBorn); // return error

در مواردی که مطمئن هستیم مقدار متغیر ثابت می‌مونه، بهتره از const استفاده کنیم. برای مثال متغیر yearOfBorn برای هر فردی یه مقدار ثابت هست و تغیر نمی‌کنه.

global scope:

در مرورگر متغیرهایی که به وسیله‌ی var در global scope تعریف شده باشند، پراپرتی global object محسوب می‌شن:

var message = 'hello world';

console.log(window.message); // return &quothello message&quot.

ولی این قانون برای let و const صدق نمی‌کنه و متغیرهایی که به وسیله این دو در global scope مرورگر که همون window object هست، پراپرتی global object محسوب نمی‌شن.

function scope:

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

function sayHello() {    
var message= 'Hello World!'; 
 console.log(message); // return Hello World!  
 }  
 sayHello(); 
 console.log(message); // return message is not defined

همون طور که تو کد بالا دیدیم، متغیر message فقط داخل فانکشن قابل دسترس هست و خارج از اون تعریف نشده و « message is not defined» برگشت داده شده.

در این مورد، let و const مشابه var عمل می‌کنن و فقط داخل اسکوپ فانکشن قابل دسترس هستند.

function profile() {
let name = 'jack';
const yearOfBorn = 1990;
let userName = name + yearOfBorn;
console.log(userName); // return jack1990
}
profile();
console.log(id); // return userName is not defined

block scope:

بر خلاف let، var و const داخل بلاک اسکوپ قابل دسترس هستند. به محدوده‌ی بین { }، بلاک اسکوپ گفته می‌شه. پس let و const علاوه بر اینکه فانکشن اسکوپ بودن، بلاک اسکوپ هم هستن ولی var فقط فانکشن اسکوپ هست.

{ 
var first = 'first message.'; 
let second = 'second message'; 
const third = 'third message'; 
} 
console.log(first); // return 'first message'. 
console.log(second); // return second is not defined 
console.log(third); // return third is not defined

همون طور که تو کد بالا می‌بینیم، متغیر first خارج از بلاک اسکوپ هم قابل دسترس هست ولی متغیرهای second و third قابل دسترس نیستن.

* این نکته رو هم نباید فراموش کنیم که به صورت کلی از هیچ متغیری قبل از تعریف و مقداردهی، نمی‌تونیم استفاده کنیم. تفاوتی هم نمی‌کنه متغیر با استفاده از var تعریف شده باشه یا let و const.

از این به بعد از var استفاده نکنیم؟

کایل سیمپسون در این باره یه توصیه کرده. به این صورت که:

• از var برای متغیرهای top-level استفاده کنیم. متغیرهایی که تو چند اسکوپ‌های بزرگ به صورت همزمان استفاده می‌شه. مثلا متغیری که ممکنه تو چند ماژول استفاده بشه.
• از let برای تعریف متغیر در اسکوپ‌های کوچک‌تر استفاده کنیم. مثلا برای تعرف متغیر تو فانکشن‌های داخلی.
• بعد از اینکه پروژه تا حدودی جلو رفت و مطمئن شدیم متغیری که با let مقداردهی شده، مقدارش تا آخر ثابت می‌مونه، const رو جایگزین let کنیم. ( البته اگه ESLint استفاده کنین، به صورت اتوماتیک این کار براتون انجام می‌شه)