خانه آموزش زبان جاوااسکریپت آموزش JS مقدماتی کلمات کلیدی var و let و const در جاوااسکریپت

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

توسط

۱۳۹۹-۰۷-۰۱

این آموزش در تاریخ ۱۴۰۱/۰۲/۲۳ آپدیت شده است.

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

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

Free-Learn

آنچه در این جلسه میخوانید :

1 کلمات کلیدی Var و Let و Const در جاوااسکریپت
2 کلمه کلیدی Var
3 کلمه کلیدی Let
4 کلمه کلیدی Const
5 تفاوت های بین Var و Let و Const
6 محدوده دسترسی متغیرها
7 قابلیت دوباره تعریف شدن
8 دسترسی به شئ پنجره یا Window Object
9 خلاصه این جلسه در یک نگاه

کلمات کلیدی Var و Let و Const در جاوااسکریپت

همونطور که در جلسه قبلی هم اشاره کردم، تا قبل از سال ۲۰۱۵ ، تنها روشی که میشد باهاش متغیرهارو در جاوااسکریپت تعریف کرد استفاده از کلمه کلیدی var بود که در جلسه قبلی بطور کامل باهاش آشنا شدیم.

حال ورژن ( یا نسخه) ۲۰۱۵ زبان جاوااسکریپت که با نام رسمی ES6 – ECMAScript 2015 منتشر شد ۲ تا کلمه کلیدی بنام های let و const هم منتشر شد.

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

Free-Learn

کلمه کلیدی Var

خب کلمه کلیدی Var رو در جلسه قبلی باهاش آشنا شدیم و میدونیم که برای تعریف متغیرهاست و در کل ظرفی است برای نگهداری مقادیر داده ها ، که به راحتی میتونیم متغیرهارو توسط این کلمه کلیدی تعریف کنیم.

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

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

<script>

var MyName = "Sadegh";
var MySite = "Free-Learn";

</script>

var MyName = "Sadegh";

var MySite = "Free-Learn";

</script>

Free-Learn

کلمه کلیدی Let

کلمه کلیدی Let هم مثه Var هست و کلی بخوایم حساب کنیم ماهیتشون یکیه ، یعنی از هر دو برای تعریف متغیرها استفاده میشه ، ولی خب یسری تفاوت هایی در نحوه استفاده دارند که در ادامه باهاشون آشنا خواهیم شد.

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

<script>

let MyName = "Sadegh";
let MySite = "Free-Learn";

document.write(MyName);
document.write("<br>");
document.write(MySite);

</script>

let MyName = "Sadegh";

let MySite = "Free-Learn";

document.write(MyName);

document.write("<br>");

document.write(MySite);

</script>

امتحان کنید

Free-Learn

کلمه کلیدی Const

خب دوستان در ادامه آموزش کلمات کلیدی var و let و const در جاوااسکریپت میخوایم با کلمه کلیدی const آشنا بشیم.

کلمه کلیدی Const یا به فارسی خودمونی ( ثابت / دائمی ) بطور کلی مثه همون let و var برای تعریف و نگهداری داده ها هستند ، ولی خب تفاوتش تو اینه که متغیر Const همواره مقدارش ثابت هستش و مقدارش تو برنامه قابل تغییر نیست.

یعنی مثلا یه متغیر const تعریف کردیم با مقدار ۲ ، در نهایت این مقدار رو دیگه نمیشه در داخل برنامه تغییر داد یا کم و زیادش کرد چون همواره const ثابت هستش.

مگر در Objects ( اشیاء ) و Arrays ( آرایه ها ) که میشه ویژگی هاشون رو تغییر داد ( توجه کنید که خوده Object و Array رو نمیشه تغییر داد چون ثابت هستن ، فقط میشه ویژگی یا آپشن های داخلشون رو تغییر داد ) ( مثال شماره ۳ کمی پایین تر )

توجه : مقدار یک متغیر ثابت رو نمیشه تغییر داد ( مثه مثال شماره ۲ کمی پایین تر ) ولی اجزا ( اشیاء موجود در متغیر ثابت ) مثه Objects یا آرایه ها رو میشه تغییر ( اضافه یا حذف ) کرد. ( مثال های شماره ۳ و ۴ کمی پایین تر )

مثال شماره ۱ : در این مثال متغیری با استفاده از Var بنام myname تعریف کردیم و مقدار هم بهش دادیم، ولی میبینید که در خط بعدش مقدارشو دوباره عوض کردیم، خب در نهایت همون مقدار عوض شده در خروجی نمایش داده میشه. ( خب این یعنی متغیر var قابل دوباره تعریف کردن هستش یا قابل تغییر مقدار می باشد )

<script>

var MyName;
MyName = "Reza"
MyName = "Sadegh";
MyName = "Sadegh Asadi";

document.write(MyName);

</script>

var MyName;

MyName = "Reza"

MyName = "Sadegh";

MyName = "Sadegh Asadi";

document.write(MyName);

</script>

امتحان کنید

مثال شماره ۲ : تو این مثال یه ثابت ( Const ) تعریف کردیم بعدش سعی کردیم همانند مثال قبلی ، مقدارشو تغییر بدیم ولی میبینید که در خروجی هیچی نشون نمیده و عملا همین یعنی اجرا نشدن برنامه.( و این یعنی نمیشه مقدار Const رو تغییر داد )

<script>

const MyName;
MyName = "Reza"
MyName = "Sadegh";
MyName = "Sadegh Asadi";

document.write(MyName);

</script>

const MyName;

MyName = "Reza"

MyName = "Sadegh";

MyName = "Sadegh Asadi";

document.write(MyName);

</script>

امتحان کنید

مثال شماره ۳ : تغییر دادن مقادیر موجود در اشیاء ( Objects ) که بصورت ثابت تعریف شده. ( در جلسات بعدی با Objects آشنا خواهید شد )

<script>

// تعریف کردن ثابت شئ دانشجو
const student = {Name:"Ali", Family:"Akbari", Code:"5567"};

// تغییر دادن نام دانشجو
student.Name = "Reza";

// اضافه کردن گزینه جدید
student.Tel = "09171111111"; 

// نمایش داده ها
document.write(student.Name);
document.write("<br>");
document.write(student.Family);
document.write("<br>");
document.write(student.Code);
document.write("<br>");
document.write(student.Tel);

</script>

// تعریف کردن ثابت شئ دانشجو

const student = {Name:"Ali", Family:"Akbari", Code:"5567"};

// تغییر دادن نام دانشجو

student.Name = "Reza";

// اضافه کردن گزینه جدید

student.Tel = "09171111111";

// نمایش داده ها

document.write(student.Name);

document.write("<br>");

document.write(student.Family);

document.write("<br>");

document.write(student.Code);

document.write("<br>");

document.write(student.Tel);

</script>

امتحان کنید

مثال شماره ۴ : تغییر دادن مقادیر موجود در آرایه ( Array ) که بصورت ثابت تعریف شده. ( در جلسات بعدی با آرایه ها آشنا خواهید شد )

<script>

// تعریف کردن آرایه ثابت دانشجو
const student = ["Ali", " Reza", " Sanaz", " Fateme"];

// تغییر دادن نام دانشجو شماره 1
student[0] = "Sadegh";

// اضافه کردن دانشجو جدید
student.push(" Mahdi"); 

// نمایش داده ها
document.write(student);

</script>

// تعریف کردن آرایه ثابت دانشجو

const student = ["Ali", " Reza", " Sanaz", " Fateme"];

// تغییر دادن نام دانشجو شماره 1

student[0] = "Sadegh";

// اضافه کردن دانشجو جدید

student.push(" Mahdi");

// نمایش داده ها

document.write(student);

</script>

امتحان کنید

Free-Learn

تفاوت های بین Var و Let و Const

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

متغیر Var رو میشه دوباره تعریف کرد و مقدار جدید بهش داد ( مثال )
متغیر Let رو نمیشه دوباره تعریف کرد و مقدار جدید بهش داد ( مثال )
متغیر Var رو میشه اول بهش مقدار داد بعد تعریفش کرد ( مثال )
متغیر Let رو نمیشه اول بهش مقدار داد بعدش تعریفش کرد ( مثال )
مقدار متغیر Const همواره ثابت هستش و در داخل برنامه قابل تغییر نیست ( مثال )
متغیر Const رو نمیشه دوباره تعریف کرد و مقدار جدید بهش داد ( مثال )
متغیر Const رو نمیشه اول بهش مقدار داد بعدش تعریفش کرد ( مثال )

Free-Learn

محدوده دسترسی متغیرها

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

متغیر Var محدوده دسترسیش بصورت تابعی هستش

<script>

// متغیر مای نیم در اینجا قابل دسترسی نیست
document.write(MyName);

function Test(){
 var MyName = "Sadegh";
 // متغیر مای نیم در اینجا قابل دسترس می باشد
 document.write(MyName);
}

// متغیر مای نیم در اینجا قابل دسترسی نیست
document.write(MyName);

</script>

// متغیر مای نیم در اینجا قابل دسترسی نیست

document.write(MyName);

function Test(){

var MyName = "Sadegh";

// متغیر مای نیم در اینجا قابل دسترس می باشد

document.write(MyName);

}

// متغیر مای نیم در اینجا قابل دسترسی نیست

document.write(MyName);

</script>

امتحان کنید

توضیح مثال بالا :

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

متغیر Let محدوده دسترسیش بصورت بلوکی { } هستش

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

// ولی اینجا نمیشه بهش دسترسی داشت
{
  let Name = "Sadegh";
  // در اینجا میشه بهش دسترسی داشت
}
// ولی اینجا نمیشه بهش دسترسی داشت

// ولی اینجا نمیشه بهش دسترسی داشت

{

let Name = "Sadegh";

// در اینجا میشه بهش دسترسی داشت

}

// ولی اینجا نمیشه بهش دسترسی داشت

متغیر Const محدوده دسترسیش بصورت بلوکی { } هستش

// ولی اینجا نمیشه بهش دسترسی داشت
{
  const Name = "Sadegh";
  // در اینجا میشه بهش دسترسی داشت
}
// ولی اینجا نمیشه بهش دسترسی داشت

// ولی اینجا نمیشه بهش دسترسی داشت

{

const Name = "Sadegh";

// در اینجا میشه بهش دسترسی داشت

}

// ولی اینجا نمیشه بهش دسترسی داشت

وقتی یک متغیر با Var یا Let ایجاد شود و خارج از یک تابع قرار بگیرد بهش میگن دامنه سراسری یا Global Scope و در هرکجای برنامه که بخواید میتونید ازش استفاده کنید و فراخوانیش کنید.

var MySite = "Free-Learn";

function test(){
 // متغیر مای سایت اینجاهم قابل دسترسی هست
}

// متغیر مای سایت اینجاهم قابل دسترسی هست

var MySite = "Free-Learn";

function test(){

// متغیر مای سایت اینجاهم قابل دسترسی هست

}

// متغیر مای سایت اینجاهم قابل دسترسی هست

مثال شماره ۱ : با استفاده از Var یک متغیر بنام MyName درست کردیم و بعدش در دامنه بلوکی if گفتیم اگه مقدار MyName برابر بود با Sadegh خب بیا و مقدار MyName رو بکن OK و در نهایت در خارج از بلوک فراخوانیش کردیم و در خروجی به نماش درآوردیم.

چون دامنه بلوکی برای Var معنایی نداره و گفتیم Var فقط دامنه تابعی داره ، پس باید مقدار خروجی بشه OK – یعنی میاد بررسی میکنه میبینه مقدار MyName برابر است با Sadegh بعدش مقدارشو عوض میکنه به OK و در نهایت هم در خروجی نشونش میده.

<script>

var MyName = "Sadegh";

if( MyName == "Sadegh" ){
 var MyName = "OK";
}

document.write(MyName);

</script>

var MyName = "Sadegh";

if( MyName == "Sadegh" ){

var MyName = "OK";

}

document.write(MyName);

</script>

امتحان کنید

مثال شماره ۲ : همون مثال شماره ۱ هست فقط بجای Var اومدیم و Let استفاده کردیم، و گفتیم که Let دامنه بلوکی داره ، یعنی اگه بخوایم به مقدار let دسترسی پیدا کنیم باید تو همون بلوکی که تعریف شده بهش دسترسی پیدا کنیم نه خارج از بلوک.

خب چکار میکنه، میاد بررسی میکنه میبینه مقدار MyName برابر است با Sadegh خب بله ، بعدش میاد و مقدارشو عوض میکنه به OK ولی در خروجی نمیتونه نشونش بده چون ما خارج از بوک داریم فراخوانیش میکنیم. پس خروجی باید بشه Sadegh

<script>

// بصورت سراسری تعریف شده پس در همه جای برنامه قابل دسترسی می باشد
let MyName = "Sadegh";

if( MyName == "Sadegh" ){
 // چون داخل بلوک تعریف شده پس فقط داخل همین بلوکم قابل دسترسی می باشد
 let MyName = "OK";
}

document.write(MyName);

</script>

// بصورت سراسری تعریف شده پس در همه جای برنامه قابل دسترسی می باشد

let MyName = "Sadegh";

if( MyName == "Sadegh" ){

// چون داخل بلوک تعریف شده پس فقط داخل همین بلوکم قابل دسترسی می باشد

let MyName = "OK";

}

document.write(MyName);

</script>

امتحان کنید

حالا اگه در همین مثال document.write(MyName) رو ببریم بزاریم داخل بلوک IF میبینی خروجی میشه OK و عملا همونچیزی که میخوایم میشه. چون دیگه داریم از داخل بلوک فراخوانی میکنیم نه خارج از بلوک.

<script>

let MyName = "Sadegh";

if( MyName == "Sadegh" ){
 let MyName = "OK";
 document.write(MyName);
}

</script>

let MyName = "Sadegh";

if( MyName == "Sadegh" ){

let MyName = "OK";

document.write(MyName);

}

</script>

امتحان کنید

Free-Learn

قابلیت دوباره تعریف شدن

متغیرهایی که با Let تعریف میشن اگه مقدارشون در یک بلوک عوض شه، این باعث نمیشه که مقدار کل عوض شه و فقط مقدار در همان بلوک عوض میشه و قابل دسترس در همان بلوک می باشد.

<script>

let MyName = "Sadegh";
document.write(MyName); // خروجی میشه Sadegh

document.write("<br>");

{
 let MyName = "Reza";
 document.write(MyName); // خروجی میشه Reza
}

</script>

let MyName = "Sadegh";

document.write(MyName); // خروجی میشه Sadegh

document.write("<br>");

{

let MyName = "Reza";

document.write(MyName); // خروجی میشه Reza

}

</script>

امتحان کنید

همونطور که تا الان متوجه شدیم ، متغیر var قابلیت دوباره تعریف کردن داره ، پس نتیجه میگیریم که Var در داخل و خارج حلقه دوباره تعریف میشه

<script>

var result = "";
var i = 1000;
for (var i = 1; i <= 5; i++) {
  result = result + i + "<br>";
}

document.write(result);
document.write(" ---- " + "<br>");

//چیزی که بعد از حلقه چاپ میشه
document.write(i);

</script>

var result = "";

var i = 1000;

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

result = result + i + "<br>";

}

document.write(result);

document.write(" ---- " + "<br>");

//چیزی که بعد از حلقه چاپ میشه

document.write(i);

</script>

امتحان کنید

توضیح مثال بالا :

در خط ۴ متغیر i رو با مقدار ۱۰۰۰ تعریف کردیم، ولی خب اینو اصلا کاری بهش نداره و کلا انگار الکیه، چرا؟؟ چون خب دوباره i رو در حلقه تعریف کردیم و مقدارم بهش دادیم. و گفتیم که var میشه دوباره تعریف شه و مقدار بگیره.

و در خط ۱۳ گفتیم i رو چاپ کنه ، چون خارج از حلقه هستیم طبیعتا باید ۱۰۰۰ رو چاپ کنه ولی نه ، همون i توی حلقه رو چاپ میکنه با یک مقدار اضافه تر ، یعنی در خروجی ۶ چاپ میشه

استفاده از Let در حلقه For – این دیگه خارج از حلقه دوباره تعریف نمیشه ، پس باید طبیعتا خارج از حلقه ۱۰۰۰ رو چاپ کنه

<script>

var result = "";
let i = 1000;
for (let i = 1; i <= 5; i++) {
  result = result + i + "<br>";
}

document.write(result);
document.write(" ---- " + "<br>");

//چیزی که بعد از حلقه چاپ میشه
document.write(i);

</script>

var result = "";

let i = 1000;

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

result = result + i + "<br>";

}

document.write(result);

document.write(" ---- " + "<br>");

//چیزی که بعد از حلقه چاپ میشه

document.write(i);

</script>

امتحان کنید

Free-Learn

دسترسی به شئ پنجره یا Window Object

متغیر Var قابلیت دسترسی به شئ پنجره ( یا Window Object ) رو دارد ولی Let ندارد.

مثال شماره ۱ : استفاده از var برای دسترسی به شئ پنجره – خروجی برابر است با Sadegh

<script>

var MyName = "Sadegh";
document.write( window.MyName );

</script>

var MyName = "Sadegh";

document.write( window.MyName );

</script>

امتحان کنید

مثال شماره ۲ : استفاده از Let برای دسترسی به شئ پنجره – خروجی برابر است با undefined یعنی تعریف نشده

<script>

let MyName = "Sadegh";
document.write( window.MyName );

</script>

let MyName = "Sadegh";

document.write( window.MyName );

</script>

امتحان کنید

Free-Learn

خلاصه این جلسه در یک نگاه

با استفاده از var و let و const میشه متغیرهارو در جاوااسکریپت تعریف کرد
متغیرهای let و const در نسخه ۲۰۱۵ جاوااسکریپت اضافه شده اند
متغیر var دامنه تابعی دارد و متغیرهای let و const دامنه بلوکی
وقتی متغیرهای var یا let یا const در بیرون از تابع یا بلوک تعریف بشن ،میشه متغیرهای سراسری و این یعنی هرکجای برنامه قابل دسترسی می باشند
متغیر var رو میشه دوباره تعریف کرد ولی متغیر let و const رو نمیشه دوباره / ازنو تعریف کرد
مقدار متغیر var و let رو میشه در طول برنامه تغییر داد ولی مقدار const رو نمیشه
مقدار و خوده متغیر const رو نمیشه بعد از تعریف کردن ، تغییر داد ولی ویژگی های داخلشون رو در Objects ( اشیاء ) و Arrays ( آرایه ها ) میشه تغییر داد
متغیر let فقط در همون بلوکی که تعریف میشه قابل دسترسی هست و اگه خارج از بلوک تعریف بشه میتونه بصورت سراسری مورد استفاده قرار بگیره
متغیر var کاری به بلوک نداره و فقط با تابع کار میکند، یعنی اگه داخل بلوک باشه در خارج از بلوک هم میشه بهش دسترسی داشت ولی اگه داخل تابع باشه فقط از داخل تابع میشه بهش دسترسی داشت
متغیر var هم در خارج از حلقه دوباره تعریف میشود ولی متغیر let در خارج از حلقه تعریف نمیشه
از طریق شئ پنجره ( یا Window Object ) میشه به var دسترسی داشت ولی به let نمیشه

Free-Learn

دریافت PDF یا پرینت این مطلب

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

Free-Learn

کلمات کلیدی Var و Let و Const در جاوااسکریپت

Free-Learn

کلمه کلیدی Var

Free-Learn

کلمه کلیدی Let

Free-Learn

کلمه کلیدی Const

Free-Learn

تفاوت های بین Var و Let و Const

Free-Learn

محدوده دسترسی متغیرها

Free-Learn

قابلیت دوباره تعریف شدن

Free-Learn

دسترسی به شئ پنجره یا Window Object

Free-Learn

خلاصه این جلسه در یک نگاه

Free-Learn

آموزش مقدماتی جاوااسکریپت

آموزش قدم به قدم زبان جاوا اسکریپت

آشنایی با قوانین جاوااسکریپت

نحوه نوشتن یا سینتکس دستورات جاوااسکریپت

نحوه استفاده از دستورات JS در یک صفحه وب

نحوه نوشتن توضیحات در جاوااسکریپت

آموزش انتخابگرها در جاوااسکریپت

نحوه نمایش خروجی داده ها در جاوااسکریپت

کار با متغیرها یا Variables در جاوااسکریپت

آموزش صفت Rel در HTML