درس دوم: متغیرها در اکمااسکریپت

05 شهریور 1397
es6-variables

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

یک متغیر یک فضای نامگذاری شده در حافظه است که مقادیر را در خودش ذخیره میکند. به عبارت دیگر متغیر به عنوان یک کانیتنر (ذخیره کننده) مقدار برای برنامه است. به متغیرها، شناسه هم می گویند.

قوانین نامگذاری برای یک شناسه عبارت است از:

  • نام شناسه ها نمیتوانند همنام کلمات کلیدی جاوا اسکریپت باشند
  • شناسه ها می توانند حروف و اعداد باشند.
  • شناسه ها نمیتوانند فضای خالی و کاراکترهای خاص باشند. بجز underscore(_) و علامت دلار ($) .
  • نام متغیرها نمی توانند با یک عدد شروع شوند.

سینتکس یک متغیر

یک متغیر باید قبل از استفاده تعریف شود. در ES5 با استفاده از کلمه کلیدی Var یک متغیر را تعریف می کردیم.

//Declaration using var keyword 
var  variable_name

در ES6 از سینتکس زیر برای تعریف یک متغیر استفاده می شود.

  • استفاده از let
  • استفاده از const

به فرآیند ذخیره یک مقدار در متغیر، مقدار دهی متغیر می گویند. یک متغیر میتواند در زمان تعریف مقدار بگیرد و یا در هر زمان که نیاز داشتیم. دستور سنتی سینتکس ES5 برای تعریف یک متغیر عبارت است از:

//Declaration using var keyword 
var variable_name = value

مثال: استفاده از متغیر

var name = "Tom" 
console.log("The value in the variable is: "+name)

در مثال بالا یک متغیر را تعریف و مقدارش را چاپ کردیم. درصورتی که کد بالا با موفقیت اجرا شود در خروجی مقدار زیر چاپ خواهد شد.

The value in the variable is Tom

جاوا اسکریپت و نوع دینامیک

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

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

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

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

مثال: متغیر سراسری در مقابل متغیر محلی

مثال زیر دو متغیر به نام num تعریف می کند یکی خارج از متد (محدوده سراسری) و دیگری داخل متد (محدوده محلی)

var num = 10 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) 
} 
console.log("value of num outside test() "+num) 
test()

در صورتی که در داخل متد، بخواهیم مقدار یک متغیر را چاپ کنیم، برنامه از متغیری که محدوده محلی دارد استفاده می کند. اما در صورتی که بخواهیم در خارج از متد ، مقدار یک متغیر را چاپ کنیم، برنامه از متغیری که در محدوده سراسری قرار دارد استفاده میکند.

خروجی برنامه:

value of num outside test() 10
value of num in test() 100

اما در ES6 یک محدوده جدیدی به نام محدوده بلوک تعریف شده است.

Let و محدوده بلوک

محدوده بلوک (block) دسترسی به یک متغیر را به بلوکی که در آن تعریف شده، محدود می کند.

کلمه کلیدی var یک محدوده متد را به یک متغیر نسبت می دهد. بر خلاف var، کلمه کلیدی let دسترسی به متغیر را به نزدیکترین بلوک به ان متغیر محدود می کند.

"use strict" 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) { 
      console.log("Inner Block begins") 
      let num = 200 
      console.log("value of num : "+num)  
   } 
} 
test()

اسکریپت یک متغیر به نام num داخل محدوده محلی تعریف کرده و دوباره آن را داخل یک بلوک باکلمه کلیدی let تعریف کرده.

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

خروجی برنامه

value of num in test() 100 
Inner Block begins 
value of num : 200

مثال: let و var

var no = 10; 
var no = 20; 
console.log(no);

خروجی

20

حال کد بالا را با let می نویسیم:

let no = 10; 
let no = 20; 
console.log(no);

کد بالا یک خطا با عنوان Identifier ‘no’ has already declared (شناسه ‘no’  قبلا تعریف شده است) را نمایش می دهد. هر متغیری که با کلمه کلیدی let تعریف شود، مربوط به یک محدوده بلوک است.

Const 

کلمه کلیدی const یک مقدار فقط خواندنی را برای ما ایجاد می کند.این جمله به این معنی نیست که مقدار این متغیر تغییر ناپذیر است، بلکه به این متغیر نمی توان دوباره مقداری را نسبت داد.

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

قوانینی که در مورد ثابت ها وجود دارد عبارت است از:

  • یک ثابت نمی تواند دوباره تعریف شود.
  • ثابت ها حتما باید در هنگام تعریف مقدار دهی شوند.
  • مقداری که به یک متغیر const نسبت داده می شود تغییر ناپذیر است.

مثال

const x = 10 
x = 12 // will result in an error!!

کد بالا یک خطا را بر می گرداند. چون نمی توان به یک متغیر const دوباره مقداری را نسبت داد.متغیرهای const تغییر ناپذیرند.

ES6 و Variable hoisting

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

Variable hoisting  اجازه می دهد حتی قبل از تعریف یک متغیر بتوانیم از آن استفاده کنیم.

مثال زیر را بینید.

var main = function() { 
   for(var x = 0;x<5;x++) { 
      console.log(x); 
   } 
   console.log("x can be accessed outside the block scope x value is :"+x); 
   console.log('x is hoisted to the function scope'); 
} 
main();

خروجی

0
1
2
3
4
x can be accessed outside the block scope x value is :5
x is hoisted to the function scope

در اصل موتور جاوا اسکریپت، اسکریپت بالا را مثل زیر نشان می دهد.

var main = function() { 
   var x; // x is hoisted to function scope 
   for( x = 0;x<5;x++) { 
      console.log(x); 
   }  
   console.log("x can be accessed outside the block scope x value is :"+x); 
   console.log('x is hoisted to the function scope'); 
} 
 main();

مفهوم hoisting به تعریف یک متغیر اعمال می شود و نه به مقداردهی متغیر. پیشنهاد می کنیم متغیرها را همیشه در بالای محدوده ها (بالای محدوده سراسری و در بالای کدهای متدها) تعریف کنید.

نویسنده شوید
دیدگاه‌های شما (1 دیدگاه)

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

reza
30 آبان 1397
سلام اگه ممکن است کمی توضیح دهید چرا ES5 نسبت به ES6 تغییرات زیادی کرده است و این تغییرات باعث چه ویژگی هایی در ES6 شده است (نقص هایی که در ES5 باعث این تغییرات شده ، چه بوده است ) ممنون از مطالب آموزشی عالیتون

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

روکسو
30 آبان 1397
سلام وقت شما بخیر این تغییرات به معنی ضعف نسخه ES5 نیست. بلکه با بوجود آمدن ES6 تغییرات عظیم و جدیدی به ES5 اضافه شد: ‍۱) ویژگی های جدیدی در زمینه اعداد و همچنین متدهای Math ۲) ویژگی ها و متدهای جدیدی در رشته ها ۳) تغییراتی در زمینه تعریف متغییرها و اسکوپ (scope) ها (مثلا متغییرها با let‌ تعریف می شوند) ۴) اضافه شدن مفهومی به نام Destructing (مخرب سازی) ۵) اضافه شدن کلاس ها و شیء گرایی به زبان جاوا اسکریپت ۶) اضافه شدن مفهومی به نام ماژول برای مدیریت کلاس ها و اسکریپت ها ۷) حلقه ی جدیدی به نام for-of برای مدیریت بهتر تکرارها ۸) مفاهیم جدیدی به نام Maps و Sets برای کار کردن با متدها ۹) مشخص کردن نوع آرایه ها ۱۰) معرفی مفاهیمی مثل Generator و ...

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