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

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

توضیح کلی:

let به شما این اجازه را می‌دهد که متغیر‌هایی تعریف کنید که به یک محدوده بلوک از کد، مثل یک حلقه for، محدود باشد و خارج از محدوده بلوک‌ تعریف نشده باشد. برخلاف var، متغیری که با var تعریف شده باشد، بدون در نظر گرفتن محدوده یک بلوک، در تمام کد قابل دسترس و سراسری (global) است.

حالا به این که چه تفاوتی با یکدیگر دارند را بررسی می‌کنیم:

آبجکت سراسری window:

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

var varVariable = “This is var variable.”;
let letVariable = “This is let variable.”;

حالا بیایید بعد از تعریف این دو متغیر مقدار آن‌ها را در خروجی ببینیم:

console.log(window.varVariable);
// Output: This is var variable.
console.log(window.letVariable);
// Output: undefined

بنابراین نمی‌توان به متغیرهایی که توسط let تعریف شده‌اند، توسط آبجکت window دسترسی پیدا کرد، زیرا این نوع متغیرها همیشه به یک بلوک از کد محدود هستند و هیچ گاه نمی‌توان به صورت سراسری یا global به آن‌ها دست یافت.

Block:

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

مثال استفاده از let:

for(let i = 0; i < 10 ; i++) {
    console.log(i);
}
// Output: 0, 1, 2, ..., 9
console.log(i);
// Output: ReferenceError: i is not defined

مثال استفاده از var:

for(var i = 0; i < 10 ; i++) {
    console.log(i);
}
// Output: 0, 1, 2, ..., 9
console.log(i);
// Output: 10

همانطور که مشاهده می‌کنید متغیر i در مثال دوم،‌ بعد از پایان حلقه نیز همچنان مقدار دارد. به عبارتی متغیر i در حلقه for توسط var به صورت سراسری تعریف شده و حلقه اجرا می‌شود تا اینکه مقدار i برابر با ۱۰ می‌شود و شرط حلقه غلط می‌شود و از حلقه خارج می‌شویم، اما متغیر i همچنان داری مقدار ۱۰ است، برخلاف let که بعد از پایان حلقه متغیر داخل حلقه دیگر وجود ندارد.

Redeclaration:

اگر متغیری را توسط let تعریف و مقداردهی کردید به هیچ وجه نمی‌توانید برای بار دوم آن را تعریف و مقداردهی کنید. اما اگر از var استفاده کنید در همان بلوک می‌توانید دوباره همان متغیر را تعریف و مقداردهی کنید. مثال زیر را ببینید تا بهتر متوجه شوید: (فرض کنید در حال استفاده از حالت strict هستیم.)

’use strict’;
var temp = “this is a temp variable.”;
var temp = “this is a second temp variable.”; 

اما به هنگام استفاده از let:

’use strict’;
let temp = “this is temp variable.”;
let temp = “this is a second temp variable.”;
// SyntaxError: temp is already declared.

Function:

زمانی که از var و let در توابع استفاده می‌کنیم، رفتارشان یکسان خواهد بود:

function aSampleFunction(){
    let letVariable = "Hey! What's up? I am let variable.";
    var varVariable = "Hey! How are you? I am var variable.";
    console.log(letVariable); //Hey! What's up? I am let variable.
    console.log(varVariable); //Hey! How are you? I am var variable.
}
// ---
aSampleFunction()
// Output: Hey! What's up? I am let variable.
// Output: Hey! How are you? I am var variable.

حالا که تفاوت کلی var و let را متوجه شدید می‌توانید خیلی بهتر و بهینه‌تر کد بزنید و به این نکته توجه کنید که آیا می‌خواهید یک متغیر در یک بلوک محدود باشد یا خیر؟

منبع: https://codeburst.io/difference-between-let-and-var-in-javascript-537410b2d707