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

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

در ادامه خواهید خواند:

• توضیح کلی
• آبجکت سراسری window
• Block
• Redeclaration
• Function
• جمع بندی

توضیح کلی

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

در مقابل، متغیرهایی که با var تعریف می‌شوند، به جای اینکه محدود به یک بلوک باشند، در محدوده تابعی (function scope) یا در نبود تابع، به‌صورت سراسری (global) در دسترس هستند. یعنی اگر متغیری با var درون یک شرط یا حلقه تعریف شود، حتی خارج از آن ساختار نیز قابل دسترسی خواهد بود، که این موضوع ممکن است در برنامه‌های بزرگ یا پیچیده باعث بروز خطاهای پیش‌بینی‌نشده شود.

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

تفاوت null و undefined در جاوااسکریپت
تفاوت null و undefined

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

حتی اگر یک متغیر را با استفاده از let در کنار متغیری دیگر که با var تعریف شده است ایجاد کنیم، تنها متغیری که با var تعریف شده به شیء سراسری window در محیط مرورگر اضافه می‌شود. به بیان ساده‌تر، متغیرهایی که با let تعریف می‌شوند به شیء window متصل نمی‌شوند و در نتیجه، به صورت مستقیم از طریق 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

در این مثال، متغیر varVariable که با var تعریف شده است به window تعلق دارد و به‌راحتی از طریق window.varVariable در دسترس است. اما متغیر letVariable به دلیل استفاده از let در تعریف آن، تنها در محدوده‌ی بلوکی که در آن قرار دارد معتبر است و به شیء سراسری window اضافه نمی‌شود. این ویژگی یکی دیگر از تفاوت‌های مهم میان let و var محسوب می‌شود که باعث می‌شود متغیرهای let، برخلاف var، از آلودگی دامنه‌ی سراسری (global scope pollution) جلوگیری کنند و مدیریت متغیرها در برنامه‌نویسی مدرن را بهینه‌تر کنند.

با هاست Node.js لیارا، اپلیکیشن‌های خود را با سرعت، امنیت و سادگی بی‌نظیر اجرا کنید.
✅ استقرار سریع با یک کلیک✅ منابع سخت‌افزاری کاملاً اختصاصی✅ پشتیبان‌گیری خودکار
خرید و راه‌اندازی هاست Node.js

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 که بعد از پایان حلقه متغیر داخل حلقه دیگر وجود ندارد.

با هاست Vue.js لیارا، توسعه و دیپلوی اپلیکیشن‌های SPA را سریع، امن و بدون دردسر تجربه کنید.
✅ راه‌اندازی آسان تنها با چند کلیک✅ سازگاری کامل با Git و سیستم‌های CI/CD✅ امکان بک‌آپ‌گیری خودکار 
خرید و راه‌اندازی هاست Vue.js 

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.

آموزش مفاهیم مقدماتی Node.js
مفاهیم Node.js

جمع بندی

تفاوت اصلی بین let و var در نحوه‌ی محدوده‌بندی (scope) آن‌هاست. let فقط در محدوده‌ی بلوکی که تعریف شده معتبر است و به شیء سراسری window متصل نمی‌شود، در حالی که var دارای دامنه‌ی تابعی است و به window اضافه می‌شود.

این ویژگی‌ها باعث می‌شوند let برای جلوگیری از تداخل متغیرها و مدیریت بهتر کد گزینه‌ی مناسب‌تری باشد. بنابراین، در برنامه‌نویسی مدرن جاوااسکریپت توصیه می‌شود از let (و در صورت نیاز، const) استفاده شود تا کدی ایمن‌تر، قابل پیش‌بینی‌تر و ساخت‌یافته‌تر داشته باشیم.

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