تفاوت های بین let و var در جاوا اسکریپت ES6

در پست قبلی در مورد let در جاوا اسکریپت صحبت کردیم. در این نوشته، تفاوت های بین var و let در جاوا اسکریپت را به طورمفصل مورد بررسی قرار می دهیم.

#1: Variable scopes

زمانی که متغیرهای var در خارج از تابع تعریف می شوند، global scope هستند.برای مثال:

var counter;

1	var counter;

در این مثال counter یک متغیر global است به این معنی که در هر تابعی در دسترس است.

زمانی که شما یک متغی را با استفاده از کلمه کلیدی var تعریف می کنید،scope متغیر local است.برای مثال:

function increase() {
    var counter = 10;
}
// cannot access the counter variable here

function increase() {

var counter = 10;

}

// cannot access the counter variable here

در این مثال متغیر counter در خارج از تابع ()increase در دسترس نیست.

مثال زیر چهار عدد از 0 تا 4 را در داخل حلقه و عدد 5 را در خارج از حلقه نشان می دهد.

for (var i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);

for (var i = ; i < 5; i++) {

console.log("Inside the loop:", i);

}

console.log("Outside the loop:", i);

خروجی:

Inside the loop: 0 
Inside the loop: 1 
Inside the loop: 2 
Inside the loop: 3 
Inside the loop: 4 
Outside the loop: 5

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 استفاده شده است:

for (let i = 0; i < 5; i++) {
	console.log("Inside the loop:", i);
}

console.log("Outside the loop:", i);

for (let i = ; i < 5; i++) {

console.log("Inside the loop:", i);

}

console.log("Outside the loop:", i);

در این مورد ، چهار عدد از 0 تا 4 در داخل یک حلقه و یک reference error نشان داده می شود:

Inside the loop: 0
Inside the loop: 1
Inside the loop: 2
Inside the loop: 3
Inside the loop: 4

Inside the loop:

Inside the loop: 1

Inside the loop: 2

Inside the loop: 3

Inside the loop: 4

Error:

Uncaught ReferenceError: i is not defined

1	Uncaught ReferenceError: i is not defined

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

کدهای جاوا اسکریپت(JavaScript) در کجا قرار می‌گیرند؟

در جاوا اسکریپت یک block با curly braces {} مشخص می شود مانند if...else و for و …

if(condition) {
   // inside a block
}

for(...) {
  // inside a block
}

if(condition) {

// inside a block

}

for(...) {

// inside a block

}

#2: Creating global properties

متغیرهایی که با استفاده از var به صورت global تعریف می شوند به global object به عنوان یک properties اضافه می شود.در مرورگرها global object همان window و در Node.js همان global است:

var counter = 0;
console.log(window.counter); //  0

1 2	var counter = ; console.log(window.counter); // 0

با این وجود، متغیرهایی که با let تعریف می شوند،به global object اضافه نمی شوند:

let counter = 0;
console.log(window.counter); // undefined

1 2	let counter = ; console.log(window.counter); // undefined

#3: Redeclaration

کلمه کلیدی var به شما اجازه می دهد که یک متغیر را بدون هیچ مشکلی redeclare کنید:

var counter = 10;
var counter;
console.log(counter); // 10

var counter = 10;

var counter;

console.log(counter); // 10

اما اگر شما قصد داشته باشید، متغیری از نوع let را redeclare کنید،با error روبرو خواهید شد:

let counter = 10;
let counter; // 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 به آن دسترسی داشته باشید.

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

#1: Variable scopes

#2: Creating global properties

#3: Redeclaration

#4: The Temporal dead zone

The var variables

The let variables

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

#1: Variable scopes

#2: Creating global properties

#3: Redeclaration

#4: The Temporal dead zone

The var variables

The let variables

مطالب زیر را حتما مطالعه کنید

عملگر spread در جاوا اسکریپت

Rest در جاوا اسکریپت

پارامترهای پیش فرض در جاوا اسکریپت

const در جاوا اسکریپت

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

دیدگاهتان را بنویسید لغو پاسخ