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

در پست قبلی در مورد let در جاوا اسکریپت صحبت کردیم. در این نوشته، تفاوت های بین var
و let
در جاوا اسکریپت را به طورمفصل مورد بررسی قرار می دهیم.
#1: Variable scopes
زمانی که متغیرهای var
در خارج از تابع تعریف می شوند، global scope هستند.برای مثال:
1 |
var counter; |
در این مثال counter
یک متغیر global است به این معنی که در هر تابعی در دسترس است.
زمانی که شما یک متغی را با استفاده از کلمه کلیدی var
تعریف می کنید،scope متغیر local است.برای مثال:
1 2 3 4 |
function increase() { var counter = 10; } // cannot access the counter variable here |
در این مثال متغیر counter
در خارج از تابع ()increase در دسترس نیست.
مثال زیر چهار عدد از 0 تا 4 را در داخل حلقه و عدد 5 را در خارج از حلقه نشان می دهد.
1 2 3 4 5 |
for (var i = ; i < 5; i++) { console.log("Inside the loop:", i); } console.log("Outside the loop:", i); |
خروجی:
1 2 3 4 5 6 |
Inside the loop: Inside the loop: 1 Inside the loop: 2 Inside the loop: 3 Inside the loop: 4 Outside the loop: 5 |
در این مثال متغیر i
یک global variable است.بنابراین در داخل و بعد از حلقه for
در دسترس است.
← میتونید تقاوت بین let و var در جاوا اسکریپت رو در قالب یک ویدئو در چنل یوتوبمون ببینید.
در مثال زیر از کلمه کلیدی let
به جای var
استفاده شده است:
1 2 3 4 5 |
for (let i = ; i < 5; i++) { console.log("Inside the loop:", i); } console.log("Outside the loop:", i); |
در این مورد ، چهار عدد از 0 تا 4 در داخل یک حلقه و یک reference error نشان داده می شود:
1 2 3 4 5 |
Inside the loop: Inside the loop: 1 Inside the loop: 2 Inside the loop: 3 Inside the loop: 4 |
Error:
1 |
Uncaught ReferenceError: i is not defined |
از آنجایی که در این مثال از کلمه کلیدی let
استفاده شده است،متغیر i
در واقع block scope هستند.این بدان معناست که متغیر i فقط می تواند در داخل بلوک حلقه for قابل دسترسی باشد.
در جاوا اسکریپت یک block با curly braces {}
مشخص می شود مانند if...else
و for
و …
1 2 3 4 5 6 7 |
if(condition) { // inside a block } for(...) { // inside a block } |
#2: Creating global properties
متغیرهایی که با استفاده از var
به صورت global تعریف می شوند به global object به عنوان یک properties اضافه می شود.در مرورگرها global object همان window
و در Node.js همان global
است:
1 2 |
var counter = ; console.log(window.counter); // 0 |
با این وجود، متغیرهایی که با let
تعریف می شوند،به global object اضافه نمی شوند:
1 2 |
let counter = ; console.log(window.counter); // undefined |
#3: Redeclaration
کلمه کلیدی var
به شما اجازه می دهد که یک متغیر را بدون هیچ مشکلی redeclare کنید:
1 2 3 |
var counter = 10; var counter; console.log(counter); // 10 |
اما اگر شما قصد داشته باشید، متغیری از نوع let
را redeclare کنید،با error روبرو خواهید شد:
1 2 |
let counter = 10; let counter; // error |
#4: The Temporal dead zone
متغیرهای let
دارای temporal dead zones هستند، در حالی که متغیرهای var
چنین چیزی ندارند.برای درک temporal dead zone بهتر است که life cycles(چرخه حیات) متغیرهای var
وlet
که شامل دو مرحله ایجاد و اجرا هستند را تست کنیم.
The var variables
- در مرحله ایجاد،یک فضایی را به متغیرهای
var
اختصاص می دهد و فورا آن را باundefined
مقدار دهی می کند. - در مرحله اجرا ، موتور جاوا اسکریپت در صورت وجود value آن را به متغیرهای
var
اختصاص می دهد. در غیر این صورت ، متغیرهایvar
به صورتundefined
باقی می مانند.
The let variables
- در مرحله ایجاد،یک فضایی را به متغیرهای
let
اختصاص می دهد اما متغیر را initialize نمی کند.در صورت ارجاع به متغیری که initialize نشده است، باReferenceError
روبرو خواهید شد. - مرحله اجرا متغیرهای
let
دقیقا مشابه با متغیرهایvar
است
The temporal dead zone از block تا زمان پردازش declaration متغیر let
ادامه دارد.به عبارت دیگر مکانی است که شما نمی توانید قبل از تعریف متغیر let
به آن دسترسی داشته باشید.
دیدگاهتان را بنویسید