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

با سلام خدمت شما خوانندگان گرامی، همانطور که در قسمت قبل گفتیم، در سال 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 قبل از تعریف کردنشان استفاده کنید.

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