کلیدواژه ی const در ECMAScript 2015

05 اسفند 1397
javascript-const-keyword

با سلام خدمت شما خوانندگان گرامی، همانطور که در قسمت قبل گفتیم، در سال 2015 دو کلیدواژه ی مهم به نام های let و const به جاوا اسکریپت معرفی شد که کارشان تعریف Block Scope در متغیرها بود. قبل از ECMAScript 2015 تنها دو نوع scope در جاوا اسکریپت داشتیم: Global Scope و Function Scope.

در جلسه ی قبل در مورد let مفصلا صحبت کردیم و در این جلسه به سراغ const خواهیم رفت.

کلیدواژه ی const

متغیرهایی که با کلیدواژه ی const ساخته شوند دقیقا مانند let هستند اما تفاوتی نیز دارند؛ تفاوتشان در این است که نمی توانید دوباره به آن ها مقدار دهی کنید. در واقع const مخفف constant (به معنی «ثابت») است:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You cannot change a primitive value.</p>

<p id="demo"></p>

<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

قسمت "PI = 3.14" در کد بالا باعث می شود با خطای زیر برخورد کنیم:

TypeError: Assignment to constant variable.

Block Scope

متغیرهایی (یا ثابت هایی) که با const تعریف شوند در زمینه ی Block Scope دقیقا مانند let هستند. به طور مثال، متغیر x که در داخل بلوکه تعریف شده است با متغیر x ای که خارج از آن تعریف شده متفاوت است:

<!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using const</h2>

<p id="demo"></p>

<script>
var  x = 10;
// مقدار ایکس در اینجا 10 است
{  
  const x = 2;
// مقدار ایکس در اینجا 2 است
}
// مقدار ایکس در اینجا 10 است
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

خروجی این کد طبق انتظار ما عدد 10 خواهد بود.

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

const PI;
PI = 3.14159265359;

اما این کد صحیح است:

const PI = 3.14159265359;

نکته: کلیدواژه ی const ممکن است کمی گمراه کننده باشد. این کلیدواژه یک مقدار ثابت را نمی سازد بلکه ارجاعی ثابت به یک مقدار خاص می سازد. به همین دلیل ما نمی توانیم مقادیر ابتدایی یک ثابت را تغییر دهیم اما می توانیم خصوصیات اشیاء ثابت را تغییر دهیم. بگذارید برایتان مثالی بزنم...

const PI = 3.141592653589793;
PI = 3.14;      // این کد باعث بروز یک خطا می شود.
PI = PI + 10;   // این کد نیز غلط است و باعث بروز خطا خواهد شد.

اما میتوان خصوصیات اشیاء ثابت (Constant Objects) را تغییر داد:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>Declaring a constant object does NOT make the objects properties unchangeable:</p>

<p id="demo"></p>

<script>
// ساخت یک شیء
const car = {type:"Fiat", model:"500", color:"white"};

// تغییر یک خصوصیت
car.color = "red";

// اضافه کردن یک خصوصیت
car.owner = "Johnson";

// نمایش خصوصیت
document.getElementById("demo").innerHTML = "Car owner is " + car.owner; 
</script>

</body>
</html>

خروجی این کد عبارت "Car owner is Johnson" می باشد.

در مثال بالا مشاهده کردیم که می توانیم رنگ ماشین را تغییر دهیم و یا خصوصیتی به نام owner را به آن اضافه کنیم اما اجازه نداریم یک شیء ثابت را دوباره مقدار دهی کنیم:

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // این کد غلط است و باعث بروز خطا می شود

سوال: آیا آرایه های ثابت (Constant Arrays) می توانند تغییر کنند؟

پاسخ: بله شما می توانید عناصر یک آرایه ی ثابت را تغییر دهید:

// ساخت یک آرایه ی ثابت
const cars = ["Saab", "Volvo", "BMW"];

// تغییر یک عنصر
cars[0] = "Toyota";

// اضافه کردن یک عنصر
cars.push("Audi");

اما نمی توانید آن را دوباره مقدار دهی کنید:

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // این کد غلط است و باعث بروز خطا می شود

پشتیبانی از const

وضعیت پشتیبانی از const در مرورگر های مختلف به شرح زیر است:

Opera 36 Safari 10 Firefox 36 IE / Edge 11 Chrome 49
Mar, 2016 Sep, 2016 Feb, 2015 Oct, 2013 Mar, 2016

بنابراین در Internet Explorer 10 و نسخه های پایینتر پشتیبانی نمی شود.

تعریف چندباره ی متغیرها

همانطور که از جلسه ی قبل می دانیم، تعریف چندباره ی متغیرهایی که با var ساخته شده اند مجاز می باشد:

var x = 2;    //  مجاز
var x = 3;    //  مجاز
x = 4;        //  مجاز

اما تعریف مجدد یا مقداردهی مجدد متغیرهای var یا let  به const، در صورتیکه در یک scope باشند، غیر مجاز است:

var x = 2;         // مجاز
const x = 2;       // غیر مجاز
{
  let x = 2;     // مجاز
  const x = 2;   // غیر مجاز
}

همچنین تعریف دوباره ی متغیری که با const ساخته شده است در scope یکسان غیر مجاز می باشد:

const x = 2;       // مجاز
const x = 3;       // غیر مجاز
x = 3;             // غیر مجاز
var x = 3;         // غیر مجاز
let x = 3;         // غیر مجاز

تعریف دوباره ی متغیر های const در scope ای متفاوت مجاز است:

const x = 2;       // مجاز

{
  const x = 3;   // مجاز
}

{
  const x = 4;   // مجاز
}

مبحث Hoisting

در جلسات قبل در رابطه با Hoisting صحبت کرده ایم اگر چیزی از آن نمیدانید به این مقاله در همین سری آموزشی مراجعه کنید. همانطور که میدانید متغیرهای var به بالای سورس کد می روند و به قولی Hoist می شوند اما متغیرهای const بالا نخواهند رفت و سر جایشان باقی می مانند بنابراین نمی توانید از متغیر های const قبل از تعریف کردنشان استفاده کنید.

امیدوارم از این قسمت لذت برده باشید.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.