آموزش کار با متغیرها در ES6

آموزش کار با متغیرها در ES6:

یک متغیر (Variable) فضایی نام دار در حافظه است که مقداری (Value) را نگهداری می کند. نام متغیرها در ES6 تحت عنوان شناسه یا identifier شناخته می شود. در اکما اسکریپت ECMAScript6 یا ES6 باید قوانین زیر را در هنگام نام گذاری متغیرها رعایت نمایید:

• نام متغیرها می تواند شامل حروف و اعداد باشد.
• نمی توانید نام متغیر را با یک عدد شروع کنید.
• کلمات کلیدی رزرو شده زبان ES6 یا keywords مثل if، for و ... را نمی توان به عنوان نام متغیرها به کار برد.
• شناسه (identifiers) یا همان نام متغیرها، نمی تواند شامل فاصله خالی یا کاراکترهای خاصی مثل خط فاصله، @ و ... به جز علامت $ یا زیر خط (_) باشد.

آموزش مقداردهی اولیه متغیرها در ES6:

در این بخش به آموزش مقداردهی اولیه متغیرها در ES6 یا قرار دادن مقدار (Value) در آنها می پردازیم. می توان یک متغیر را در هر زمان یا هر جای کد برنامه، قبل از استفاده، مقداردهی کرد.
ساختار دستوری ES6 از کلمه کلیدی var برای تعریف متغیر یا variable استفاده می کند. در ES5، یک متغیر را به صورت زیر تعریف می کردیم:

var x //Declaration of a variable by using the var keyword   
            

ساختارهای دستوری صحیح تعریف و مقداردهی متغیرها در ES6:

در کد مثال زیر، چندین نمونه از نام گذاری صحیح متغیرها و مقداردهی آنها در ES6 را نشان داده ایم:

var $example1=value  
var example1=value  
var _example$=value 
            

در ES6 از دو طریق دیگر نیز می توانید متغیر (Variable) تعریف کنید:

• استفاده از کلمه کلیدی let.
• استفاده از کلمه کلیدی const.

آموزش تعریف متغیر با دستور let در ES6:

هر متغیری که توسط let تعریف شود، دارای یک محدوده اعتبار و عملکرد (Block Scope) می باشد. یعنی فقط در آن محدوده توسط برنامه شناسایی شده و به کار می رود، حال این محدوده می تواند بدنه یک تابع (function)، یک بلوک کد (block) یا کل اسکریپت (global) باشد.
مثال: بررسی تفاوت تعریف متغیر با var و let.در کد مثال زیر، یک متغیر به نام x را با کلمه کلیدی var تعریف و دوباره مقداردهی کرده ایم. در پایان هم مقدار آن را چاپ کرده ایم اما چون Scope معینی ندارد برنامه خطا نمی دهد و به دو بار مقداردهی آن ایراد نمی گیرد.

var x = 100;  
var x=200;  
console.log(x);  
            

پس از اجرای کد فوق، خروجی زیر که مقدار دوم متغیر x است نشان داده می شود:

200
            

مثال2: در کد مثال زیر، متغیر x را دو بار با دستور let تعریف و مقداردهی کرده و در پایان مقدار آن را خواستیم که در خروجی نشان دهیم:

let x = 100;  
let x=200;  
console.log(x);  
            

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

SyntaxError: Identifier 'x' has already been declared
            

ES6 یک روش جدید برای تعریف مقادیر ثابت (constant) با استفاده از کلمه کلیدی const ارائه کرده است. کلمه کلیدی const یک ارجاع به مقدار (value) فقط خواندنی و غیر قابل تغییر (read-only) در حافظه ایجاد می کند. مهم ترین خصوصیات مقادیر تعریف شده با const عبارتند از:

• مقدار آن ثابت بوده و نمی توانید دوباره مقداردهی اش نمایید.
• دارای محدوده عملکرد (block scope) است.
• یک مقدار ثابت را نمی توانید دوباره تعریف یا مقداردهی کنید.
• مقادیر ثابت (Constants) بایستی در زمان تعریف مقداردهی شوند.

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

const y=100  
y=200 // It will result in an error  
            

پس از اجرای کد فوق، برنامه خطا می دهد و اعلام می کند که یک مقدار ثابت (Constant) را نمی توانید مجددا مقداردهی کنید.

            TypeError: Assignment to constant variable.
            

محدوده عملکرد متغیرها (Scope) در جاوا اسکریپت:

متغیرها در جاوا اسکریپت دارای دو نوع محدوده عملکرد یا Scope به صورت عمومی (Global) یا محلی (Local)هستند:

• عملکرد عمومی (Global Scope): در این حالت، متغیر در هر جایی از کل برنامه و اسکریپت، قابل فراخوانی، مقداردهی و استفاده است.
• عمکرد محلی (Local Scope): در این حالت متغیر فقط در بلوک کدی که تعریف شده (تابع یا بلوک کد) قابل دسترسی، خواندن و مقدار دهی است.

مثال: در کد زیر، نحوه عملکرد و به کار بردن متغیرها عمومی (Global) و محلی (Local) در جاوا اسکریپت را نشان داده ایم. در کد زیر متغیر اول var12$ دارای عملکرد Global و متغیر دوم var12$ دارای عملکرد محلی (فقط درون تابع خود) است:

var $var12 = 200;   
  
function example() {    
    var $var12 = 300;   
    console.log("Inside example() function = "  
               + $var12);   
}   
console.log("Outside example() function = "   
               + $var12);  
example();
            

Outside example() function = 200
Inside example() function = 300
            

آموزش نوع داده پویا (Dynamic) در جاوا اسکریپت:

جاوا اسکریپت همانند زبان های برنامه نویسی پایتون، پرل و روبی از نوع داده ای پویا یا Dynamic (متغیری که نوع آن در کد برنامه بدون بروز خطا قابل تغییر است مثلا از int به String و ...) پشتیانی می کند.
در این امکان لازم نیست به جاوا اسکریپت بگویید که متغیر چه نوع داده ای را قرار است نگهداری نماید. اگر نوع (type) متغیر در خلال اجرای کد تغییر کند، جاوا اسکریپت به صورت خودکار شرایط تطبیق داده را فراهم کرده و خطایی رخ نمی دهد.

بالا بردن (Hoisting) متغیرها در ES6:

عملیات بالا بردن متغیر (Variable Hoisting)، رفتار پیش فرض جاوا اسکریپت در انتقال کلیه تعریف های برنامه نویسی (declaration) مثل تعریف متغیر، به بالای اسکریپت، تابع یا محدوده کد (Scope) است. این خاصیت به شما امکان می دهد قبل از تعریف یک متغیر، از آن استفاده کنید.

مثال عملی: در کد مثال زیر، متغیر X را ابتدا مقداردهی کرده، سپس استفاده نموده و در نهایت در خط آخر تعریفش کرده ایم:

x=10;  
console.log(x);  
var x;  
            

با اجرای کد فوق، نه تنها خطای کامپایل یا کد نویسی روی نمی دهد بلکه با موفقیت اجرا شده و خروجی مورد نظر را نیز تولید می کند. این اتفاق به دلیل خاصیت بالا بردن تعریف متغیر (Variable Hoising) جاوا اسکریپت است. حال بیایید نگاه کنیم در فاز اجرایی چه اتفاقی می افتد. در هنگام کامپایل و اجرای کد عملیات زیر صورت می گیرد:

var x; // declaration of the variable will move on top.  
x=10;  
console.log(x);
            

که خروجی آن برابر است با:

خروجی :           10
            

عملیات بالا بردن کد (Hoising) در مورد مقداردهی متغیرها صدق نمی کند:

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

var x=100;  
var y=200;  
console.log(x+"  "+y);  
            

در فاز کامپایل کد به صورت زیر در می آید و اجرا می شود:

var x;  
var y;  
x=100;  
y=200;  
console.log(x+"  "+y);  
            

و خروجی به صورت زیر است:

100   200
            

مثال 2: وقتی که متغیر را بعد از استفاده از آن، تعریف و مقداردهی می کنید، در کد زیر، متغیر y را ابتدا استفاده کرده ایم، ولی در خط بعدی تعریف و مقداردهی کرده ایم. خاصیت Variable Hoisting جاوا اسکریپت در کد زیر صدق نمی کند و مقداردهی متغیر را بالا نمی آورد. لذا خطایی در اجرای مثال زیر رخ می دهد:

var x=100;  
console.log(x+"  "+y);  
var y=200;  
            

در فاز کامپایل و اجرا، کد فوق به صورت زیر تغییر کرده و اجرا می شود. پس از اجرا، مقدار متغیر y به صورت تعریف نشده (undefined) در خروجی نمایش داده می شود که یک خطای برنامه نویسی است:

var x;  
var y;  
x=100;  
console.log(x+"  "+y);  
y=200;  
            

100  undefined 
            

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