معرفی ES6 و آشنایی با مفاهیم آن

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

فهرست مطالب
اکما اسکریپت چیست؟
اکما اسکریپت 6
- کلمه کلیدی let و const
- اَرو فانکشن(Arrow function)
- پارامترهای پیش‌فرض در تابع
- پارامتر rest و اپراتور spread
- حلقه for of

اکما اسکریپت چیست؟

اکما اسکریپت در واقع نوعی زبان برنامه نویسی اسکریپتی، استاندارد شده می باشد که با انواع مرورگرهای اینترنتی سازگاری دارد. اکما اسکریپت برای استاندارد سازی زبان جاوااسکریپت در سال1997 یعنی دو سال بعد از پیدایش زبان جاوااسکریپت عرضه شد و می توان گفت که مکمل زبان جاوااسکریپت می باشد تا چارچوب استانداردی برای این زبان برنامه نویسی تعیین نماید. البته دستورات و مفاهیم جدید را در قالب ورژن جدید اکما اسکریپت سالانه یا هر چند سال یکبار به زبان جاوااسکریپت اضافه می کند. نسخه 6 این استاندارسازی سال 2015 عرضه شد که با نام های ES6، جاوااسکریپت 6 یا جاوااسکریپت 2015 شناخته می شود. اکما اسکریپت 6 مفهوم های زیادی را به جاوااسکریپت اضافه کرد و از اهمیت بالایی برخوردار است و برنامه نویسان فرانت اند به صورت مکرر از این دستورات اضافه شده در ES6 استفاده می نمایند. اکما اسکریپت 12 آخرین ورژن می باشد که در سال 2021 میلادی عرضه شده است.

برای اطلاع از تغییرات و افزودنی های اکما اسکریپت 12 اینجا کلیک نمائید.

اکما اسکریپت 6

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

کلمه کلیدی let و const

تا قبل از ES6 برای تعریف متغیر باید از کلمه کلیدی var استفاده می شد، کلمه کلیدی var به صورت سراسری در کدهای ما قابل استفاده بود. اما در ES6 دو کلمه کلیدی let و const به زبان جاوااسکریپت اضافه شد. این دو کلمه کلیدی برخلاف var، بلاک اسکوپ می باشند یعنی اگر متغیری را داخل یک تابع یا حلقه تعریف نمائیم، این متغیر خارج از تابع قابل دسترسی نیست و درون تابع یا حلقه فقط دردسترس می باشد.

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

const car = "volvo"
console.log(car);
car = "bmw"

خروجی کد بالا:

اَرو فانکشن(Arrow function)

ارو فانکشن جایگزینی برای فانکشن های بدون نام می باشد و باعث کوتاه تر شدن کدها و خوانایی بیشتر کدهای ما می شود. به صورت کلی هرجا که از کلمه کلیدی function استفاده شده باشد، می توان از ارو فانکشن استفاده کرد.

- اگر دستورات ما یک خط باشد، نیازی به استفاده از کلمه return در ارو فانکشن نداریم.

- اگر یک آرگومان داشته باشیم، می توانیم پرانتز ها را حذف نمائیم.

به عنوان مثال:

// ES5 way
button.addEventListener('click', function() {
...
})

// ES6 way
button.addEventListener('click', () => {
...
})

مثالی دیگر:

let array = [1,7,98,5,4,2]
// ES5 way
var moreThan20 = array.filter(function (num) {
  return num > 20
})

// ES6 way
let moreThan20 = array.filter(num => num > 20)

پارامترهای پیش‌فرض در تابع

از اکما اسکریپت 6 بعد می توانیم برای آرگومان های درون تابع مقدار پیشفرض تعیین نمائیم. در نگاه اول شاید این مورد مهم به نظر نرسد اما می تواند از رویدادن خطاهای اتفاقی در برنامه ما جلوگیری نماید. برای درک بهتر این موضوع به مثال زیر توجه نمائید.

function sum(x,y){
    return x+y;
}
console.log(sum());
console.log(sum(5));

// function for default parameters
function sum2(x=0,y=0){
    return x+y;
}
console.log(sum2());

خروجی کد بالا:

پارامتر rest و اپراتور spread

هر دو مورد پارامتر rest و اپراتور spread به صورت (...) نسان داده می شوند. مثلا با استفاده از پارامتر rest پارامتر می توانیم آرگومان های یک تابع را به یک آرایه تبدیل نمائیم و با استفاده از اپراتور spread می توانیم یک آرایه را دریافت و این آرایه را به لیستی از آرگومان های جدا از هم تبدیل می نماید یا یک چندین آرایه را با هم جمع نمائیم. به مثال زیر توجه نمائید.

let numbers = [1 ,2, 3, 4, 5];
console.log(...numbers);

let  yekan = [1, 2, 3];
let dahgan = [10, 20, 30];
let sadgan = [100, 200, 300];
let combine = [...yekan, ...dahgan, ...sadgan];
console.log(combine);

خروجی کد بالا:

حلقه for of

با استفاده از حلقه for of می توانیم تک تک آیتم های یک آرایه را دریافت نمائیم و عملیات مورد نظر خود را روی عناصر آرایه پیاده سازی نمائیم.

let numbers = [1 ,2, 3, 4, 5];
for ( let num of numbers){
    console.log(num);
}

خروجی کد بالا:

علاوه بر موارد بالا، موارد مهم دیگری مانند کلاس ها، پرامیس ها و ... هم وجود دارد که در اکما اسکریپت 6 به جاوااسکریپت اضافه شده اند، برای مطالعه بیشتر درباره این موارد، می توانید به سایت w3schools مراجعه نمائید.

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

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