۲۲
آبان

جلسه ۴۴ : کلمه ی کلیدی let در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، ES2015 دو کلید واژه مهم جدید جاوا اسکریپت را معرفی کرد: this و const. این دو کلیدواژه متغیر دامنه بلوک (و ثابت) در جاوا اسکریپت را ارائه می دهند. پیش از ES2015، جاوا اسکریپت تنها دو نوع دامنه داشت: سطح عمومی و سطح تابع، در این بخش شما را با دامنه های جاوا اسکریپت و عملکرد و کاربرد کلمه ی کلیدی let در جاوا اسکریپت آشنا خواهیم کرد.

کلمه ی کلیدی let در جاوا اسکریپت

در ادامه ی این مبحث در ابتدا به بررسی سطوح مختلف Scope و سپس کلمه ی کلیدی let در جاوا اسکریپت می پردازیم.

همانطور که گفته شد تا قبل از ES2015 جاوا اسکریپت شامل دو نوع Scope بود:

Global Scope
Function Scope

Global Scope

متغیرهایی که به صورت عمومی (خارج از توابع) تعریف می شوند، شامل Global Scope می شوند.

مثال : نوع Global Scope

var carName = "Volvo";

// code here can use carName

function myFunction() {
  // code here can also use carName 
}

var carName = "Volvo";

// code here can use carName

function myFunction() {

// code here can also use carName

}

خودتان امتحان کنید »

متغییرهای Global هز هر کجای برنامه ی جاوا اسکریپت در دسترس هستند.

توابع Scope

متغیرهایی که به صورت محلی تعریف شده اند در واقع داخل یک تابع قرار دارند،

مثال : توابع scope

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

// code here can NOT use carName

function myFunction() {

var carName = "Volvo";

// code here CAN use carName

}

// code here can NOT use carName

خودتان امتحان کنید »

متغیرهای محلی فقط در داخلی تابعی که تعریف شده اند قابل دسترس اند.

بلوک Scope در جاوا اسکریپت

متغیرها با کلمه کلیدی var قابل تعریف اند و نمی تواند سطح Scope داشته باشند.

متغیرهایی که داخل بلوک {} تعریف شده باشند، خارج از آن نیز قابل دسترس اند.

مثال :

{ 
  var x = 2; 
}
// x CAN be used here

{

var x = 2;

}

// x CAN be used here

تا قبل از جاوا اسکریپت ES2015 سطح Scope مطرح نبود.

متغیرهای تعریف شده با کلمه کلیدی let می تواند سطح Scope داشته باشند.

در این صورت متغیرهایی که داخل بلوک {} تعریف شده باشند، خارج از آن قابل دسترس نیستند.

مثال :

{ 
  let x = 2;
}
// x can NOT be used here

{

let x = 2;

}

// x can NOT be used here

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

تعریف متغیرها با کلمه کلیدی var می توان باعث بروز مشکلاتی شود.

اگر یک متغیر مجددا داخی یک بلاک { } تعریف شود، در خارج از آن بلاک با تعریف جدیدش شناخته می شود.

مثال : تعریف مجدد متغیرها

var x = 10;
// Here x is 10
{ 
  var x = 2;
  // Here x is 2
}
// Here x is 2

var x = 10;

// Here x is 10

{

var x = 2;

// Here x is 2

}

// Here x is 2

خودتان امتحان کنید »

همچنین تعریف مجدد متغیرها با کلمه کلیدی let می تواند چنین مشکلاتی را حل کند.

در این صورت اگر یک متغیر مجددا داخی یک بلاک { } تعریف شود، در خارج از آن بلاک با تعریف اولیه ی خود در خارج از بلاک { } شناخته می شود.

مثال : تعریف متغیر با کلمه کلیدی let

var x = 10;
// Here x is 10
{ 
  let x = 2;
  // Here x is 2
}
// Here x is 10

var x = 10;

// Here x is 10

{

let x = 2;

// Here x is 2

}

// Here x is 10

خودتان امتحان کنید »

پشتیبانی در مرورگرها

کلمه کلیدی let در Internet Explorer 11 و نسخه های قدیمی تر آن پشتیبانی نمی شود.

جدول زیر اولین نسخه ی مرورگرها را که به طور کامل از کلمه کلیدی let پشتیبانی می کنند را نشان می دهد:

Chrome 49	IE / Edge 12	Firefox 44	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

حلقه ی Scope

استفاده از var در یک حلقه :

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

var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
// Here i is 10

var i = 5;

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

// some statements

}

// Here i is 10

خودتان امتحان کنید »

استفاده از let در یک حلقه :

مثال : استفاده از let در یک حلقه

let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
// Here i is 5

let i = 5;

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

// some statements

}

// Here i is 5

خودتان امتحان کنید »

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

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

تابع Scope

متغیرهایی که با کلمات کلیدی var یا let داخل یک حلقه تعریف می شوند،مشابه یکدیگرند.

مثال :

function myFunction() {
  var carName = "Volvo";   // Function Scope
}

function myFunction() {

var carName = "Volvo"; // Function Scope

}

مثال :

function myFunction() {
  let carName = "Volvo";   // Function Scope
}

function myFunction() {

let carName = "Volvo"; // Function Scope

}

Global Scope (عمومی)

متغیرهایی که با کلمات کلیدی var یا let خارج از یک بلوک { } تعریف می شوند،مشابه یکدیگرند.

مثال :

var x = 2;       // Global scope

1	var x = 2; // Global scope

مثال :

let x = 2;       // Global scope

1	let x = 2; // Global scope

متغیرهای عمومی در HTML

در جاوا اسکریپت global scope محیط جاوا اسکریپت است.

در HTML نیز global scope آبجکت پنجره است.

متغیرهای عمومی که با var تعریف شده اند در طول آبجکت پنجره در دسترس اند.

مثال-

مثال : متغیرهای عمومی تعریف شده با var

var carName = "Volvo";
// code here can use window.carName

1 2	var carName = "Volvo"; // code here can use window.carName

خودتان امتحان کنید »

متغیرهای عمومی که با let تعریف شده اند در طول آبجکت پنجره در دسترس نیستند.

مثال-

مثال : متغیرهای عمومی تعریف شده با let

let carName = "Volvo";
// code here can not use window.carName

1 2	let carName = "Volvo"; // code here can not use window.carName

خودتان امتحان کنید »

تعریف مجدد

تعریف مجدد متغیرها با کلمه کلیدی var در هر کجای برنامه ی جاوا اسکریپت در دسترس اند.

مثال : تعریف مجدد متغیرها با var

var x = 2;

// Now x is 2
 
var x = 3;

// Now x is 3

var x = 2;

// Now x is 2

var x = 3;

// Now x is 3

خودتان امتحان کنید »

اگر متغیری که با var تعریف شده مجددا با let تعریف شود، در همان scope یا بلوک { } ناشناخته است.

مثال-

مثال :

var x = 2;       // Allowed
let x = 3;       // Not allowed

{
  var x = 4;   // Allowed
  let x = 5   // Not allowed
}

var x = 2; // Allowed

let x = 3; // Not allowed

{

var x = 4; // Allowed

let x = 5 // Not allowed

}

اگر متغیری که با let تعریف شده مجددا با let تعریف شود، در همان scope یا بلوک { } ناشناخته است.

مثال-

مثال :

let x = 2;       // Allowed
let x = 3;       // Not allowed

{
  let x = 4;   // Allowed
  let x = 5;   // Not allowed
}

let x = 2; // Allowed

let x = 3; // Not allowed

{

let x = 4; // Allowed

let x = 5; // Not allowed

}

اگر متغیری که با let تعریف شده مجددا با var تعریف شود، در همان scope یا بلوک { } ناشناخته است.

مثال-

مثال :

let x = 2;       // Allowed
var x = 3;       // Not allowed

{
  let x = 4;   // Allowed
  var x = 5;   // Not allowed
}

let x = 2; // Allowed

var x = 3; // Not allowed

{

let x = 4; // Allowed

var x = 5; // Not allowed

}

تعریف مجدد یک متغیری که با let تعریف شده ، در یک scope و یا بلوک {} دیگر، مجاز است.

مثال : تعریف مجدد متغیر با let در سایر بلوک

let x = 2;       // Allowed

{
  let x = 3;   // Allowed
}

{
  let x = 4;   // Allowed
}

let x = 2; // Allowed

{

let x = 3; // Allowed

}

{

let x = 4; // Allowed

}

خودتان امتحان کنید »

Hoisting

متغیرهایی که با var تعریف شده باشند، به بالا hoist می شوند.

بنابراین در این حالت شما می توانید از یک متغیر قبل از تعریف کردن آن استفاده کنید :

مثال : استفاده از یک متغیر قبل از تعریف آن

// you CAN use carName here
var carName;

1 2	// you CAN use carName here var carName;

خودتان امتحان کنید »

متغیرهایی که با let تعریف شده باشند، به بالا hoist نمی شوند.

اگر از متغیری که با let تعریف شده قبل از تعریف آن استفاده کنید، در این صورت با خطای ReferenceError رو به رو می شوید.

متغیر در آغاز “بلوک موقتی” از زمان شروع بلوک تا زمانی که اعلام شود:

مثال :

// you can NOT use carName here
let carName;

1 2	// you can NOT use carName here let carName;

کلام آخر

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

QR: جلسه ۴۴ : کلمه ی کلیدی let در جاوا اسکریپت

به اشتراک بگذارید

let در جاوا اسکریپت ,دوره کامل آموزش جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۴ : کلمه ی کلیدی let در جاوا اسکریپت

مقدمه

کلمه ی کلیدی let در جاوا اسکریپت

Global Scope

توابع Scope

بلوک Scope در جاوا اسکریپت

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

پشتیبانی در مرورگرها

حلقه ی Scope

تابع Scope

Global Scope (عمومی)

متغیرهای عمومی در HTML

تعریف مجدد

Hoisting

کلام آخر

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ