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

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

 

چرا باید تفاوت let و var را بدانیم؟

قبل از اینکه به تفاوت‌های فنی بین let و var بپردازیم، بهتر است به این سوال پاسخ دهیم که چرا این موضوع اهمیت دارد؟ درک تفاوت بین این دو کلمه کلیدی نه تنها به شما کمک می‌کند کد تمیزتر و قابل فهم‌تری بنویسید، بلکه از بروز باگ‌های رایج در جاوا اسکریپت نیز جلوگیری می‌کند. بسیاری از مشکلاتی که توسعه‌دهندگان در گذشته با آن مواجه می‌شدند، به دلیل استفاده نادرست از var بود. به همین دلیل، let در نسخه‌های جدیدتر جاوا اسکریپت (ES6) معرفی شد تا برخی از این مشکلات را برطرف کند.

 

 تفاوت اصلی: محدوده (Scope)

 محدوده تابعی (var) در مقابل محدوده بلوکی (let)

یکی از اصلی‌ترین تفاوت‌های بین let و var، محدوده (Scope) آن‌ها است. متغیرهایی که با var تعریف می‌شوند، محدوده تابعی (Function Scope) دارند. این یعنی اگر شما یک متغیر با var داخل یک تابع تعریف کنید، آن متغیر فقط در داخل آن تابع قابل دسترسی است. اما اگر خارج از تابع تعریف شود، به صورت سراسری (Global) در نظر گرفته می‌شود.

از طرف دیگر، متغیرهایی که با let تعریف می‌شوند، محدوده بلوکی (Block Scope) دارند. این یعنی اگر شما یک متغیر با let داخل یک بلوک `{}` تعریف کنید، آن متغیر فقط در داخل آن بلوک قابل دسترسی است.

 

بیایید با یک مثال این تفاوت را بهتر درک کنیم:

javascript

function run() {

  var foo = "Foo";

  let bar = "Bar";



  console.log(foo, bar); // Foo Bar



  {

    var moo = "Mooo";

    let baz = "Bazz";

    console.log(moo, baz); // Mooo Bazz

  }



  console.log(moo); // Mooo

  console.log(baz); // ReferenceError

}



run();

در این مثال، moo با var تعریف شده است و حتی خارج از بلوک `{}` نیز قابل دسترسی است. اما baz که با let تعریف شده، فقط در داخل بلوک `{}` قابل دسترسی است و اگر سعی کنیم خارج از آن بلوک به آن دسترسی پیدا کنیم، با خطای ReferenceError مواجه می‌شویم.

 

 چرا let معرفی شد؟

یکی از دلایل اصلی معرفی let در ES6، مشکلاتی بود که var ایجاد می‌کرد. به عنوان مثال، در حلقه‌ها، var می‌تواند باعث ایجاد باگ‌های غیرمنتظره شود. به این مثال توجه کنید:

javascript

var funcs = [];

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

  funcs[i] = function() {

    console.log("My value: " + i);

  };

}

for (var j = 0; j < 3; j++) {

  funcs[j]();

}

در این کد، انتظار داریم که خروجی به این صورت باشد:

My value: 0

My value: 1

My value: 2

اما در واقعیت، خروجی به این صورت است:

My value: 3

My value: 3

My value: 3

دلیل این اتفاق این است که var محدوده تابعی دارد و همه‌ی توابع داخل حلقه به یک متغیر i اشاره می‌کنند. وقتی حلقه تمام می‌شود، مقدار i برابر با ۳ است و همه‌ی توابع این مقدار را چاپ می‌کنند.

برای حل این مشکل، می‌توانیم از let استفاده کنیم:

javascript

var funcs = [];

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

  funcs[i] = function() {

    console.log("My value: " + i);

  };

}

for (var j = 0; j < 3; j++) {

  funcs[j]();

}

این بار خروجی به درستی نمایش داده می‌شود:

My value: 0

My value: 1

My value: 2

 

 Hoisting: تفاوت در بالا آمدن متغیرها

 Hoisting در var

در جاوا اسکریپت، متغیرهایی که با var تعریف می‌شوند، بالا آورده می‌شوند (Hoisted). این یعنی شما می‌توانید قبل از تعریف متغیر، به آن دسترسی داشته باشید، اما مقدار آن undefined خواهد بود.

javascript

function checkHoisting() {

  console.log(foo); // undefined

  var foo = "Foo";

  console.log(foo); // Foo

}



checkHoisting();

در این مثال، foo قبل از تعریف استفاده شده است، اما به جای خطا، مقدار undefined چاپ می‌شود.

 

 

 Hoisting در let

متغیرهایی که با let تعریف می‌شوند نیز بالا آورده می‌شوند، اما برخلاف var، تا زمانی که به خط تعریف آن‌ها نرسیم، نمی‌توانیم به آن‌ها دسترسی داشته باشیم. این دوره را منطقه مرده زمانی (Temporal Dead Zone) می‌نامند.

javascript

function checkHoisting() {

  console.log(foo); // ReferenceError

  let foo = "Foo";

  console.log(foo); // Foo

}



checkHoisting();

در این مثال، دسترسی به foo قبل از تعریف آن باعث ایجاد خطای ReferenceError می‌شود.

 

 ایجاد ویژگی در شیء جهانی (Global Object)

وقتی شما یک متغیر با var در سطح جهانی (Global Scope) تعریف می‌کنید، این متغیر به عنوان یک ویژگی در شیء جهانی (مثل window در مرورگر) اضافه می‌شود. اما متغیرهایی که با let تعریف می‌شوند، این ویژگی را ایجاد نمی‌کنند.

javascript

var foo = "Foo"; // globally scoped

let bar = "Bar"; // globally scoped but not part of the global object



console.log(window.foo); // Foo

console.log(window.bar); // undefined

در این مثال، foo به عنوان یک ویژگی در شیء window اضافه می‌شود، اما bar این‌گونه نیست.

 

 امکان تعریف مجدد متغیرها

در حالت عادی، var به شما اجازه می‌دهد که یک متغیر را چندین بار تعریف کنید، اما let این اجازه را نمی‌دهد و در صورت تعریف مجدد، خطای SyntaxError ایجاد می‌کند.

javascript

'use strict';

var foo = "foo1";

var foo = "foo2"; // No problem, 'foo1' is replaced with 'foo2'.



let bar = "bar1"; 

let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

 

 سوالات متداول (FAQ)

 ۱. آیا می‌توانم همیشه از let استفاده کنم؟

بله، در بیشتر موارد استفاده از let به جای var توصیه می‌شود، زیرا let محدوده بلوکی دارد و از بروز بسیاری از باگ‌ها جلوگیری می‌کند.

 ۲. آیا let کندتر از var است؟

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

 ۳. آیا let جایگزین کامل var است؟

تقریباً بله. با معرفی let و const در ES6، دیگر دلیلی برای استفاده از var وجود ندارد، مگر در موارد بسیار خاص.

 

 نتیجه‌گیری

در این مقاله، به بررسی تفاوت‌های بین let و var در جاوا اسکریپت پرداختیم. فهمیدیم که let محدوده بلوکی دارد، در حالی که var محدوده تابعی دارد. همچنین، let از منطقه مرده زمانی (Temporal Dead Zone) پشتیبانی می‌کند و امکان تعریف مجدد متغیرها را نمی‌دهد. در نهایت، استفاده از let به جای var می‌تواند به شما کمک کند کد تمیزتر و قابل فهم‌تری بنویسید و از بروز بسیاری از باگ‌ها جلوگیری کنید.

اگر شما هم تجربه‌ای در استفاده از let و var دارید یا سوالی در این زمینه دارید، خوشحال می‌شویم در بخش نظرات با ما در میان بگذارید.